jQuery Full Calendar - How to prevent user from adding an event in non-business hours?

Question

jQuery Full Calendar - How to prevent user adding an event in non-business hours? Also the background color of the non-business hours should be grayed out or any custom color to be applied.

Example: My Business hours are: 9am - 1pm & 3pm to 7pm. [2 hour break should be there from 1pm - 3pm]

Code:

$('#calendar').fullCalendar({
theme: true,
header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
eventClick: updateEvent,
selectable: true,
selectHelper: true,
select: selectDate,
editable: true,
events: "JsonResponse.ashx",
eventDrop: eventDropped,
eventResize: eventResized,
eventRender: function(event, element) {
    //alert(event.title);
    element.qtip({
        content: {
            text: qTipText(event.start, event.end, event.description),
            title: '<strong>' + event.title + '</strong>'
        },
        position: {
            my: 'bottom left',
            at: 'top right'
        },
        style: { classes: 'qtip-shadow qtip-rounded' }
    });
}

Any help will be greatly appreciated.

Thanks in advance.

Answer 1

I know it is too late but i haven't see the correct answer so this could be helpful, It's very simple use selectConstraint and eventConstraint options to prevent click event in non business hours (from full calendar 2.2version). in my case i used selectConstraint: "businessHours" https://fullcalendar.io/docs/selection/selectConstraint/ https://fullcalendar.io/docs/event_ui/eventConstraint/