Question

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

我试过这个，但似乎没有用。 calendar.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>

units.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);
?>

Answer 1

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

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

首先，删除：

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通话的数据，以覆盖范围的时间而不是单个日期 - 基于您通过您提供的观看次数标题选项，日历在一个显示中显示一天，两天，一周或一个月是完全可能的。因此，您的服务器需要能够返回与该范围内任何日期相关的所有资源。我还包括时区变量，以防您在场景中需要它。

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

资源作为一个函数：这应该只是调用服务器并返回结果，传递当前选择的日期范围，以便服务器可以返回正确的结果。呼叫＆＃34; refetchResources＆＃34;正如你在你的版本中所做的那样，没有任何意义，因为这只会导致再次调用相同的函数并导致无限循环 - 这个回调函数是资源被重新获取的过程。有关详情，请参阅https://fullcalendar.io/docs/resources-function。

Answer 2

利用

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

fullcalendar docs

的更多信息

基于每天安排的单位的动态时间表

2 个答案: