Как инициировать JQuery FullCalendar с определенным временным интервалом в представлении повестки дня?

Question

Хотелось бы узнать, можно ли начать полнотекстовые интервалы FullCalendar в другое время 00:00? У меня есть приложение, в котором пользователь может выбрать длительность слота FullCalendar (15 минут, 30 минут или то, что пользователь хочет). Пользователь может также определить диапазон времени, доступный для выполнения некоторых обязательств. Проблема заключается в том, что игровые площадки agendada начинаются в 00:00. Предположим, что пользователь зарегистрирует диапазон доступных времени для обязательств, который начинается в 10:00 часов. В зависимости от продолжительности слотов, которые пользователь выбирает для 10:00 часов, может не отображаться. Существует способ инициировать слоты FullCalendar в 10:00 или в другое время, согласно моим потребностям?

Answer 1

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

//This is (a mockup of) the creation of the calendar 
var conf = { slotMinutes: 30 }; 
$('#calendar').fullCalendar(conf); 

//When you need to dynamically change one or more options 
$('#calendar').fullCalendar('destroy') 
conf.scrollTime = '10:00:00'; 
$('#calendar').fullCalendar(conf); 

Answer 2

Вы можете сделать это, используя календарь как функцию.

function renderCalendar(min, max, slot) { 

    $('#calendar').fullCalendar('destroy'); // this is used to refresh (destroy and recreate) 
    var mintime = (min == "") ? '00:00:00' : min; // set user selected time else default time 
    var maxtime = (max === "") ? '24:00:00' : max; // set user selected time else default time 
    var slotToDisplay = (slot === undefined) ? '00:10:00' : slot;  // if slot is undefined then use default slot timing   

      $('#calendar').fullCalendar({ 

       header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,basicWeek,basicDay' 
       }, 
       windowResize: true, 
       allDaySlot: true, 
       slotDuration: slotToDisplay, 
       minTime: mintime, 
       maxTime: maxtime, 
       buttonIcons: false, 
       editable: true, 
       ... 
      }); 
} 

Затем, когда пользователь выбирает временной интервал. вы передаете его в календарь таким образом.

renderCalendar(10:30:00, 18:30:00, 00:10:00); // you can pass time based on user selects the time.