Создание календаря средствами PHP и CSS

Приветствую, Вас дорогие друзья, на страницах моего блога!

Как и обещал в прошлой статье — мы попробуем сделать простенький календарь для сайта или еще для чего нибудь, не знаю ). Календарь будет не совсем простым можно будет переключатся между месяцами, а текущий день будет выделен среди других дней также другим цветом(красным) будут выделены выходные, правда только воскресения субботы я чето не стал выделять, ну это не важно.
Так как календарь будет переключатся между месяцами мы должны это как то передавать например методом GET т.е. через url адрес. Также напишем для календаря простенькие CSS чтоб можно было смотреть)) так это календарь удобней всего оформить его в виде таблицы. Внешне календарь будет выглядеть примерно так:

witht-css

На PHP мы создадим две переменные $calendar_head и $calendar_body соответственно в $calendar_head мы будем записывать html код верхней части календаря т.е. название месяца, дни недели и две ссылки по краям для выбора месяца. А в $calendar_body будем сохранять остальной код то есть таблицу дней недели. Ниже на скрине показано:

witht-css-metki

Теперь рассмотрим сам php код:

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится - тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
// проверяем передали ли нам месяц и год
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>
  
    <th>Понедельник</th>
    <th>Вторник</th>
    <th>Среда</th>
    <th>Четверг</th>
    <th>Пятница</th>
    <th>Суббота</th>
    <th>Воскресенье</th>
  </tr>'; 

Я думаю здесь уже нечего объяснять комментариев кажется достаточно, единственно я бы хотел пояснить почему 6 строк ведь недель в месяце всего четыре так вот, так как мы месяц начинаем выводить не с понедельника, то есть месяц не всегда начинается с понедельника, у нас появляются неполные недели и посчитав максимальное количество неполных и полных недель вы получите шесть недель вот поэтому и шесть). Но так как 6 недель встречаются не очень часто, то последняя строка в таблице чаще всего будет пустой.

Далее осталось написать HTML код и вывести в нужных местах $calendar_head и $calendar_body, ну и прописать CSS стили. Рассмотрим содержание тега:

<!-- таблица для вывода календаря -->
<table id="calendar" width="710" border="1" cellspacing="0" cellpadding="5">
        <thead>
                <?php echo $calendar_head; ?>
        </thead>
        <tbody>
                <?php echo $calendar_body; ?>
        </tbody>
</table>
<!-- таблица для вывода календаря -->

Как видим календарь состоит полностью из таблицы заголовка и тела. Теперь наш календарь выглядит примерно вот так:

without-css

То есть осталось прописать 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;
}

Ну вот и все теперь календарь выглядит примерно так:

witht-css

Весь исходный код можете посмотреть здесь

На этом думаю будем прощаться! Не забудьте подписаться на новости блога, а если возникли вопросы — задавайте в комментариях, постараюсь ответить оперативно!

С Вами был ваш Юрич!


Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.
One Comment к статье "Создание календаря средствами PHP и CSS"
  1. Борис: 07.08.2016 в 16:37

    Классный блог. Добавлю в закладки чтобы не потерять.

Заказать сайт