[Résolu][Amélioration] Tuto Calendrier PhP - Coloration
Bonjour tout le monde,
J'ai suivi le superbe tuto concernant la création d'un calendrier en PHP. Tout fonctionne à merveille.
Cependant, j'aimerais lui apporter une petite modification.
En effet, je compte utiliser ce calendrier comme système d'affichage pour indiquer les réservations concernant un bien immobilier.
Tout ça relié à un panel admin pour pouvoir Ajouter/Modifier/Supprimer une plage de réservation. BREF.
En fait, pour le moment, le calendrier affiche une puce lorsqu'il y a un événement sur le jour concerné et au survol de la case, on voit sur la droite le nom de l'événement etc..
Je voudrais, à la place d'afficher une puce, colorer la case s'il y a un événement.
Par exemple :
Si aucune réservation le 01/01/2014 => Coloration normal (Donc blanche)
Si réservation le 02/01/2014 => On colorie la case du calendrier en rouge (pas une simple puce rouge, mais vraiment la case complète)
Si quelqu'un à une piste ou une solution à me proposer, je suis preneur :)
Merci d'avance !
7 réponses
Bonjour,
Si tu as bien C/C le code du tutoriel, normalement tu auras un <td> et juste en dessous deux div, un qui a la class relative et l'autre day
<td <?php if(isset($events$time])): ?> class="evenement" <?php endif; ?>>
<div class="relative">
<div class="day"><?php echo $d; ?></div>Là il vérifie si le timestamp de l'event a bien une valeur, si oui il lui attribue la class "evenement". (Je ne sais pas si c'est bien ça l'explication :p)
.evenement {background-color : red;}La prochaine fois poste ton code, car beaucoup n'ont pas le code source^^.
Problème résolu, j'ai juste ajouté deux lignes dans le CSS.
Je vais les mettre au cas où quelqu'un cherche à faire la même chose :
table td.evenement{ border:2px solid black; width:80px; height:80px; background: #FF1C11;}
table td.evenement .day{ color: white;}
table td.evenement .day:hover{ color: #8C8C8C;}Voici donc les 3 lignes à mettre dans le CSS pour effectuer la modification du design lorsqu'un événement est trouvé.
Et voici le code HTML correspondant :
<td<?php if(isset($events$time])): ?> class="evenement"<?php endif; ?>>
<div class="relative">
<div class="day"><?php echo $d; ?></div>Merci encore pour ton aide !
Oui bien sur !
Voilà le code concernant la partie jQuery du tuto :
jQuery(function($){
var date = new Date();
var current = date.getMonth()+1;
$('.month').hide();
$('#month'+current).show();
$('.months a#linkMonth'+current).addClass('active');
$('.months a').click(function(){
var month = $(this).attr('id').replace('linkMonth','');
if(month !== current){
$('#month'+current).slideUp();
$('#month'+month).slideDown();
$('.months a').removeClass('active');
$('.months a#linkMonth'+month).addClass('active');
current = month;
}
return false;
});
});Voici le code concernant la classe Date :
<?php
class Date{
var $days = array('Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche');
var $months = array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
function getEvents($year){
global $DB;
$req = $DB->query('SELECT id, dispo, statut,date FROM calendrier WHERE YEAR(date)='.$year.' AND dispo = 1');
$r = array();
while($d = $req->fetch(PDO::FETCH_OBJ)){
$r[strtotime($d->date)]$d->id] = $d->statut;
}
return $r;
}
function getAll($year){
$r = array();
$date = new DateTime($year.'-01-01');
while($date->format('Y') <= $year){
//Ce que je veux => $r[ANNEE][MOIS][JOUR] = JOUR DE LA SEMAINE
$y = $date->format('Y');
$m = $date->format('n');
$d = $date->format('j');
$w = str_replace('0', '7', $date->format('w'));
$r$y]$m]$d] = $w;
$date->add(new DateInterval('P1D'));
}
return $r;
}
}Voici le code CSS :
/*[fmt]0020-000A-3*/
body{ background:#EEEEEE; letter-spacing:1px; font-family:Helvetica; padding:10px;}
.year{ color:#D90000; font-size:85px;}
.relative{ position:relative;}
.months{}
.month{ margin-top:12px;}
.months ul{ list-style:none; margin:0px; padding:0px;}
.months ul li a{ float:left; margin:-1px; padding:0px 15px 0px 0px; color:#888888; text-decoration:none; font-size:35px; font-weight:bold; text-transform:uppercase;}
.months ul li a:hover, .months ul li a.active{ color:#D90000;}
table{ border-collapse:collapse;}
table td{ border:1px solid #A3A3A3; width:80px; height:80px;}
table td.today{ border:2px solid #2349DB; width:80px; height:80px;}
table td.padding{ border:none;}
table td:hover{ background:#DFDFDF; cursor:pointer;}
table th{ font-weight:normal; color:#A8A8A8;}
table td .day{ position:absolute; color:#8C8C8C; bottom:-40px; right:5px; font-weight:bold; font-size:24pt;}
table td .events{ position:relative; width:79px; height:0px; margin:-39px 0px 0px; padding:0px;}
table td .events li{ width:10px; height:10px; float:left; background:#2349DB; /*+border-radius:10px;*/ -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px 10px 10px 10px; margin-left:6px; overflow:hidden; text-indent:-3000px;}
table td:hover .events{ position:absolute; left:582px; top:66px; width:442px; list-style:none; margin:0px; padding:11px 0px 0px;}
table td:hover .events li{ height:40px; line-height:40px; font-weight:bold; border-bottom:1px solid #D6D6D6; padding-left:41px; text-indent:0; background:none; width:500px;}
table td:hover .events li:first-child{ border-top:1px solid #D6D6D6;}
table td .daytitle{ display:none;}
table td:hover .daytitle{ position:absolute; left:582px; top:21px; width:442px; list-style:none; margin:0px 0px 0px 16px; padding:0px; color:#D90000; font-size:30px; display:block; font-weight:bold;}
.clear{ clear:both;}Et enfin, voici le code concernant la partie "html" si je puis dire :
<?php
require('../includes/config2.php');
require('../includes/date2.php');
$date = new Date();
$year = date('Y');
$events = $date->getEvents($year);
$dates = $date->getAll($year);
?>
<div class="periods">
<!-- ######################### BLOC ANNÉE ############################ -->
<div class="year"><?php echo $year; ?></div>
<!-- ######################### FIN BLOC ANNÉE ######################## -->
<!-- ######################### BLOC MOIS ############################# -->
<div class="months">
<ul>
<?php foreach($date->months as $id=>$m): ?>
<li><a href="" id="linkMonth<?php echo $id+1; ?>"><?php echo utf8_encode(substr(utf8_decode($m),0,3)); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<!-- ######################### FIN BLOC MOIS ######################### -->
<div class="clear"></div>
<?php $dates = current($dates); ?>
<?php foreach ($dates as $m=>$days): ?>
<!-- ######################### BLOC TABLEAU ####################### -->
<div class="month relative" id="month<?php echo $m; ?>">
<table>
<thead>
<tr>
<?php foreach ($date->days as $d): ?>
<th><?php echo substr($d,0,3); ?></th>
<?php endforeach; ?>
</tr>
</thead>
<tbody>
<tr>
<?php $end = end($days); foreach($days as $d=>$w): ?>
<?php $time = strtotime("$year-$m-$d"); ?>
<?php if($d == 1 AND $w-1 > 0): ?>
<td colspan="<?php echo $w-1; ?>" class="padding"></td>
<?php endif; ?>
<td<?php if($time == strtotime(date('Y-m-d'))): ?> class="today" <?php endif; ?>>
<div class="relative">
<div class="day"><?php echo $d; ?></div>
</div>
<div class="daytitle">
<?php echo $date->days$w-1]; ?> <?php echo $d; ?> <?php echo $date->months$m-1]; ?>
</div>
<ul class="events">
<?php if(isset($events$time])): foreach($events$time] as $e): ?>
<li><?php echo $e; ?></li>
<?php endforeach; endif; ?>
</ul>
</td>
<?php if($w == 7): ?>
</tr><tr>
<?php endif; ?>
<?php endforeach; ?>
<?php if($end != 7): ?>
<td colspan="<?php echo 7-$end; ?>" class="padding"></td>
<?php endif; ?>
</tr>
</tbody>
</table>
</div>
<?php endforeach; ?>
</div>
<div class="clear"></div>Bonjour Pedon,
Merci pour ta réponse.
Si je ne me trompe pas de ligne,
En suivant le tuto, j'ai déjà ça :
<td<?php if($time == strtotime(date('Y-m-d'))): ?> class="today" <?php endif; ?>>Bien que le fait d'encadrer la date du jour n'est pas si importante en soi, est-il possible de combiner les deux conditions ?
Re-Bonjour,
Ta condition fonctionne bien, les cases où il y a un événements sont bien colorées, en revanche, un petit détail me chagrine.
Le background est bien appliqué mais la couleur du jour (29 par exemple) reste couleur grisatre.. c'est assez gênant :s
Bonjour,
Si tu parles bien sûr du chiffre de l'event, si tu veux changer sa couleur c'est
<div class="day"><?php echo $d; ?></div>à la ligne 50 a toi de mettre une condition pour lui attribuer une class que tu modifieras dans le CSS.