将事件加载到FullCalendar

Question

到目前为止,我一直在进行同步ajax调用以从数据库中获取事件,然后使用从ajax返回的变量初始化日历(解决方案1).

我已经读过,做同步调用通常被认为是坏的,因为它冻结了浏览器,所以我尝试了另一个选项,将ajax调用直接放在FullCalendar日历初始化的事件数组中(解决方案2).这在第一次加载时提供了很好的体验,因为浏览器由于异步ajax而未被锁定,您可以在构建时看到日历.

然而,这有一个缺点,每次更改视图时,它会重新呈现事件,使用户与第一个相比,体验不那么顺畅.以下是我到目前为止尝试的两个解决方案的代码:

解决方案1:

$(document).ready(function(){
     $.ajax({
         url: 'script.php',
         type: 'POST',
         async: false,
         success: function(response){
              json_events = response;

         }
    });
  $('#calendar').fullCalendar({
       events: JSON.parse(JSON.stringify(json_events)),
  });

});

解决方案2:

 $(document).ready(function(){
       $('#calendar').fullCalendar({

            events: {
                    url: 'script.php',
                    type: 'POST',
                    success : function(response){
                    }
           }
       });

  });

这个"问题"还有其他解决方案吗？是的,我不喜欢解决方案1,因为您在使用日历时不必处理事件的重新呈现,但是在加载页面时没有初始冻结会很好.

编辑: script.php

$events = array();
$query = mysqli_query($link, "SELECT * FROM calendar");
while($fetch = mysqli_fetch_array($query,MYSQLI_ASSOC)) {
   $e = array();
   $e['id'] = $fetch['id'];
   $e['start'] = $fetch['startdate'];
   $e['end'] = $fetch['enddate'];
   array_push($events, $e);
}
echo json_encode($events);

这会有用吗？(对于评论中的戴森)

  events: {
        url: 'script2.php',
        type: 'POST',
        data : {
            calendar_id : calendarId
        },
        success : function(response){
          }
   }

script2.php

$calend_id = $_POST['calendar_id'];
$start = $_POST['start'];
$end = $_POST['end'];
$events = array();
$query = mysqli_query($link, "SELECT startdate,enddate,id FROM calendar WHERE calendar_id = '$calend_id' AND startdate >= '$start' AND enddate <= '$end'");
while($fetch = mysqli_fetch_array($query,MYSQLI_ASSOC)) {
   $e = array();
   $e['id'] = $fetch['id'];
   $e['start'] = $fetch['startdate'];
   $e['end'] = $fetch['enddate'];
   array_push($events, $e);
}
echo json_encode($events);

Answer 1

FullCalendar确实希望您只加载当前视图所需的事件.这意味着您不必预先加载所有事件.想想看,一旦你的软件运行了几年,"所有事件"可能会相当大,并且会减慢日历的加载速度.此外,您必须考虑用户突然想要从3年前查看日历的可能性有多大？这可能是一个边缘情况,因此您不需要立即进行这些事件.

FullCalendar提供了一种非常简洁的方法来自动执行此操作.看到这个链接https://fullcalendar.io/docs/event_data/events_json_feed/

基本上,您只需将PHP端点指定为"事件"URL,只要您遵守该链接中指定的结构,当用户更改日期范围和/或显示的视图时,它将自动下载正确的事件.

所以,在你的日历配置中:

events: "script.php"

就如此容易!FullCalendar将自动传递两个字段 - "start"和"end"作为获取事件的日期.所以在你的PHP中,你需要这样的东西:

$events = array();
$start = $_GET["start"];
$end = $_GET["end"];
//code to build a query with a WHERE clause specifying the start/end dates
//...
//and finally echo the resulting events
echo json_encode($events);

除非网络延迟对您来说是个大问题,否则只有在需要时才会小批量地下载事件,这是首选.此外,默认情况下会设置一个日历选项:lazyFetching: true尝试最小化所需的ajax调用次数 - 有关其工作原理的详细信息,请参阅https://fullcalendar.io/docs/event_data/lazyFetching/.

如果您在加载事件时担心用户体验,则可以处理"加载"回调,因此您可以添加类似"加载"微调器或其他内容的东西,以向用户表明他们只需要等待一对事件出现的秒数.有关详细信息,请参阅https://fullcalendar.io/docs/event_data/loading/.