FullCalendar. Окно добавления события

FullCalendar. Получение данных из базы данных

От автора: в этом уроке мы с вами продолжим работу с мощным плагином для организации календаря событий — FullCalendar. В предыдущем уроке мы реализовали вывод событий из БД в календарь. Пришло время заняться добавлением событий в БД. В этом уроке мы добавим функционал открытия модального окна с формой при клике по любой дате календаря. Также к полям даты формы мы добавим появляющийся календарик, позволяющий удобно выбрать нужную дату.

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

Начнем с подключения скрипта из комплекта jQuery UI. Сейчас у нас подключены только стили из этой библиотеки. После подключения jQuery допишем подключения jQuery UI:

<script src="js/jquery-ui.min.js"></script>

Также я подключу Bootstrap, чтобы меньше писать стилей и элементы страницы выглядели при этом красиво.

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

Создадим в индексном файле необходимую нам разметку для добавления события.

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
<div id="dialog">
  <form>
 <div class="form-group">
 <label for="title">Название события</label>
 <input type="text" class="form-control" id="title" placeholder="Название события">
 </div>
 <div class="form-group">
 <label for="start">Начало события</label>
 <input type="text" class="form-control datepicker" id="start" placeholder="Начало события">
 </div>
 <div class="form-group">
 <label for="end">Конец события</label>
 <input type="text" class="form-control datepicker" id="end" placeholder="Конец события">
 </div>
 <button type="submit" class="btn btn-success">Добавить событие</button>
  </form>
 </div>

И опишем необходимую клиентскую логику в файле main.js. Итоговый вид файла будет таким:

$(function(){

 $('#calendar').fullCalendar({
  dayClick: function(date, jsEvent, view) {
 var clickDate = date.format();
 $('#start').val(clickDate);
 $('#dialog').dialog('open');
 },
  // theme: true,
  lang: 'ru',
  eventSources : [
 {
 events : events,
 color : '#0EB6A2',
 textColor : '#fff'
 }
  ]
 });

 $('#dialog').dialog({
  autoOpen: false,
  show: {
 effect: 'drop',
 duration: 500
  },
  hide: {
 effect: 'clip',
 duration: 500
  }
 });

 $('.datepicker').datepicker({
  dateFormat: "yy-mm-dd"
 });

});

Если мы нигде не ошиблись, то теперь при клике по любому числу календаря событий должна появляться форма в модальном окне. При этом к полям дат формы прикручены календарики — datepicker.

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

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

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

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

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

  1. Tablee

    Подскажите, есть ли возможность изменить формат отображения таблицы «Неделя», если да, то куда наложить руки? :) Спасибо!

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

      Для того, чтобы попытаться что-то ответить, нужно понимать, что именно Вы хотите поменять :) В любом случае, поменять структуру без лазания в код плагина вряд ли получится.

  2. Алексей

    Здравствуйте Андрей!
    Подскажите, когда выйдет следующий урок по этой теме. Добавление данных календаря в базу данных. Есть один не понятный момент: как выровнять даты?

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

      Здравствуйте, Алексей.
      Запись уроков по теме прекратил, поскольку особого отклика от аудитории не получил. Поскольку тема в основной массе не заинтересовала — смысл ее продолжать? По поводу выравнивания дат, то это можно сделать через CSS. Можете задать вопрос на нашем форуме, описать конкретнее проблему, посмотрим, что можно сделать.

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

Ваш 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