Amneziik59,
il y a 12 ans
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>