Bonjour à tous,
A la demande d'un client qui gère beaucoup d'agenda, j'ai développé une vue supplémentaire qui leur permet de voir de façon simplifié les agendas de tout le monde sur une journée (pratique pour trouver un créneau de disponibilité de plusieurs personnes par exemple).
https://nimb.ws/Z3246u
Vu le peu de temps alloué à cette tâche j'ai fait ça un peu comme un cochon ( ) à savoir que j'ai tout mis dans le fichier vueIndex.php + une feuille de style que j'ai ajouté + une petite modif dans le controller Calendar.
Est-ce que d'une part ça vous intéresse d'avoir mon code même si très rudimentaire pour l'intégrer dans une version future ? Pour quelqu'un gérant beaucoup d'agenda cette fonctionnalité est tout de même bien plus lisible que la vue Jour existante.
Sinon, est-ce que quelqu'un se sent de m'aiguiller un peu sur la façon pour intégrer ça de façon un peu plus propre et pérenne via un module ?
Développement d'une vue de synthèse journalière
Re: Développement d'une vue de synthèse journalière
Bonjour, Oui le code m'intéresse bouclement. Je trouve l'agenda un peu rudimentaire et je souhaiterai bien l'améliorer.
Merci
Merci
Re: Développement d'une vue de synthèse journalière
Bonjour,
Oui effectivement cela pourrait être complémentaire à la vue "Synthèse".
Xech
Oui effectivement cela pourrait être complémentaire à la vue "Synthèse".
Xech
Re: Développement d'une vue de synthèse journalière
Bonjour,
Du coup c'est déjà un peu moins frais dans ma tête, alors j'espère que je n'oublie rien :
J'ai ajouté un fichier custom.css (que j'appelle dans le header (VueStructure.php) évidemment) :
Dans CtrlCalendar.php ligne 62 j'ai ajouté greffé mon mode synthèse au mode "Jour" qui est similaire dans sa gestion des dates :
Dans le fichier VueIndex.php en plus de mon code j'ai fait quelques changements de structure pour la barre de gauche :
- Dans le menu de gauche j'ai remonté le calendrier à gauche avec à la ligne 148 :
et ligne 222 pour compenser :
Ligne 228 je signifie que le code classique pour la partie haute ne s'applique pas pour le mode synthèse :
Et à la place de ce code je mets ça à partir de la Ligne 275 (ca aurait pu être un elseif d'ailleurs) :
Ligne 292 je signifie que le code pour les autres vues ne s'applique pas dans mon mode 'synthese' :
Ligne 316 j'ajoute ça pour que ma vue synthèse journalière soit dans le menu déroulant quand on est dans un affichage mois/jour/semaine classique (pensez à mettre un fichier DisplaySynthese.gif et à mettre un libellé dans le fichier francais.php :
Et en fin ligne 326 là où la magie opère (je rappelle qu'on ne juge pas le code des copains, j'ai fait ça vraiment vite, en me relisant certains trucs un peu bricolés me piquent les yeux ) :
En espérant que ca aidera et surtout qu'on pourra intégrer ça dans une version future d'Agora !
Bonne journée,
Du coup c'est déjà un peu moins frais dans ma tête, alors j'espère que je n'oublie rien :
J'ai ajouté un fichier custom.css (que j'appelle dans le header (VueStructure.php) évidemment) :
Code : Tout sélectionner
span.menuLaunch > img:first-child {
width: 30px;
}
.return-link{
color: white;
margin-bottom: 20px;
display: block;
}
.CalendarSynthese {
background:white;
border-radius:5px;
box-shadow:0 0 4px black;
width:calc(100% - 10px);
border-collapse:collapse;
border: none;
position:relative;
}
.CalendarSynthese .vSyntheseDay {
display: block;
text-align: center;
height: auto;
font-size: 18px;
}
.CalendarSynthese tr:first-child{
text-align:center;
background:#333!important;
color:white;
height:20px;
}
.CalendarSynthese tr:first-child td{
height:40px;
padding: 5px;
}
.CalendarSynthese tr:nth-child(odd){
background:#e5e5e5;
}
/*.CalendarSynthese tr td:nth-child(n+2):nth-child(-n+8),*/
/*.CalendarSynthese tr td:nth-child(n+23):nth-child(-n+25)*/
/*{*/
/* display:none;*/
/*}*/
.CalendarSynthese tr td:first-child{
padding-left:6px;
width:16%;
}
.CalendarSynthese tr td{
border-right:1px solid #d7d7d7;
width:6%;
height: 90px;
}
.CalendarSynthese tr td:nth-child(n+22){
border-right:none;
}
.CalendarSynthese .vCalEvtBlock.objContainer{
position:absolute;
z-index:0;
font-size: 8px;
height:90px;
overflow:hidden;
color:white;
}
.vCalEvtBlock.objContainer {
height: 80px!important;
}
Code : Tout sélectionner
elseif($displayMode=="day" || $displayMode=="synthese"){
$vDatas["timeBegin"] =strtotime(date("Y-m-d",$curTime)." 00:00");
$vDatas["timeEnd"] =strtotime(date("Y-m-d",$curTime)." 23:59");
$vDatas["urlTimePrev"] =strtotime("-1 day",$curTime);
$vDatas["urlTimeNext"] =strtotime("+1 day",$curTime);
}
- Dans le menu de gauche j'ai remonté le calendrier à gauche avec à la ligne 148 :
Code : Tout sélectionner
if ($displayMode == "synthese") {
echo "<div id='datepickerCalendar'></div>";
}
Code : Tout sélectionner
if($displayMode!="month" && $displayMode!="synthese") {
echo "<div id='datepickerCalendar'></div>";
}
Code : Tout sélectionner
<div id="pageFullContent">
<!--SYNTHESE DES AGENDAS ?-->
<?php if(!empty($periodDaysSynthese) && $displayMode!="synthese"){ ?>
Code : Tout sélectionner
<?php if($displayMode == "synthese"):?>
<a class="return-link" href="/?ctrl=calendar&displayMode=month">>> Retour à la vue classique</a>
<table class="vCalendarVue CalendarSynthese" data-targetObjId="<?= $tmpCal->_targetObjId ?>">
<tr>
<td><?php foreach($periodDaysSynthese as $tmpDay) {echo "<div class=\"vSyntheseDay\">".date("d/m/Y",$tmpDay["timeBegin"])."</div>";} ?></td>
<?php
for($H=7; $H<=20; $H++) {
echo "<td>" . $H . "<span class='vCalWeekHourLabelZero'>:00</span></td>";
}
?>
</tr>
<?php endif;?>
Code : Tout sélectionner
foreach($displayedCalendars as $tmpCal){ ?>
<?php
if($displayMode != "synthese"):?>
Code : Tout sélectionner
<?php foreach(["month","week","synthese","workWeek","4Days"] as $displayModeTmp) {echo "<div class='menuLine ".($displayModeTmp==$displayMode?"sLinkSelect":"sLink")."' onclick=\"redir('?ctrl=calendar&displayMode=".$displayModeTmp."')\"><div class='menuIcon'><img src='app/img/calendar/display".ucfirst($displayModeTmp).".gif'></div><div>".Txt::trad("CALENDAR_display".ucfirst($displayModeTmp))."</div></div>";} ?>
Code : Tout sélectionner
<?php
else:?>
<tr>
<td>
<?php
echo '<span>'.$tmpCal->title.'</span>';
foreach($tmpCal->eventList as $tmpDateEvts)
{
$num_event=0;
foreach($tmpDateEvts as $tmpEvt)
{
$start_time = strtotime($tmpEvt->dateBegin);
$start_position=date('H', $start_time);
if (date('i', $start_time)>25):
$start_position=$start_position+0.5;
endif;
$end_time = strtotime($tmpEvt->dateEnd);
$width= ($end_time - $start_time)/3600 * 6;
$left = ($start_position-7)*6+16;
$top = $num_cal*92+50;
if ($width==0) $width=10;
if ($width>90) : $width=84;$left=16;endif;
$divContainerAttr="onclick=\"lightboxOpen('".$tmpEvt->getUrl("vue")."');event.stopPropagation();\" data-dayCpt=\"".$tmpEvt->dayCpt."\" data-timeBegin=\"".strtotime($tmpEvt->dateBegin)."\" data-timeEnd=\"".strtotime($tmpEvt->dateEnd)."\" data-minutesFromDayBegin=\"".$tmpEvt->minutesFromDayBegin."\" data-durationMinutes=\"".$tmpEvt->durationMinutes."\" data-catColor=\"".$tmpEvt->catColor."\"";
$divContainerAttr.=" style='top:".$top."px;left:".$left."%;width:".$width."%'";
$evtDisplayDate=Txt::displayDate($tmpEvt->dateBegin,"mini",$tmpEvt->dateEnd);
$evtImportant=(!empty($tmpEvt->important)) ? " <img src='app/img/important.png'>" : null;
echo $tmpEvt->divContainer("vCalEvtBlock",$divContainerAttr)."<div>".$evtDisplayDate." ".$tmpEvt->title.$evtImportant."</div></div>";
}
}?>
</td>
<?php
for ($i=7;$i<=20; $i++){
echo '<td></td>';
}
?>
</tr>
<?php endif;?>
<?php
$num_cal++;
} ?>
<?php if($displayMode == "synthese"):?>
</table>
<?php endif;?>
Bonne journée,