Question

我正在使用FullCalendar Beta2，我将AllDay标志设置为True。日历仍然将结束日期视为独家！如何使结束日期包括在内？

非常感谢。

Answer 1

@ZooZ - 根据Beta 2升级文档，结束日期现在是独家的：

所有结束日期现在都是独家的。例如，如果全天活动结束在星期四，结束日期是星期五00:00:00。 1.x 版本对此有一些奇怪的规则。应该是的现在更加简单，一致地使用独占结束日期整个API。另外，这种行为更符合其他API和格式，例如iCalendar。

参考：http://arshaw.com/fullcalendar/wiki/Upgrading-to-2/

我只想在你的结束日期计算中添加一个来解决这个问题：）

Answer 2

我知道这有点老了，但是由于结束日期是排他性的，因此我发现了此解决方法，而不必增加其他日期。首先将显示时间设置为false，这样就不会在事件上显示时间。

 displayEventTime: false,

然后从您的事件中删除allDay标记，然后我使用了foreach循环来处理从数据库中提取的事件。

$events=[
 "start_date"=>"2020-01-01 00:00:00",
 "end_date"=>"2020-01-04 00:00:00",
 "title"=>"My Event",
]

events:[
<?php foreach ($events as $event):?>
<?php echo "{start:'".$event["start_date"]."',end:'".$event["end_date"]."',title:'".$event["title"]."'}},";?>
<?php endforeach;?>
],

在事件部分内，我有一个事件的foreach循环。我将添加

          <?php $date = DateTime::createFromFormat("Y-m-d H:i:s", $event["end_date"]);
             $date->setTime(0, 0);
             // Add 23 hours
             $date->add(new DateInterval('PT23H'));?>

所以我的最后一个foreach循环看起来像

events:[
    <?php foreach ($events as $event):?>
      <?php $date = DateTime::createFromFormat("Y-m-d H:i:s", $event["end_date"]);
      $date->setTime(0, 0);
      // Add 23 hours
      $date->add(new DateInterval('PT23H'));?>
 <?php echo " 
 {start:'".$event["start_date"]."',end:'".$date->format('Y-m-d H:i:s')."', 
 title:'".$event["title"]."'}},";?>
  <?php endforeach;?>
 ],

因此这在事件内具有foreach循环。然后，我以一种易于使用的格式创建日期，以便在添加23小时的地方使用，然后回显事件本身中格式化的日期。

然后，它将结束日期显示为包含两端的日期，而不必调整nextDayThreshold或不必在将日期添加到数据库中之前添加日期。

Answer 3

您可以挂钩到eventAfterAllRender并更新事件的副本并强制日历刷新。

在我的示例中，修改仅适用于标记为allDay事件的事件（allDay：true）。我只修改事件数据的复制/克隆，因此它只更改显示，而不是实际数据（我认为 - 我需要更好地测试它）。我添加了克隆功能，但如果您愿意，可以使用其他功能。我添加了forceRendererToDisplay标志，使其只运行一次。

这是一个小提琴：https://jsfiddle.net/a3q9c5tr/15/

 function clone(obj) {
  if (null == obj || "object" != typeof obj) return obj;
  var copy = obj.constructor();
  for (var attr in obj) {
      if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
  }
  return copy;
}

$('#calendar1').fullCalendar({
forceRerenderToDisplay: true,
eventAfterAllRender: function(){
    var startdatestr = this.options.events[0].start;
    var enddatestr = this.options.events[0].end;
    if(this.options.forceRerenderToDisplay == true){
        var endDisplayDate = new Date(enddatestr);
        endDisplayDate.setDate(endDisplayDate.getDate() + 1);
        this.options.forceRerenderToDisplay = false;
      var evs = clone(this.options.events);
      for(var i in evs){
        if(evs[i].allDay){
            evs[0].end = new Date(endDisplayDate).toISOString().slice(0,10);
        }
      }
      this.calendar.removeEvents();
      this.calendar.addEventSource(evs);
      this.calendar.rerenderEvents();
    }
},
events:[
    {start:'2016-04-03',end:'2016-04-05',title:'my event', allDay:true}
],
header: {
  left: 'prev,next,today',
  center: 'title',
  right: 'month,agendaWeek,agendaDay',
  allDay:true
  }
});

FullCalendar结束日期不包括在内

3 个答案: