日历可拖动事件始终返回allday:true
我对日历外部事件有问题: 在这种情况下,我只使用此拖放代码
new Draggable('#event-container', {
itemSelector: '.external-event',
eventData: function(eventEl) {
return {
title: 'event-title',
allDay:false,
start: '12:30:00',
duration: '2:00:00',
};
}
});
,我可以在每天的视图中删除 ,但不是在月视图中。
如果i 删除 持续时间
参数,则可以在月视图上放下事件。
在两种情况下,,“ EventReceive”
函数总是用allday返回事件:true
...而不是范围事件。
任何帮助将不胜感激,谢谢。
编辑:添加了摘要。 我们在控制台上有很多错误,我在专用服务器上看不到
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendar.Draggable;
var containerEl = document.getElementById('operatori_list');
var calendarEl = document.getElementById('calendar');
var cal = new Calendar(calendarEl, {
locale: 'it',
eventDisplay:'block',
headerToolbar: {
left : 'prev,next today',
center: 'title',
right : 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [],
editable : true,
droppable : true,
drop: function(date, jsEvent, ui, resourceId) {
console.log('drop', this);
console.log('drop', arguments);
},
eventReceive: function(info) {
console.log('eventReceive', info);
},
});
cal.render();
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
allDay:false,
title: eventEl.innerText,
start: $(eventEl).attr("data-starttime"),
duration: $(eventEl).attr("data-timeduration"),
};
}
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/main.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.js"></script>
<div id="operatori_list" class="dragWrapper">
<div class="fc-event external-event ui-draggable ui-draggable-handle" title="Event 1" data-starttime="08:00:00" data-endtime="18:00:00" data-timeduration="10:00:00">Event 1 </div>
<div class="fc-event external-event ui-draggable ui-draggable-handle" title="Event 2" data-starttime="08:00:00" data-endtime="18:00:00" data-timeduration="10:00:00">Event 2 </div>
<div class="fc-event external-event ui-draggable ui-draggable-handle" title="Event 3" data-starttime="08:00:00" data-endtime="18:00:00" data-timeduration="10:00:00">Event 3 </div>
</div>
<div id="calendar"></div>
I have problem with Calendar external events:
I just use this Draggable code
new Draggable('#event-container', {
itemSelector: '.external-event',
eventData: function(eventEl) {
return {
title: 'event-title',
allDay:false,
start: '12:30:00',
duration: '2:00:00',
};
}
});
In this case , i can drop only on Day view, but not on Month view.
If i remove the duration
parameter, then i can drop the event on Month view.
In both cases, the "eventReceive"
function always returns an event with allDay:true
... instead of range event.
Any help would be appreciated, thanks.
EDIT: Added snippet.
We have many errors in console that i don't see on my private server
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendar.Draggable;
var containerEl = document.getElementById('operatori_list');
var calendarEl = document.getElementById('calendar');
var cal = new Calendar(calendarEl, {
locale: 'it',
eventDisplay:'block',
headerToolbar: {
left : 'prev,next today',
center: 'title',
right : 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [],
editable : true,
droppable : true,
drop: function(date, jsEvent, ui, resourceId) {
console.log('drop', this);
console.log('drop', arguments);
},
eventReceive: function(info) {
console.log('eventReceive', info);
},
});
cal.render();
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
allDay:false,
title: eventEl.innerText,
start: $(eventEl).attr("data-starttime"),
duration: $(eventEl).attr("data-timeduration"),
};
}
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/main.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.js"></script>
<div id="operatori_list" class="dragWrapper">
<div class="fc-event external-event ui-draggable ui-draggable-handle" title="Event 1" data-starttime="08:00:00" data-endtime="18:00:00" data-timeduration="10:00:00">Event 1 </div>
<div class="fc-event external-event ui-draggable ui-draggable-handle" title="Event 2" data-starttime="08:00:00" data-endtime="18:00:00" data-timeduration="10:00:00">Event 2 </div>
<div class="fc-event external-event ui-draggable ui-draggable-handle" title="Event 3" data-starttime="08:00:00" data-endtime="18:00:00" data-timeduration="10:00:00">Event 3 </div>
</div>
<div id="calendar"></div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论