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 start and end times for each of the three days the event runs. I haven't been able to find anything in the docs about multiple start and end times per event, has anyone else?

Edit:

How I've got this working, in case anyone sees this and is after the same functionality, is by adding 'eventlength' and 'firstend', 'secondstart', 'secondend', 'thirdstart' as JSON values. This works for me as none of my events will be longer than three days. 'eventlength' is just a number (1, 2 or 3), and the rest are times/dates.

In fullCalendars eventClick section I have an if statement that cycles through the various possible event lengths and displays the appropriate values.

$startDf = 'ddd Do H:mma';
$endDf = 'H:mma';

if(calEvent.eventlength == 2){
  $this.find('#event__info .event-date').text((calEvent.start).format($startDf) + ' - ' + moment(calEvent.firstend).format($endDf) + '\n' + moment(calEvent.seccondstart).format($startDf) + ' - ' + (calEvent.end).format($endDf));} 
else if(calEvent.eventlength == 3){
  $this.find('#event__info .event-date').text((calEvent.start).format($startDf) + ' - ' + moment(calEvent.firstend).format($endDf) + '\n' + moment(calEvent.seccondstart).format($startDf) + ' - ' + moment(calEvent.seccondend).format($endDf) + '\n' + moment(calEvent.thirdstart).format($startDf) + ' - ' + (calEvent.end).format($endDf));} 
else {
  $this.find('#event__info .event-date').text((calEvent.start).format($startDf) + ' - ' + (calEvent.end).format($endDf));}

this displays a three day event as one event on the calander, but outputs the following, which I think makes more sense than having 3 seperate one day events, or an event that is continuously open from 10am on day one to 4pm of day three.

Sun 28th 10:00am - 22:00pm

Mon 29th 10:00am - 16:00pm

Tue 30th 10:00am - 16:00pm

The documents for fullCalendar don't sugest an option for this. I'm not sure what I'm supposed to have tried. — Chris Traverse, Dec 03 '14 at 13:44

Mario Levrero · Answer 1 · 2014-12-04T09:05:15.663

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'
          }
        ]
    }

I saw this in the documentation, I'm looking for a way to keep them as one event with multiple start & end time data related to them. I guess I could create a bunch of dummy data to pull later, so the event stretches across all three days with one start and end time, but has seperate fields for dayone, daytwo, daythree with the daily start and end times so when the event is clicked it shows all of that information. Just seems a ghetto way to go about it. — Chris Traverse, Dec 03 '14 at 16:35
I think that's a really different approach from the point of view of fullCalendar standard. But, of course, with -maybe a lot of- extra job you can do it. I've update the answer after your comment. — Mario Levrero, Dec 04 '14 at 09:06

fullCalendar multi-day event start and end times

1 Answers1

Linked