fullCalendar multi-day event start and end times

问题

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

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

来源：https://stackoverflow.com/questions/27273096/fullcalendar-multi-day-event-start-and-end-times

标签

jquery

fullcalendar