I'd like to be able to change the default duration of any newly created events.

I'm in dayView and if I simply click (not drag&drop) on the calendar, I get a half hour session.

I'd like to set it to one hour by default.

Maybe with this kind of code:

, select: function (startDate, endDate, allDay, jsEvent, view) {
    endDate = new Date(startDate);
    endDate.setHours(endDate.getHours() + 1);
}

This is effectively setting the good endDate but not visualy updated

Edit

I'm trying to make the behavior similar to Google Calendar: If the user clicks it will select a 1h event, but the user can still select half hours.

I'd like to be able to change the default duration of any newly created events.

I'm in dayView and if I simply click (not drag&drop) on the calendar, I get a half hour session.

I'd like to set it to one hour by default.

Maybe with this kind of code:

, select: function (startDate, endDate, allDay, jsEvent, view) {
    endDate = new Date(startDate);
    endDate.setHours(endDate.getHours() + 1);
}

This is effectively setting the good endDate but not visualy updated

Edit

I'm trying to make the behavior similar to Google Calendar: If the user clicks it will select a 1h event, but the user can still select half hours.

• javascript
• jquery
• fullcalendar

3 Answers 3

Based on one of the examples:

select: function(start, end, allDay) {
    var title = prompt('Event Title:');
    if (title) {
        end = new Date(start);
        end.setHours(end.getHours() + 1);

        calendar.fullCalendar('renderEvent',
        {
        title: title,
        start: start,
        end: end,
        allDay: allDay
        },
        true // make the event "stick"
        );
    }
    calendar.fullCalendar('unselect');
},

Before the question's update:

Something like this should work:

eventClick: function (calEvent, jsEvent, view) {
  calEvent.end = new Date(calEvent.start);
  calEvent.end.setHours(calEvent.start.getHours() + 1);
  $('#calendar').fullCalendar('updateEvent', calEvent);
},

The FullCalendar select callback allows you to reset the end value to whatever you want. The start and end parameters to the select function are moment.js dates. You just need to make sure it's not an all-day event by checking hasTime(), then you can use moment to add 30 minutes to the end time (to make it an hour long):

select: function(start, end) {
    if (end.hasTime()) {
        end.add(30, 'minutes');
    }
}

Here's temporary solution I've found:

In your fullcalendar.js file, find function called slotSelectionMousedown. Change dates = ... line(s) to this:

    if (cell == origCell && (t.name == "agendaWeek" || t.name == "agendaDay"))
        dates = [
            d1,
            addMinutes(cloneDate(d1), snapMinutes), // calculate minutes depending on selection slot minutes 
            d2,
            addMinutes(cloneDate(d2), snapMinutes + 30)
        ].sort(cmp);
    else
        dates = [
            d1,
            addMinutes(cloneDate(d1), snapMinutes), // calculate minutes depending on selection slot minutes 
            d2,
            addMinutes(cloneDate(d2), snapMinutes)
        ].sort(cmp);

Note that this is only temporary solution/hack, as it will be overridden with new Fullcalendar version. You might try to add those lines again, but there's possibility it won't work.