0

我已经设置了一个 jquery 完整日历，可以从 mysql 脚本中提取单位。现在我的可用单位每天根据预定的员工/单位变化。因此，每次更改日期时，我都需要更新单位。这可能与全日历有关吗？

我已经尝试过了，但似乎没有用。日历.php

        <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='../scheduler.min.css' rel='stylesheet' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/fullcalendar.min.js'></script>
<script src='../scheduler.min.js'></script>
<script>

  $(function() { // document ready

    $('#calendar').fullCalendar({
      defaultView: 'agendaDay',

      editable: true,
      selectable: true,
      eventLimit: true, // allow "more" link when too many events
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaDay,agendaTwoDay,agendaWeek,month'
      },
      views: {
        agendaTwoDay: {
          type: 'agenda',
          duration: { days: 2 },

          // views that are more than a day will NOT do this behavior by default
          // so, we need to explicitly enable it
          groupByResource: true

          //// uncomment this line to group by day FIRST with resources underneath
          //groupByDateAndResource: true
        }
      },

      //// uncomment this line to hide the all-day slot
      //allDaySlot: false,






refetchResourcesOnNavigate: true,
resources: function(callback, start, end, timezone) {


  $.ajax({
   url:"units.php",
   type:"POST",
   data:{ 
     start: start.format(),
     end: end.format(),
     timezone: timezone
   },
   success: function(resourceObjects) //define a variable to capture the JSON from the server
   {
     callback(resourceObjects); //return the new resource data to the calendar
   }
})},




      events: 'load.php',

select: function(start, end, allDay)
    {
     var title = prompt("Enter Event Title");
     if(title)
     {
      var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
      var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
      $.ajax({
       url:"insert.php",
       type:"POST",
       data:{title:title, start:start, end:end},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Added Successfully");
       }
      })
     }
    },
    editable:true,
    eventResize:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     var resourceId = event.resourceId;
     $.ajax({
      url:"update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id, resourceId:resourceId},
      success:function(){
       calendar.fullCalendar('refetchEvents');
       alert('Event Update');
      }
     })
    },

    eventDrop:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     var resourceId = event.resourceId;
     $.ajax({
      url:"update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id, resourceId:resourceId},
      success:function()
      {
       calendar.fullCalendar('refetchEvents');
       alert("Event Updated");
      }
     });
    },

    eventClick:function(event)
    {
     if(confirm("Are you sure you want to remove it?"))
     {
      var id = event.id;
      $.ajax({
       url:"delete.php",
       type:"POST",
       data:{id:id},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Event Removed");
       }
      })
     }
    },

   });
  });

</script>
<style>

  body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 99%;
    margin: 50px auto;
  }

</style>
</head>
<body>

  <div id='calendar'></div>

</body>
</html>

单位.php

<?php

//load.php
$start = $_POST['start'];
$end = $_POST['end'];
$tz = $_POST['timezone'];

$connect = new PDO('mysql:host=localhost;dbname=', '', 'pass');

$data = array();

$query = "select s.*, u.unit_number from schedules s
          left join units u on u.id = s.unit where s.start_time like '$start%'";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();
foreach ($result as $row) {
    /* Get Shift Start and calculate end time
      $start = date('G:i', $row['start_time']);
      $shift_lentgth = $row[''];
      $end= strtotime("+ $shift_lentgth", $start);
     */

    // Check unit level to give identifier

    $data[] = array(
        'id' => $row["id"],
        'title' => $row["unit_number"]
    );
}

echo json_encode($data);
?>
4

2 回答 2

0

你的代码真的没有什么意义。主要问题是您已经定义了两次“资源”选项，而我不知道带有附加功能的选项正在尝试做什么。在最坏的情况下，它可能会导致重新获取的无限循环。幸运的是，稍后在选项列表中对“units.php”的静态引用会覆盖它，因此永远不会被使用。

看起来您正在尝试根据当前选择的日期范围设置资源列表，这是完全合理且可能的，但您似乎有点困惑，因此您的代码不合逻辑。

首先，删除：

resources: "units.php"

完全，因为这会覆盖您动态控制资源的尝试。

其次，您可以设置以下内容：

refetchResourcesOnNavigate: true,
resources: function(callback, start, end, timezone) {
  $.ajax({
   url:"units.php",
   type:"POST",
   data:{ 
     "start": start.format(),
     "end": end.format(),
     "timezone": timezone,
   },
   success: function(resourceData) //define a variable to capture the JSON from the server
   {
     callback(resourceData); //return the new resource data to the calendar
   }
}

笔记：

  • 看到我已经更改了发送到您的 ajax 调用的数据以涵盖时间范围而不是单个日期 - 根据您通过标题选项提供的视图，日历完全有可能显示一天，一次显示 2 天、一周或一个月。因此，您的服务器需要能够返回与该范围内的任何日期相关的所有资源。我还包括了 timezone 变量，以防您在场景中需要它。

  • “refetchResourcesOnNavigate” - 根据https://fullcalendar.io/docs/refetchResourcesOnNavigate这会导致在用户更改日期范围时自动重新获取资源，并且还会导致任何“资源”自定义回调函数被赋予当前日期范围和时区作为可以转发到服务器的参数。

  • 资源作为函数：这应该简单地调用服务器并返回结果，传递当前选择的日期范围，以便服务器可以返回正确的结果。正如您在您的版本中所做的那样，在其中调用“refetchResources”是没有意义的，因为这只会导致再次调用相同的函数并导致无限循环 - 此回调函数是重新获取资源的过程。有关更多信息，请参阅https://fullcalendar.io/docs/resources-function。

于 2018-05-24T10:12:41.647 回答
-1

利用

refetchResourcesOnNavigate: true,
  resources: '/my-resource-script.php'

fullcalendar 文档中的更多信息

于 2018-05-24T20:35:48.403 回答