Как сделать дни кликибельными в fullcalendar?

Question

Как вы превращаете белое пространство в ячейки календаря в объект, который можно щелкнуть, который направляет вас на другую страницу с параметрами ячеек (например, Date)?

Я создаю приложение для бронирования, где я хочу, чтобы пользователь мог щелкнуть день, используя FullCalendar, чтобы открыть форму бронирования, которая затем содержит дату.

Я видел несколько сообщений об использовании всплывающего окна, но это не то, что я хочу.

Это мои текущие настройки конфигурации.

function setupCalendar() { 
    var calendar_config = { 
    firstDay: 1, // Monday 
    weekMode: "liquid", 
    events: bookingEvents, // this can be a JSON feed (extra HTTP request) 
    header: headerOptions, 
    selectable: true 
    }; 
    var jq_target_div = $('#calendar'); 
    jq_target_div.fullCalendar(calendar_config); 
} 

$(document).ready(setupCalendar); 

Answer 1

Вам нужно поймать dayClickcallback.

Затем вы получите параметр даты как момент. Из дока:

дата держит момент для щелкнули день. Если на весь день была нажата , момент будет неоднозначным. Если щелкнул слот в объектах повестки дняWeek или AgendaDay, дата будет иметь время слота .

Итак, вам просто нужно открыть новую форму - как угодно: в диалоге, в модальном, в новом div ... Это будет зависеть от вашего кода.

$('#calendar').fullCalendar({ 
    dayClick: function(date, jsEvent, view) { 
     openNewForm(date); 

    } 
}); 

Чтобы уточнить ваш код, я бы добавил в свой конфигуратор fullCalendar вызов вашего метода. Итак, на основе вашей конфигурации ...

var calendar_config = { 
    firstDay: 1, // Monday 
    weekMode: "liquid", 
    events: bookingEvents, // this can be a JSON feed (extra HTTP request) 
    header: headerOptions, 
    selectable: true, 
    dayClick: openNewForm //here is where you redirect the callback 
    }; 

function openNewForm(date, jsEvent, view){ 
    openNewForm(date); 
}