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...
Do you like below Tutorials ?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?
- Angular 9 Image Upload with Crop Example
- Files Upload on Button Click in PHP Dropzone Example
- PHP Dropzone Allow only One File to Upload Example
- PHP Dropzone Allow only Images to Upload Example
- PHP Dropzone Delete Uploaded File Example
- Livewire CRUD Laravel 7 Example