jQuery Event Calendar — Календарь событий. Урок 2

jQuery Event Calendar - Календарь событий

От автора: в этом уроке мы продолжим работу с плагином jQuery Event Calendar, который позволяет легко организовать на сайте календарь событий. В предыдущем уроке мы поработали со всевозможными настройками календаря и вывели на страницу рабочий календарь событий. Однако, все события в этом календаре статичны, т.е. информация о них берется непосредственно со страницы календаря или из внешнего файла. Это не всегда удобно, хотелось бы хранить события в базе данных и получать их оттуда. Так мы сделаем работу нашего календаря событий динамичной.

скачать исходникискачать урок

Прежде чем мы приступим, дам ссылку на предыдущий урок по работе с плагином jQuery Event Calendar, если вы его еще не видели.

Итак, прежде всего создадим базу данных, в которой будем хранить информацию о событиях. Дамп таблицы вы найдете в исходниках к уроку.

Поскольку мы будем работать с программным кодом, нам необходимо изменить расширение стартового файла с index.html на index.php. Теперь создадим файл config.php рядом с файлом index.php, в котором пропишем подключение к БД:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Далее создадим файл functions.php там же и подключим файлы config.php и functions.php в самом начале файла index.php:

В файле functions.php создадим функцию, которая получит необходимые данные из БД:

В файле index.php вызовем функцию:

Можем распечатать массив $events, чтобы убедиться, что данные получены. Напишем еще одну функцию, которая будет преобразовывать данные из полученного массива в формат JSON, необходимый для работы календаря:

И в настройках календаря укажем, что данные будут браться теперь не из внешнего файла, а из переменной. Соответственно, передадим данные из PHP в JS, присвоив переменной в JS значение переменной PHP:

Не забудьте закомментировать или удалить параметр eventsjson, который позволяет брать данные из внешнего файла. Если мы нигде не ошиблись, то теперь данные событий для календаря будут браться из БД.

На этом текущий урок завершен. Удачи и до новых встреч!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Смотреть

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (30)

  1. Сергей

    И где же обещанный третий урок ? )

    • Андрей Кудлай

      Появится, когда на канале или здесь я увижу бОльший интерес. Пока что особого интереса я все же не заметил: пара комментов и несколько лайков…

  2. Сергей

    Мне интересно(

  3. Интересно

    Спасибо вам Андрей. Это очень актуальная тема, поэтому всем интересно. Просто ленятся постить..
    Остальные, как я например, видать тоже думали, что постить не обязательно, а просто ждали. Основные вопросы посыпятся в третьей части..
    Поддерживаю интерес Виталия Ашаева!

  4. Snookerman@inbox.ru

    Хотелось бы 3 урок )

  5. Михаил

    Спасибо за урок, ждем третьей части. Все что нет нигде всегда есть у Вас и подробно описано.

  6. [email protected]

    Интересно было бы все это увидеть на fullcalendar

  7. Сергей

    Очень интересно было бы узнать, как этот календарь можно реализовать в MODx. Если никто не посоветует решение на MODx, то придется искать что-нибудь другое.

  8. Jabbar

    Xotelos bi uvidet 3iy urok. Jdu s neterpeniem. nadeyus uvidet v nem vibor mesaca i goda v vipadayuwem spiske.

  9. Станислас

    Хороший полезный урок, жду часть 3

  10. Максим

    в архиве вирус уберите исходники посмотреть не могу

    • Андрей Кудлай

      В архиве с исходниками вируса нет. Я только что проверил, как и сотни пользователей до меня, скачавшие данный архив. Проверил двумя антивирусами: Касперский и Avast.

  11. Леонид

    В c скаченных исходниках в functions.php индекс ‘desription’ вместо ‘description‘ (строка 14)
    Исправьте, пожалуйста

  12. Иван

    Андрей, спасибо за пост. Очень пригодился, когда делал календарь событий с возможностью покупки билетов на сайт кафе. Ставил по вашему уроку, но брал исходники последней версии0.54 на странице плагина. В итоге возникло две проблемки :)

    Первая: mysqli_fetch_all не работает на php5.2, но это решается легко созданием ассоциативного массива вручную.

    Вторая: при увеличении масштаба в браузере ‘ctrl +’ сбиваются ячейки календаря от 110% и больше. Нет ли у кого решения этой проблемки? Спасибо.
    Вот сам календарь — https://respublica-omsk.ru/buy_tic/

    • Андрей Кудлай

      Пожалуйста)
      По поводу проблемы с масштабированием. Попробуйте для ячеек вместо ширины в процентах выставить фиксированное значение в пикселях:
      .eventsCalendar-daysList.showAsWeek li{width: 65px;}
      На первый взгляд должно помочь, но нужно тестировать.

  13. Николай

    Надо чтобы выборка бралась только за текущий месяц. иначе со временем var data будет весить много :)
    То есть сначала надо отследить какой выбран в календаре месяц, год
    и лишь потом сделать запрос в базу
    а потом уже
    var data = ;
    Посему как отследить выбранный месяц ? до заполнения var data

  14. Николай

    И еще вопрос. как добавить вывод еще одного поля с базы

  15. Алексей

    Здравствуйте!
    Подскажите пожалуйста как добавить свое поле.

  16. Andrey

    Отличный урок! Буду ждать продолжения!!!!!!)

  17. Денис

    Спасибо классный урок) Очень жду 3 — го урока.
    Сделал еще форму добавления события теперь вообще крутой календарь получился)))
    Но тут назрел вопросец возможно ли добавлять событие ко всем субботам в месяце?
    Если возможно подскажите пожалуйста как?

  18. Сергей

    Добрый день. Подскажите как сменить цвет заливки чисел?

    • Андрей

      Здравствуйте. Используйте CSS. Ниже файла стилей календаря подключите свой файл стилей и переопределяйте в нем нужные правила CSS. Например, так можно изменить заливку события на красный цвет:

      .eventCalendar-daysList li.eventCalendar-dayWithEvents a{
      background-color: red;
      }

  19. Алексей

    Здравствуйте!
    Подскажите, пожалуйста, можно ли использовать jQuery Event Calendar для отображения событий разными цветами из 2-ух или более таблиц одной базы данных (в одной из таблиц нет времени события(дата рождения)).
    Жду с нетерпением ответ на мой вопрос и 3-ий урок как и Ваши ученики выше)))
    Спасибо)

Добавить комментарий