jQuery FullCalendar- Default end time for dropped events

Question

I am using FullCalendar with the ability to drop external events onto the calendar: http://arshaw.com/js/fullcalendar-1.5.2/demos/external-dragging.html

When a new event is dropped, it has a start time but no end time. It seems that all these events are "all day" events by default. I tried changing the allDay callback to false: http://arshaw.com/fullcalendar/docs/dropping/drop/

...but it hasn't helped. I'm trying to get it to where when a new event is dropped onto the calendar, it's end time is set for 30 minutes after the drop time (ie. the setting of my defaultEventMinutes) http://arshaw.com/fullcalendar/docs/agenda/defaultEventMinutes/

Anyone know how to do this?

Here is my current fullcalendar function:

$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,agendaDay'
        },

        events: {
            url: 'json-events.php',
            type: 'POST',
            data: {

            },
            error: function() {
                alert('there was an error while fetching events!');
            },

        },

        allDaySlot: false,
        defaultView: 'agendaWeek',
        slotMinutes: 15,
        firstDay: '<?php echo $config->week_start; ?>',
        minTime: '<?php echo $config->day_start; ?>',
        maxTime: '<?php echo $config->day_end; ?>',
        defaultEventMinutes: 30, 
        aspectRatio: 1.1, 

        titleFormat: {
            month: 'MMMM yyyy',  
            week: "MMMM dd[ yyyy]{ '&#8212;'[ MMMM] dd, yyyy}", 
            day: 'dddd MMM dd, yyyy'    
        },

        columnFormat: {
            month: 'ddd',    // Mon
            week: 'ddd M/dd', // Mon 9/07
            day: 'dddd M/dd'  // Monday 9/07
        },

        editable: true,
        droppable: true, 
            drop: function(date, allDay) { 

            var originalEventObject = $(this).data('eventObject');
            var copiedEventObject = $.extend({}, originalEventObject);

            copiedEventObject.start = date;
            //copiedEventObject.allDay = allDay; // Can I make this 30min by default drop?
            copiedEventObject.end   = (date.getTime() + 1800000)/1000;
            copiedEventObject.group_id = $(this).attr("name"); // Group ID

            addEvent(copiedEventObject); // Add the event to the db

            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            if ($('#drop-remove').is(':checked')) {
                $(this).remove();
            }               

        }
});

Answer 1

You can set the end time of the dropped event in the drop function. One thing to note is that for Full Calendar, time will be measured in seconds.

var arrayOfEvents = [];

$('#calendar').fullCalendar({
    ...
    drop: function(date) {
        ...
        // retrieve the dropped element's stored Event Object
        var originalEventObject = $(this).data('eventObject');

        // we need to copy it, so that multiple events don't have a reference to the same object
        var copiedEventObject = $.extend({}, originalEventObject);

       // assign it the date that was reported
       copiedEventObject.start  = date;
       copiedEventObject.end    = (date.getTime() + 1800000)/1000; // put your desired end time here
       copiedEventObject.allDay = false;

       // Push the event into the array
       arrayOfEvents.push(copiedEventObject);
       ...
    },
    ...
)};

Answer 2

I was looking for the same thing, for FullCalendar v2, and I found out this:

defaultTimedEventDuration

A fallback duration for timed Event Objects without a specified end value.

Duration, default: '02:00:00' (2 hours)

If an event does not have an end specified, it will appear to be this duration when rendered.

The actual end of the event will remain unset unless forceEventDuration has been set to true.

This setting only affects events with allDay equal to false. For all-day events, use defaultAllDayEventDuration.

So you just need to do something like this, to have a default duration of 30 min.

$('#calendar').fullCalendar({ 
    defaultTimedEventDuration: '00:30:00',
    forceEventDuration: true,
    ...
    ...
});

Answer 3

I'm using this:

    $('#calendar').fullCalendar({

        allDayDefault: false

});

and at every event you will have display only start time ...

Answer 4

using Mr. J4mes answer, the event reverts back for me as well, it does not render.

The following helps: populate copiedEventObject.end with a new Date(...):

 copiedEventObject.end =new Date(date.getTime()+900000);

This adds 15 minutes (=900000 millisecs) to the start time

Answer 5

I have found the same problem. The solution is to setup a start/end property on the DOM object that is stored within the item that is going to be dropped.

E.g.

$('#external-events div.external-event').each(function() {

// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
// use the element's text as the event title
// set a start and end placeholder for the object!
var eventObject = {
    title: $.trim($(this).text(), start: null, end: null)
};

Answer 6

I resolved this problem using

   defaultTimedEventDuration: '01:00',
   forceEventDuration: true,

From docs: https://fullcalendar.io/docs/forceEventDuration https://fullcalendar.io/docs/v3/defaultTimedEventDuration

If an event’s end is not specified, it will be calculated and assigned to the Event Object using defaultTimedEventDuration or defaultAllDayEventDuration.