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

user_3783406 0
Viewed 3639

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.

fullcalendar asp.net jquery
5 Answers

Just add these options in calendar code

businessHours: {
  // days of week. an array of zero-based day of week integers (0=Sunday)
     daysOfWeek: [ 1, 2, 3, 4 ], // Monday - Thursday

     startTime: '10:00', // a start time (10am in this example)
     endTime: '18:00', // an end time (6pm in this example)
 },
 selectConstraint: "businessHours",

Hope this would help you.

user_138595640
Related