CODEWITHSUNDEEP
javascriptjqueryfullcalendar
mHouses
mHouses

Reputation: 925

How to limit fullcalendar events to only one day?

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.

Upvotes: 3

Views: 3800

Answers (3)

Saeed
Saeed

Reputation: 118

Easily add this snippet to calander arguments:

eventOverlap: function(stillEvent, movingEvent) {
     return false;
}

Upvotes: 0

Mario Levrero
Mario Levrero

Reputation: 3367

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();
        }
    }
});

Upvotes: 5

Balvinder Singh Saini
Balvinder Singh Saini

Reputation: 1

$('#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
    }
]

});

Upvotes: -2

Related Questions