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

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

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

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

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

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

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

@$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:

<?php
require_once 'config.php';
require_once 'functions.php';
?>
<!DOCTYPE html>

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

function get_events(){
	global $db;
	$query = "SELECT * FROM events";
	$res = mysqli_query($db, $query);
	return mysqli_fetch_all($res, MYSQLI_ASSOC);
}

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

$events = get_events();

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

$events = get_json($events);

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

var data = <?php echo $events; ?>;
$('#eventCalendar').eventCalendar({
	jsonData: data,

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

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

Создание зависимых списков средствами AJAX

Прямо сейчас посмотрите курс по созданию зависимых списков средствами AJAX!

Смотреть курс

Метки: ,

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

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

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

  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;}
      На первый взгляд должно помочь, но нужно тестировать.

      • Иван

        Андрей, спасибо! ))) помогло, но не ширину выставить, а высоту в eventCalendar_theme_responsive.css :
        .eventsCalendar-daysList.showAsWeek li {height:29px;} вместо /*auto;*/
        Может еще кому-то поможет. Всем добра ;)

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

          Можно и высоту, наверное. Хотя мне помогла ширина, насколько я помню :)
          Пожалуйста)

  13. Николай

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

  14. Николай

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree