Создание календаря средствами PHP и CSS
27-08-2010Сейчас мы попробуем сделать простенький календарь для сайта или еще для чего нибудь, не знаю ). Календарь будет не совсем простым можно будет переключатся между месяцами, а текущий день будет выделен среди других дней также другим цветом(красным) будут выделены выходные, правда только воскресения субботы я чето не стал выделять, ну это не важно.
Так как календарь будет переключатся между месяцами мы должны это как то передавать например методом GET т.е. через url адрес. Также напишем для календаря простенькие CSS чтоб можно было смотреть)) так это календарь удобней всего оформить его в виде таблицы. Внешне календарь будет выглядеть примерно так:
На PHP мы создадим две переменные $calendar_head и $calendar_body соответственно в $calendar_head мы будем записывать html код верхней части календаря т.е. название месяца, дни недели и две ссылки по краям для выбора месяца. А в $calendar_body будем сохранять остальной код то есть таблицу дней недели. Ниже на скрине показано:
Теперь рассмотрим сам php код:
// проверяем передали ли нам месяц и год
if(isset($_GET["ym"])){
$year = (int)substr($_GET["ym"], 0, 4);
$month = (int)substr($_GET["ym"], 4, 2);
}
else{ // иначе выводить текущие месяц и год
$month = date("m", mktime(0,0,0,date('m'),1,date('Y')));
$year = date("Y", mktime(0,0,0,date('m'),1,date('Y')));
}
$skip = date("w", mktime(0,0,0,$month,1,$year)) - 1; // узнаем номер дня недели
if($skip < 0){
$skip = 6;
}
$daysInMonth = date("t", mktime(0,0,0,$month,1,$year)); // узнаем число дней в месяце
$calendar_head = ''; // обнуляем calendar head
$calendar_body = ''; // обнуляем calendar boday
$day = 1; // для цикла далее будем увеличивать значение
for($i = 0; $i < 6; $i++){ // Внешний цикл для недель 6 с неполыми
$calendar_body .= '<tr>'; // открываем тэг строки
for($j = 0; $j < 7; $j++){ // Внутренний цикл для дней недели
if(($skip > 0)or($day > $daysInMonth)){ // выводим пустые ячейки до 1 го дня ип после полного количства дней
$calendar_body .= '<td class="none"> </td>';
$skip--;
}
else{
if($j == 0) // если воскресенье то омечаем выходной
$calendar_body .= '<td class="holiday">'.$day.'</td>';
else{ // в противном случае просто выводим день в ячейке
if ((date(j)==$day)&&(date(m)==$month)&&(date(Y)==$year)){//проверяем на текущий день
$calendar_body .= '<td class="today">'.$day.'</td>';
}
else{
$calendar_body .= '<td class="day">'.$day.'</td>';
}
}
$day++; // увеличиваем $day
}
}
$calendar_body .= '</tr>'; // закрываем тэг строки
}
// заголовок календаря
$calendar_head = '
<tr>
<th colspan="2"><a href="?ym='.date("Ym", mktime(0,0,0,$month-1,1,$year)).'">« Пред</a></th>
<th colspan="3">'.date("F, Y", mktime(0,0,0,$month,1,$year)).'</th>
<th colspan="2"><a href="?ym='.date("Ym", mktime(0,0,0,$month+1,1,$year)).'">След »</a></th>
</tr>
<tr>
<th>Понедельник</th>
<th>Вторник</th>
<th>Среда</th>
<th>Четверг</th>
<th>Пятница</th>
<th>Суббота</th>
<th>Воскресенье</th>
</tr>';
Я думаю здесь уже нечего объяснять комментариев кажется достаточно, единственно я бы хотел пояснить почему 6 строк ведь недель в месяце всего четыре так вот, так как мы месяц начинаем выводить не с понедельника, то есть месяц не всегда начинается с понедельника, у нас появляются неполные недели и посчитав максимальное количество неполных и полных недель вы получите шесть недель вот поэтому и шесть). Но так как 6 недель встречаются не очень часто, то последняя строка в таблице чаще всего будет пустой.
Далее осталось написать HTML код и вывести в нужных местах $calendar_head и $calendar_body, ну и прописать CSS стили. Рассмотрим содержание тега <body>:
<!-- таблица для вывода календаря --> <table id="calendar" width="710" border="1" cellspacing="0" cellpadding="5"> <thead> <?php echo $calendar_head; ?> </thead> <tbody> <?php echo $calendar_body; ?> </tbody> </table> <!-- таблица для вывода календаря -->
Как видим календарь состоит полностью из таблицы заголовка и тела. Теперь наш календарь выглядит примерно аот так:
То есть осталось прописать CSS стили, ну примерно вот такие:
body{
margin:0 auto;
width:800px;
padding:10px;
}
#calendar{
border:0px;
}
#calendar tbody tr{
height:40px;
}
#calendar td{
width:80px;
border:0px;
border:solid 1px #99FF99;
font-size:22px;
text-align:center;
}
#calendar th{
background-color:#4DDBFF;
border:solid 1px #00CCFF;
color:#ffffff;
}
#calendar td.none{
border:0px;
}
#calendar td.holiday{
background-color:#FF6633;
border-color:#FF531A;
color:#94E4FF;
}
.day{
background-color:#CCFFCC;
color:#00B32D;
}
#calendar td.today{
background-color:#FFFF99;
border-color:#FF531A;
}
Ну вот и все теперь календарь выглядит примерно так:
Весь исходный код можете посмотреть здесь
