how to set duration for external events in fullcalendar

Question

I'm trying to use fullcalendar with external events. I followed the example with external events that are dragged and dropped. That's exactly what I need and the example is ok: I'm able to drag external events and drop it on the calendar. They're converted into events. But the problem is they all are 60 minutes long. I'd like to change this value but I couldn't find how to do it.

I found a lot of examples of setting durations but it's always for events and not for external drag and drop events.

Could you please help me?

Thanks

Here's my code :

document.addEventListener('DOMContentLoaded', () => {
var Draggable = FullCalendarInteraction.Draggable;

// The calendar
var calendarEl = document.getElementById('calendar-holder');
// The div containing the draggable items
var draggableEl = document.getElementById('external-events');

var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    defaultView: 'timeGridWeek',
    editable: true,
    eventSources: [
        {
            url: "{{ path('fc_load_events') }}",
            method: "POST",
            extraParams: {
                filters: JSON.stringify({})
            },
            failure: () => {
                // alert("There was an error while fetching FullCalendar!");
            },
        },
    ],
    header: {
        left: 'prev,next today',
        center: 'title',
        //right: 'dayGridMonth,timeGridWeek,timeGridDay',
    },
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ], // https://fullcalendar.io/docs/plugin-index
    timeZone: 'UTC',
    droppable: true,
    drop: function(info) {
        info.allDay = false;
    }
});
new Draggable(draggableEl, {
    itemSelector: '.fc-event',
    eventData: function(eventEl) {
        return {
            title: eventEl.innerText,
            defaultTimedEventDuration: '03:00'
        };
    }
});

calendar.render();
new Draggable(draggableEl);

});

---

OK so after Adyson's answer I was able to understand and make it work a bit. I was able to retrive the duration from my item number 1 and apply this duration to the drag and dropped event. But I still have an issue because I'm only able to retrieve the information with the getDocumentById. I'm not able to retrieve anything from eventEl parameter. Here's what I did :

I added some ids to the divs, as well as some attributes, like this :

<div class="fc-event" id="event1" data-event='{ "title": "event 1", "duration": "05:00" }'>My Event 1</div>
            <div class="fc-event" id="event2" data-event='{ "title": "event 2", "duration": "03:00" }'>My Event 2</div>
            <div class="fc-event" id="event3" data-event='{ "title": "event 3", "duration": "01:00" }'>My Event 3</div>
            <div class="fc-event" id="event4" data-event='{ "title": "event 4", "duration": "02:00" }'>My Event 4</div>
            <div class="fc-event" id="event5" data-event='{ "title": "event 5", "duration": "04:00" }'>My Event 5</div>

And then I'd like to retrieve the informations but I was not able. The only thing I could do was :

                    new Draggable(containerEl, {
                    itemSelector: '.fc-event',
                    eventData: function(eventEl) {
                        var event1 = document.getElementById('event1');
                        var json_event = event1.getAttribute("data-event");
                        var event_array = JSON.parse(json_event);
                        var duration = event_array['duration'];
                        var event_title = event_array['title'];
                        return {
                            title: event_title, //eventEl.innerText,
                            duration: duration,
                        };
                    }
                });

So as you can see I'm only able to retrive a given information (first item in this case) but not the one that's being dragged and dropped.

As you can see I followed what you said and it's working great, because the event get the values that were set in the div. But here it's always div 1 because I don't know how to do.

I tried eventEl.attr('id'), (eventEl.data) but each time I'm getting an error (undefined). Could you please help me and tell me how i can get for example the value of the div id from the eventE1 ? Thanks a lot ! I'm almost there thanks to you !

Answer 1

Thanks to @ADyson I was able to figure it out.

So here's the code of the external divs :

  <div id="external-events">
<p>
  <strong>Draggable Events</strong>
</p>
<div class="fc-event" id="event1" data-event='{ "title": "event 1 custom title", "duration": "05:00", "color": "#f00" }'>My Event 1</div>
<div class="fc-event" id="event2" data-event='{ "title": "event 2 other title", "duration": "03:00", "color": "#0f0" }'>My Event 2</div>
<div class="fc-event" id="event3" data-event='{ "title": "event 3 !!", "duration": "01:00", "color": "#00f" }'>My Event 3</div>
<div class="fc-event" id="event4" data-event='{ "title": "event 4 OOOH", "duration": "02:00", "color": "#ff0" }'>My Event 4</div>
<div class="fc-event" id="event5" data-event='{ "title": "event 5 YES", "duration": "04:00", "color": "#0ff" }'>My Event 5</div>
</div>

As you can see I added other attributes to be able to set custom title and color.

And here's the code for the draggable part :

    new Draggable(containerEl, {
  itemSelector: '.fc-event',
  eventData: function(eventEl) {
        var json_event = eventEl.getAttribute("data-event");
        var event_array = JSON.parse(json_event);
        var event_duration = event_array['duration'];
        var event_title = event_array['title'];
        var event_color = event_array['color'];

        return {
            title: event_title,
            duration: event_duration,
            backgroundColor: event_color,
        };
    }
});

data-event contains all the attributes and it's retrived with getAttribute method.

Thanks a lot @Adyson, I'd been struggling for days !