fullcalendar change slot duration and selected time duration

February 12, 2019 | Category : JQuery Plugin JQuery

If you guys need to change slot duration like 15min, 30min, 45 mitutes or 1 hour on axis times of your full calender than we can do it using slotDuration, slotLabelInterval and slotMinutes. also you need to make selected times slot should 30min or 15min by mouse click then we can do it using snapDuration in fullcalender jquery plugin.

Actually, right now i was working on my laravel 5.7 app and i already used jquery fullcalendar plugin for appointment booking system. it was working fine with default configuration of time slot like 30 minutes gap.

But i require to change that in 15min gap of time slot duration and when user select time then it should select 30min so i found the solution using snapDuration, slotDuration, slotLabelInterval and slotMinutes options of configuration file.

slotDuration: '00:15:00',

slotLabelInterval: 15,

slotMinutes: 15,

snapDuration: '00:30:00',

So, let's use bellow code for that if you need:

Example:

$('#calendar').fullCalendar({

header : {

left : 'prev,next today',

center: 'title',

right : 'month,agendaWeek,agendaDay'

},

buttonText: {

today: 'today',

month: 'month',

week : 'week',

day : 'day'

},

minTime: start_time,

maxTime: end_time,

slotDuration: '00:15:00',

slotLabelInterval: 15,

slotMinutes: 15,

snapDuration: '00:30:00',

events : appointments,

editable : true,

eventDurationEditable: false,

droppable : true, // this allows things to be dropped onto the calendar !!!

eventDrop : function (date, jsEvent, revertFunc, resourceId) {

// Write Code Here

},

selectable: true,

selectHelper: true,

select: function( start, end, jsEvent, view ){

// Write Code Here

},

eventClick: function(calEvent, jsEvent, view) {

// Write Code Here

}

});

I hope it will help you...