Календар є невід'ємною частиною дизайну багатьох сайтах. Часто він є один з численних плагінів JQuery для календаря. Але він також може бути реалізований за допомогою PHP.
Сьогодні я покажу вам, як створити помісячний календар з можливістю прокрутки (стрілками вправо і вліво) місяців з використанням технології AJAX.
Крім використання AJAX, цей календар має ще одну важливу перевагу - він може застосовуватися для мобільних сайтів, так як має адаптивну основу.
Перш ніж ми перейдемо до розгляду коду, я рекомендую вам подивитися нашу демо-версію, щоб ви мали уявлення про те, що ми збираємося зробити.
структура папок
Для початку давайте чітко визначимося зі структурою папок для всіх файлів, які ми будемо створювати:
- CSS - для всіх файлів CSS;
- зображення - для всіх можливих зображень;
- шаблони - для всіх файлів шаблонів.
Крок 1. HTML
Я не збираюся використовувати будь-яку конкретну системи шаблонів (наприклад, Smarty), я буду використовувати тільки прості шаблони HTML з власними ключами.
Це дуже простий шаблон для нашої індексного сторінки, в ньому ми задали базовий контейнер календаря.
Другий шаблон буде використовуватися в якості внутрішнього контейнера:
Шаблони / calendar.html:
Використовуємо ми його тому, що при Ajax-запитах зовсім не обов'язково виводити все значення, досить тільки внутрішнього вмісту календаря.
Крок 2. PHP
Потім генеруємо рядки календаря (в днях), і, нарешті, після цього замінюємо ключі шаблону на власні значення.
Крок 3. CSS
На даний момент, наш календар не виглядає презентабельно, тому що це всього лише голий HTML-код. Давайте прикрасимо його.
CSS / styles.css
Крок 4. Зображення
У стилях нашого календаря використовується тільки одне невелике зображення: nav.png
висновок
Ось і все на сьогодні, ми тільки що створили стильний адаптивний календар.
Переклад статті «PHP AJAX Calendar» був підготовлений дружною командою проекту Сайтобудування від А до Я.