Javascript Fullcalendar外部拖动&；drop不能正常工作_Javascript_Jquery Ui_Fullcalendar_Jquery Ui Draggable_Fullcalendar 3

Javascript Fullcalendar外部拖动&；drop不能正常工作

javascript jquery-ui fullcalendar

Javascript Fullcalendar外部拖动&；drop不能正常工作,javascript,jquery-ui,fullcalendar,jquery-ui-draggable,fullcalendar-3,Javascript,Jquery Ui,Fullcalendar,Jquery Ui Draggable,Fullcalendar 3,我正在尝试实现一个完整的日历功能，比如：将一个外部事件拖到日历中，然后通过ajax将该事件保存到数据库中，并显示其标题、开始和结束日期。我确实实现了将事件标题和开始日期/时间保存到DB中，但我无法解决以下两个问题：目前，保存到数据库的结束日期/时间与开始日期/时间相同。如何将全天活动的结束日期设置为开始日期后24小时如何获得固定持续时间事件的确切开始和结束日期一旦事件被拖拽并保存到数据库中，在我点击F5之前，我不能再拖拽任何事件我的HML如下所示： <div id='ext

我正在尝试实现一个完整的日历功能，比如：将一个外部事件拖到日历中，然后通过ajax将该事件保存到数据库中，并显示其标题、开始和结束日期。我确实实现了将事件标题和开始日期/时间保存到DB中，但我无法解决以下两个问题：

目前，保存到数据库的

结束

日期/时间与

开始

日期/时间相同。

如何将全天活动的结束日期设置为开始日期后24小时
如何获得固定持续时间事件的确切
```
开始
```
和
```
结束
```
日期

一旦事件被拖拽并保存到数据库中，在我点击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>

首先，你所经历的一些背景情况：尽管你把你的第二件事贴上了“从晚上8点到5点”的标签，但这并没有实际效果。如果您将可拖动项目中的任何一个拖放到时间感知日历视图（例如周视图）上，则它将获得开始日期和时间。在诸如month这样的视图中，它没有一天中特定时间的概念，那么它只会获得一个开始日期，没有附加时间

然而，在这两种情况下，都没有结束日期。一旦通过将事件添加到日历中，fullCalendar将为其分配默认持续时间（根据或设置（视情况而定）。您可以使用它来计算概念上的结束日期（尽管事件对象实际上没有设置其

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
  );
}

演示：

注意，如果用户将事件拖到时间感知视图（如“周”视图）上，它仍然会完全按照可拖表中的设置创建事件，并且会忽略他们在一天中的任何时间将其拖到的事件。这可能会让一些用户感到困惑或恼火，但我想这取决于你到底想实现什么

另外，我不知道你是从哪里知道

drop

回调有一个

全天

参数的。很明显，它不在房间里。你不能使用它，所以我在我的版本中删除了它。

首先，一些你正在经历的背景背景：虽然你已经将你的第二个事件标记为“从8点到5点”，但这没有实际的效果。如果您将可拖动项目中的任何一个拖放到时间感知日历视图（例如周视图）上，则它将获得开始日期和时间。在诸如month这样的视图中，它没有一天中特定时间的概念，那么它只会获得一个开始日期，没有附加时间

end