javascript - 如何在全日历中设置外部事件的持续时间

Question

我正在尝试将 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>

然后我想检索信息，但无法检索。我唯一能做的就是:

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

因此，正如您所看到的，我只能检索给定的信息(在本例中为第一项)，但无法检索被拖放的信息。

正如您所看到的，我按照您所说的进行操作，并且效果很好，因为该事件获取了 div 中设置的值。但这里它总是 div 1，因为我不知道该怎么做。

我尝试了 eventEl.attr('id'), (eventEl.data) 但每次我都会收到错误(未定义)。您能否帮助我并告诉我如何从 eventE1 获取 div id 的值？多谢 !多亏了你，我快到了!

Answer 1

感谢@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>

如您所见，我添加了其他属性以便能够设置自定义标题和颜色。

这是可拖动部分的代码:

    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 包含所有属性，并使用 getAttribute 方法检索。

非常感谢@Adyson，我已经奋斗了好几天了!