FullCalendar. Вікно додавання події

Від автора: у цьому уроці ми з вами продовжимо роботу з потужним плагіном для організації календаря подій — FullCalendar. У попередньому уроці ми реалізували висновок подій з БД в календар. Прийшов час зайнятися додаванням подій в БД. У цьому уроці ми додамо функціонал відкриття модального вікна з формою при кліці по будь-якої дати календаря. Також до полів дати форми ми додамо з’являється календарик, що дозволяє зручно вибрати потрібну дату.

Почнемо з підключення скрипта з комплекту jQuery UI. Зараз у нас підключені тільки стилі з цієї бібліотеки. Після підключення jQuery допишемо підключення jQuery UI:

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

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

І опишемо необхідну клієнтську логіку у файлі main.js. Підсумковий вид файлу буде таким:

$(function(){
$(‘#calendar’).fullCalendar({
dayClick: function(date, jsEvent, view) {
var clickDate = date.format();
$(‘#start’).val(clickDate);
$(‘#dialog’).dialog(‘open’);
},
// theme: true,
lang: ‘uk’,
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.

На цьому поточний урок завершено. Удачі і до нових зустрічей!