От автора: в этом уроке мы продолжим работу с плагином jQuery Event Calendar, который позволяет легко организовать на сайте календарь событий. В предыдущем уроке мы поработали со всевозможными настройками календаря и вывели на страницу рабочий календарь событий. Однако, все события в этом календаре статичны, т.е. информация о них берется непосредственно со страницы календаря или из внешнего файла. Это не всегда удобно, хотелось бы хранить события в базе данных и получать их оттуда. Так мы сделаем работу нашего календаря событий динамичной.
Прежде чем мы приступим, дам ссылку на предыдущий урок по работе с плагином jQuery Event Calendar, если вы его еще не видели.
Итак, прежде всего создадим базу данных, в которой будем хранить информацию о событиях. Дамп таблицы вы найдете в исходниках к уроку.
Поскольку мы будем работать с программным кодом, нам необходимо изменить расширение стартового файла с index.html на index.php. Теперь создадим файл config.php рядом с файлом index.php, в котором пропишем подключение к БД:
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс| 1 2 | @$db = mysqli_connect('localhost', 'root', '', 'test') or die('No connect to DB'); mysqli_set_charset($db, 'utf8') or die("Can't set sharset"); |
Далее создадим файл functions.php там же и подключим файлы config.php и functions.php в самом начале файла index.php:
| 1 2 3 4 5 | <?php require_once 'config.php'; require_once 'functions.php'; ?> <!DOCTYPE html> |
В файле functions.php создадим функцию, которая получит необходимые данные из БД:
| 1 2 3 4 5 6 | function get_events(){ global $db; $query = "SELECT * FROM events"; $res = mysqli_query($db, $query); return mysqli_fetch_all($res, MYSQLI_ASSOC); } |
В файле index.php вызовем функцию:
| 1 | $events = get_events(); |
Можем распечатать массив $events, чтобы убедиться, что данные получены. Напишем еще одну функцию, которая будет преобразовывать данные из полученного массива в формат JSON, необходимый для работы календаря:
| 1 | $events = get_json($events); |
И в настройках календаря укажем, что данные будут браться теперь не из внешнего файла, а из переменной. Соответственно, передадим данные из PHP в JS, присвоив переменной в JS значение переменной PHP:
| 1 2 3 | var data = <?php echo $events; ?>; $('#eventCalendar').eventCalendar({ jsonData: data, |
Не забудьте закомментировать или удалить параметр eventsjson, который позволяет брать данные из внешнего файла. Если мы нигде не ошиблись, то теперь данные событий для календаря будут браться из БД.
На этом текущий урок завершен. Удачи и до новых встреч!
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс
Разработка веб-приложения на PHP
Создайте веб-приложение на PHP на примере приема платежей на сайте
Получить
И где же обещанный третий урок ? )
Появится, когда на канале или здесь я увижу бОльший интерес. Пока что особого интереса я все же не заметил: пара комментов и несколько лайков…
Мне интересно(
Понимаю) Если будет интересно не только Вам, тогда обязательно продолжу эту серию уроков.
Спасибо вам Андрей. Это очень актуальная тема, поэтому всем интересно. Просто ленятся постить..
Остальные, как я например, видать тоже думали, что постить не обязательно, а просто ждали. Основные вопросы посыпятся в третьей части..
Поддерживаю интерес Виталия Ашаева!
Ок, продолжение обязательно будет
Думаю, в феврале записать пару уроков по данной теме.
Мне стыдно.. Забыл поздравить вас, с «Новым годом» и пожелать жизненного благополучия и новых успехов в вашей деятельности! Большое спасибо Вам, Андрей!
Пожалуйста
Вас также с наступившими Новогодними праздниками! Удачи и исполнения задуманного!
Хотелось бы 3 урок )
Спасибо за урок, ждем третьей части. Все что нет нигде всегда есть у Вас и подробно описано.
Интересно было бы все это увидеть на fullcalendar
Очень интересно было бы узнать, как этот календарь можно реализовать в MODx. Если никто не посоветует решение на MODx, то придется искать что-нибудь другое.
Xotelos bi uvidet 3iy urok. Jdu s neterpeniem. nadeyus uvidet v nem vibor mesaca i goda v vipadayuwem spiske.
Хороший полезный урок, жду часть 3
в архиве вирус уберите исходники посмотреть не могу
В архиве с исходниками вируса нет. Я только что проверил, как и сотни пользователей до меня, скачавшие данный архив. Проверил двумя антивирусами: Касперский и Avast.
В c скаченных исходниках в functions.php индекс ‘desription’ вместо ‘description‘ (строка 14)
Исправьте, пожалуйста
Исправил. Спасибо, Леонид.
Андрей, спасибо за пост. Очень пригодился, когда делал календарь событий с возможностью покупки билетов на сайт кафе. Ставил по вашему уроку, но брал исходники последней версии0.54 на странице плагина. В итоге возникло две проблемки
Первая: mysqli_fetch_all не работает на php5.2, но это решается легко созданием ассоциативного массива вручную.
Вторая: при увеличении масштаба в браузере ‘ctrl +’ сбиваются ячейки календаря от 110% и больше. Нет ли у кого решения этой проблемки? Спасибо.
Вот сам календарь —
Пожалуйста)
По поводу проблемы с масштабированием. Попробуйте для ячеек вместо ширины в процентах выставить фиксированное значение в пикселях:
.eventsCalendar-daysList.showAsWeek li{width: 65px;}На первый взгляд должно помочь, но нужно тестировать.
Андрей, спасибо! ))) помогло, но не ширину выставить, а высоту в eventCalendar_theme_responsive.css :
.eventsCalendar-daysList.showAsWeek li {height:29px;} вместо /*auto;*/
Может еще кому-то поможет. Всем добра
Можно и высоту, наверное. Хотя мне помогла ширина, насколько я помню
Пожалуйста)
Надо чтобы выборка бралась только за текущий месяц. иначе со временем var data будет весить много
То есть сначала надо отследить какой выбран в календаре месяц, год
и лишь потом сделать запрос в базу
а потом уже
var data = ;
Посему как отследить выбранный месяц ? до заполнения var data
И еще вопрос. как добавить вывод еще одного поля с базы
Здравствуйте!
Подскажите пожалуйста как добавить свое поле.
Отличный урок! Буду ждать продолжения!!!!!!)
Спасибо классный урок) Очень жду 3 — го урока.
Сделал еще форму добавления события теперь вообще крутой календарь получился)))
Но тут назрел вопросец возможно ли добавлять событие ко всем субботам в месяце?
Если возможно подскажите пожалуйста как?
Добрый день. Подскажите как сменить цвет заливки чисел?
Здравствуйте. Используйте CSS. Ниже файла стилей календаря подключите свой файл стилей и переопределяйте в нем нужные правила CSS. Например, так можно изменить заливку события на красный цвет:
.eventCalendar-daysList li.eventCalendar-dayWithEvents a{
background-color: red;
}