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">

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
<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.

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

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

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

Научиться

Метки:

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

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

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

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

  1. Tablee

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

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

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

  2. Алексей

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

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

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

  3. Fira

    Здравствуйте Андрей!
    Подскажите, когда выйдет следующий урок.

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

      Здравствуйте.
      Эта серия закончена, уроков больше не планируется.

  4. Фира

    Здравствуйте Андрей! Извините что обращаюсь опять к этой теме но я хочу закончит работу с этим скриптом.
    Вы не могли подсказать как добавить дату начало события и конец события в БД после выбора.
    Спасибо!

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

      Здравствуйте.
      Взять значения указанных полей и отправить их аяксом на сервер, где и добавить sql-запросом в БД. В целом, так. В коде, как Вы понимаете, в рамках комментария все это показать не получится, нужен полноценный урок.

  5. Fira

    Здравствуйте!
    Как реализовать индивидуальный доступ к календарю для каждого пользователя?

  6. Mari

    Андрей, здравствуйте.

    Может уже сталкивались с такой проблемой. При клике на ячейку календаря в Ваших исходниках все работает отлично, переношу один в один в собственный проект — модальное окно не появляется, браузер пишет… Uncaught TypeError: $(…).dialog is not a function
    at m.fn.init.dayClick…

    Если сделать autoOpen: true, то можно отследить, что строки var clickDate = date.format(); и $(‘#start’).val(clickDate); исполняются отлично. А вот открытие окна не происходит.

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

      Здравствуйте, Марина.
      Скорее всего, не подключилась библиотека jquery-ui.min.js, поскольку данный метод принадлежит ей. Поэтому проверьте этот момент.

      • Mari

        Спасибо.
        Меняла варианты подключения, тот же результат. Да и все остальные опции плагина работают как надо. Сайт представляет собой платформу, подключений много и возможно, что-то конфликтует именно с этим методом библиотеки jquery-ui.min.js.

  7. Fira

    Здравствуйте!
    Как реализовать индивидуальный доступ к календарю для каждого пользователя?
    Спасибо

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

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