How to limit fullcalendar events to only one day?

Question

Is it possible to limit FullCalendar so when creating an event dragging, the event doesn't go across other days?

I mean: If I start selecting on March 20, at 09:00, I want that the user can't choose the event to finish on March 21, at 13:00.

Answer 1

You can add a eventConstraint to your calendar settings.

eventConstraint:{
          start: '00:00', // a start time (start of the day in this example)
          end: '24:00', // an end time (end of the day in this example)
        }, 

You can reproduce it in this plunker .

If you want to constraint it only during dragging I think you only can do it using eventDrop callback . There you can use revertFunc to revert the drag&drop movement to the previous state, if moment.startOf('day) are different.

Something like:

$('#calendar').fullCalendar({
    events: [
        // events here
    ],
    editable: true,
    eventDrop: function(event, delta, revertFunc) {

        if (!event.start.startOf('day').isSame(event.end.startOf('day'))) {
             revertFunc();
        }
    }
});

Answer 2

$('#calendar').fullCalendar({
events: [
    {
        title  : 'event1',
        start  : '2010-01-01'
    },
    {
        title  : 'event2',
        start  : '2010-01-09T09:30:00',
        end    : '2010-01-09T15:30:00',
    },
    {
        title  : 'event3',
        start  : '2010-01-09T12:30:00',
        allDay : false // will make the time show
    }
]

});