日历可拖动事件始终返回allday:true

发布于 2025-01-21 17:19:46 字数 3376 浏览 2 评论 0原文

我对日历外部事件有问题: 在这种情况下,我只使用此拖放代码

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文