我正在尝试将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的值吗？非常感谢！多亏了你，我快到了！
多亏了@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事件包含所有属性，并使用getAttribute方法进行检索。
非常感谢@Adyson，我已经挣扎了好几天了！