Fullcalendar外部拖放无法正常工作

我试图像这样实现Fullcalendar功能:将外部事件拖到日历上,然后通过ajax将事件及其标题,开始日期和结束日期保存到数据库中。 我确实做到了将事件标题和开始日期/时间保存到数据库中,但是我无法解决以下几个问题:

  1. 当前,保存到数据库的end日期/时间与start日期/时间相同。
    • 如何将全天活动的结束日期设置为开始日期之后的24小时?
    • 如何为固定持续时间的事件获取确切的startend日期?
  2. 一旦事件被拖动并保存到数据库中,在我按下F5键之前,我无法再拖放事件

我的HML是以下内容:

<div id='external-events'>
   <div class="fc-events-container">
      <div>All Day Events</div>
      <div class='fc-event' data-color='#28A745'>All Day Event</div>
      <div>Fixed Duration Events</div>
      <div class='fc-event' data-color='#50C1E9'>Event From 8am till 5 pm</div>
   </div>
</div>

jQuery:

$('#external-drag').fullCalendar({
    header: {
        left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'
    },editable: true,droppable: true,defaultDate: new Date(),selectable: true,events: "../../ajax/get_events.php",drop: function( date,allDay,jsEvent,ui ) {
        var start =  date.format();
        var end =  date.format();
        var title = $.trim($(this).text()); 
            $.ajax({
                url: '../../ajax/add_event.php',data: 'title='+ title+'&start='+ start +'&end='+ end,type: "POST",success: function(json) {
                    alert('Added Successfully');
                },error: function() {
                    alert('Error');
                }
            });
            calendar.fullCalendar('renderEvent',{
                title: title,start: start,end: end,allDay: allDay
            },true
        );
    }

});
kk771396 回答:Fullcalendar外部拖放无法正常工作

首先,了解您所经历的一些背景情况:尽管您将第二个事件标记为“从晚上8点到下午5点”,但这并没有实际的实际效果。如果您将任一可拖动项目拖放到具有时间意识的日历视图(例如,星期视图)上,它将获得开始日期和时间。在诸如月的视图中,它没有一天中特定时间的概念,那么它将仅获得开始日期,而没有附加时间。

但是,在两种情况下都没有结束日期。通过renderEvent将事件添加到日历后,fullCalendar将为其分配默认持续时间(按照  defaultAllDayEventDurationdefaultTimedEventDuration设置)。您可以使用它来计算名义结束日期(尽管除非将forceEventDuration设置为end,否则事件对象实际上没有设置其true属性)。


现在要解决:

如果要对其进行控制,以使特定的拖动项目具有预定义的时间,则必须在相关的可拖动项目的data-属性中指定时间数据。然后,您需要像使用标题一样在drop回调中获取这些值,并在创建事件时使用它们。

要花点时间才能达到目的,尤其是在瞬间物体上,但据我所知,它现在似乎已经可以满足您的要求。

drop: function(date,jsEvent,ui) {
  var element = $(this);
  var title = $.trim(element.text());
  var color = element.data("color");
  var start = moment(date.format()); //lose the extended fullCalendar moment with its "ambiguously-timed" feature,which gets in the way here
  var end = start.clone();
  var allDay = true;
  console.log(start.format(),end.format());
  if (typeof element.data("starttime") !== 'undefined') {
    //timed events
    var starttime = moment.duration(element.data("starttime"));
    var endtime = moment.duration(element.data("endtime"));
    start.set({ "hour": starttime.hours(),"minute": starttime.minutes()});
    end.set({ "hour": endtime.hours(),"minute": endtime.minutes()});
    allDay = false;
    console.log(starttime.hours());
  } else {
    //allday events
    end.add({ days: 1 });
  }
  console.log("title=" + title + "&start=" + start.format() + "&end=" + end.format());
  $.ajax({
            url: '../../ajax/add_event.php',data: 'title='+ title+'&start='+ start.format() +'&end='+ end.format(),type: "POST",success: function(json) {
                alert('Added Successfully');
            },error: function() {
                alert('Error');
            }
        });
  calendar.fullCalendar(
    "renderEvent",{
      title: title,start: start,end: end,color: color,allDay: allDay
    },true
  );
}

演示:https://codepen.io/ADyson82/pen/GRRXwRL?editors=1010

请注意,如果用户将事件拖到类似于周视图的具有时间意识的视图上,它仍将完全按照可拖动对象中的设置创建事件,并且将忽略他们将其放置在一天中的任何时间。这可能会使某些用户感到困惑或烦恼-但我想这取决于您要确切实现的目标。

P.S。我不知道您在哪里知道drop回调具有一个allDay参数。 documentation中显然没有它。您无法使用它,因此我已在我的版本中将其删除。

本文链接:https://www.f2er.com/3122626.html

大家都在问