fullCalendar multi-day event start and end times

Question

Multiple day events rarely have one start and one end time. For example, Birmingham Comic Con may last for 3 days, but you can\'t turn up at 1 in the morning! It has separate

Answer 1

If the same "event" has multiples start/end times, fullCalendar treats them as separate events. If you have an event with multiple days, just create different events and assign them the same Id.

Event.id documentation:

String/Integer. Optional

Uniquely identifies the given event. Different instances of repeating events should all have the same id.

Your list of events could be something like:

var myEvents =  {
        title: "Birmingham Comic Con",
        start: new Date('2014-11-20T09:00'),
        end: new Date('2014-11-20T19:00'),
        id: 1
    }, {
        title: "Birmingham Comic Con",
        start: new Date('2014-11-21T09:00'),
        end: new Date('2014-11-21T19:00'),
        id: 1
    },
    {
        title: "Birmingham Comic Con",
        start: new Date('2014-11-22T09:00'),
        end: new Date('2014-11-22T19:00'),
        id: 1
    }

So, if you have to update later your multiple day event, just refer the event by Id.

You can check this plunker.

Update after your comment: If you really want to maintain the event as just one event with multiple days with only one Event, you could add your own properties to the event object, but later you should do extra job. For eaxmple:

• Customize classes to display different when the Comic Con has its doors close.
• Handle event callbacks to change methods when the event is click during open or close time.
• ...

Anyway, your event could be like this:

    var myEvent = {
        title: "Birmingham Comic Con",
        start: new Date('2014-11-20T09:00'),
        end: new Date('2014-11-22T19:00'),
        id: 1, 
        isMultipleDay: true, 
        multipleDayEvents: [
          {start: new Date('2014-11-20T09:00'), 
            end: new Date('2014-11-20T19:00'), 
            description: 'Day 1'
          }, 
          {
            start: new Date('2014-11-21T09:00'),
            end: new Date('2014-11-21T19:00'),
            description: 'Day 2'
          }, 
          {
            start: new Date('2014-11-22T09:00'),
            end: new Date('2014-11-22T19:00'),
            description: 'Day 3'
          }
        ]
    }