FullCalendar prevent event dropped outside of business hours

Question

I'm using the FullCalendar plugin and trying to make it so you can't drop a new event when its being dragged into something that is outside of the business hours. I have it so you can't drag into any date before the current date, but can't figure out how prevent say the weekend to be dragged to.

I don't want a hard coded solution where I have to do an if than statement specifically for the weekend because what if I want to add business hours say Wednesday on a specific week and only allow between 1pm and 4pm ? So I need a dynamic solution I could pass down some JSON like the events: handles and the businessHours can handle as well.

$(document).ready(function() {
    /* initialize the external events
    -----------------------------------------------------------------*/
    $('#external-events .fc-event').each(function() {
        // store data so the calendar knows to render an event upon drop
        $(this).data('event', {
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true // maintain when user navigates (see docs on the renderEvent method)
        });
        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });
    });
    /* initialize the calendar
    -----------------------------------------------------------------*/
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar
        drop: function() {
            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }
        },
        /* This constrains it to today or later */
        eventConstraint: {
            start: moment().format('YYYY-MM-DD'),
            end: '2100-01-01' // hard coded must have
        },
        businessHours: {
            start: moment().format('HH:mm'), /* Current Hour/Minute 24H format */
            end: '17:00' // 5pm
        }
    });
});

here is a fiddle of my current example http://jsfiddle.net/htexjtg6/

Answer 1

one problem you are having is because the initialized events doesn't have a duration - so fullcalendar doesn't know if the events overlap constraints and businessHours when dropped. Simply setting start/end can solve that.

$(this).data('event', {
    title: $.trim($(this).text()), // use the element's text as the event title
    stick: true, // maintain when user navigates (see docs on the renderEvent method)
    start: moment(),
    end: moment(),
});

bonus: in the fullcalendar initializer set defaultTimedEventDuration:'01:00:00', (default duration of events is 2 hours)- set this value according to the domain the application applies to.

About having different times on different days; BusinessHours can be an array - (which could come from a function returning jsonarray (since jsonArrays are fully qualified js). see https://fullcalendar.io/docs/display/businessHours/

businessHours: [ 
    {
        dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
        start: '08:00', // 8am
        end: '18:00' // 6pm
    },
    {
        dow: [ 4, 5 ], // Thursday, Friday
        start: '10:00', // 10am
        end: '16:00' // 4pm
    }
],
eventConstraint:"businessHours",

see this fiddle http://jsfiddle.net/htexjtg6/11/ for a fork of your code (with working businessHours)