Question

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

当前，保存到数据库的end日期/时间与start日期/时间相同。
- 如何将全天活动的结束日期设置为开始日期之后的24小时？
- 如何为固定持续时间的事件获取确切的start和end日期？
一旦事件被拖动并保存到数据库中，在我按下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
        );
    }

});

Answer 1

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

但是，在两种情况下都没有结束日期。通过renderEvent将事件添加到日历后，fullCalendar将为其分配默认持续时间（按照 defaultAllDayEventDuration或defaultTimedEventDuration设置）。您可以使用它来计算名义结束日期（尽管除非将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中显然没有它。您无法使用它，因此我已在我的版本中将其删除。

Fullcalendar外部拖放无法正常工作

1 个答案: