Javascript 如何在fullcalendar中设置外部事件的持续时间

我正在尝试将fullcalendar用于外部事件。 我以拖放外部事件为例。 这正是我所需要的，这个例子也不错：我可以拖动外部事件并将其放到日历上。它们被转换成事件。但问题是它们都有60分钟长。 我想更改此值，但找不到如何更改

我发现了很多设置持续时间的例子，但它总是针对事件，而不是外部拖放事件

你能帮帮我吗

谢谢

这是我的密码：

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);

}))

---

好的，在Adyson的回答之后，我能够理解并使它工作了一点。 我可以从我的项目1中检索持续时间，并将此持续时间应用于拖放事件。但是我仍然有一个问题，因为我只能用getDocumentById检索信息。我无法从eventEl参数中检索任何内容。以下是我所做的：

我在div中添加了一些id以及一些属性，如下所示：

<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>

因此，正如您所见，我只能检索给定的信息（本例中的第一项），而不能检索正在拖放的信息

正如你所看到的，我遵循了你所说的，它工作得很好，因为事件得到了在div中设置的值。但是在这里它总是div 1，因为我不知道怎么做

---

我尝试了eventEl.attr（'id'），（eventEl.data），但每次都出现错误（未定义）。您能否帮助我并告诉我如何从Event1获取div id的值？谢谢！多亏了你，我快到了

多亏了@ADyson，我才明白这一点

下面是外部div的代码：

  <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>

数据事件包含所有属性，并使用getAttribute方法检索

---

非常感谢@Adyson，我已经挣扎了好几天了

多亏了@ADyson，我才明白这一点

下面是外部div的代码：

  <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>

数据事件包含所有属性，并使用getAttribute方法检索

---

非常感谢@Adyson，我已经挣扎了好几天了

更改此值：谢谢，但它不起作用。。。也许我放错地方了？我将尝试复制/粘贴我的代码。defaultTimedEventDuration是日历的一个选项，而不是可拖动或事件。因此，您可以将其与所有其他选项（如defaultView、editable等）一起添加。感谢您的编辑。现在，您说“正如您所看到的，我只能检索给定的信息（本例中的第一项），但不能检索正在拖放的信息。”。事件通过

eventEl

提供给您。因此，与其声明

event1

然后编写

event1.getAttribute

…不如编写

eventEl.getAttribute

！演示：更改此值：谢谢，但它不起作用。。。也许我放错地方了？我将尝试复制/粘贴我的代码。defaultTimedEventDuration是日历的一个选项，而不是可拖动或事件。因此，您可以将其与所有其他选项（如defaultView、editable等）一起添加。感谢您的编辑。现在，您说“正如您所看到的，我只能检索给定的信息（本例中的第一项），但不能检索正在拖放的信息。”。事件通过

eventEl

提供给您。因此，与其声明

event1

然后编写

event1.getAttribute

…不如编写

eventEl.getAttribute

！演示：

    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,
        };
    }
});