Я пытаюсь использовать 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);
});
Хорошо, так что после ответа Адисона я смог понять и заставить его работать немного. Мне удалось извлечь длительность из моего предмета № 1 и применить эту длительность к событию перетаскивания. Но у меня все еще есть проблема, потому что я могу получить информацию только с помощью getDocumentById. Я не могу получить что-либо из параметра eventEl. Вот что я сделал:
Я добавил несколько идентификаторов в div, а также некоторые атрибуты, например:
<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), но каждый раз я получаю сообщение об ошибке (не определено) , Не могли бы вы помочь мне и скажите, как я могу получить, например, значение идентификатора div из события E1? Большое спасибо ! Я почти там благодаря тебе!