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

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

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

witht-css

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

witht-css-metki

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

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

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

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

Вам понравилась статья?
плохохорошо (Пока оценок нет)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!
One Comment к статье "Создание календаря средствами PHP и CSS"
  1. Борис: 07.08.2016 в 16:37 - Ответить

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