Question

我检查了API并且无法找到我正在寻找的内容，是否可以在屏幕上拖动和重新安排资源？

在此示例中，我可以拖动并重新订购从A,B,C,D到B,C,A,D的会议室吗？

https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/demos/vertical-resource-view.html

谢谢

Answer 1

当然，但不是没有外部拖放代码。下面，我使用了jQueryUI的Sortable功能并挂钩了它的事件。

为了完成这项工作，资源列表通过一个函数填充。这意味着我们可以对资源进行重新排序，然后调用Callendar的refetchResources方法让它检索＆amp;重绘显示。我在日历选项中添加了一个排序属性 - resourceOrder: 'sortOrder'，以确保它正确地命令资源。

FullCalendar资源有两个不同的视图 - 垂直，资源为html th单元格，水平，资源为html td。对于垂直情况，jQueryUI Sortable事件将丢失，必须在调用refetchResources后重新应用。我在下面列出了两种布局的代码。

要运行，请将html保存在\fullcalendar-scheduler-1.6.2\demos\中 - 路径相对于该文件夹。

垂直视图

<!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' />
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <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 src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>
    var resources = [
      { id: 'a', sortOrder: 1},
      { id: 'b', sortOrder: 2, eventColor: 'green' },
      { id: 'c', sortOrder: 3, eventColor: 'orange' },
      { id: 'd', sortOrder: 4 },
      { id: 'e', sortOrder: 5 },
      { id: 'f', sortOrder: 6, eventColor: 'red' },
      { id: 'g', sortOrder: 7 }
    ];

    $(function() { // document ready

      $('#calendar').fullCalendar({
        now: '2017-05-07',
        editable: true, // enable draggable events
        aspectRatio: 1.8,
        scrollTime: '00:00', // undo default 6am scrollTime
        header: {
          left: 'today prev,next',
          center: 'title',
          right: ''
        },
        defaultView: 'agendaDay',
        views: {},
        resourceLabelText: 'Rooms',
        resourceText: function(resource) {
          return 'Auditorium ' + ('' + resource.id).toUpperCase();
        },
        resourceOrder: 'sortOrder',
        resources: resourcesFunc,
        events: [
          { id: '1', resourceId: 'b', start: '2017-05-07T02:00:00', end: '2017-05-07T07:00:00', title: 'event 1' },
          { id: '2', resourceId: 'c', start: '2017-05-07T05:00:00', end: '2017-05-07T22:00:00', title: 'event 2' },
          { id: '3', resourceId: 'd', start: '2017-05-06', end: '2017-05-08', title: 'event 3' },
          { id: '4', resourceId: 'e', start: '2017-05-07T03:00:00', end: '2017-05-07T08:00:00', title: 'event 4' },
          { id: '5', resourceId: 'f', start: '2017-05-07T00:30:00', end: '2017-05-07T02:30:00', title: 'event 5' }
        ]
      });

      function resourcesFunc(callback) {
        callback(resources);
      }

    });
  </script>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
      font-size: 14px;
    }

    #calendar {
      max-width: 900px;
      margin: 50px auto;
    }
  </style>
</head>

<body>

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

  <script>
    $(function() {

      var initialPos, finalPos;

      $("table thead tr").sortable({
          items: "> th:gt(0)",
          axis: "x"
        })
        .disableSelection()
        .on("sortstart", function(event, ui) {
          initialPos = ui.item.index() - 1; // need to subtract 1 because of the empty first header cell
        })
        .on("sortupdate", function(event, ui) {
          sortUpdate(event, ui);
        });

      function sortUpdate(event, ui) {
        finalPos = ui.item.index() - 1; // need to subtract 1 because of the empty first header cell

        if (finalPos == -1) return; // "sortupdate" gets called twice for an unknown reason. Second time with finalPos == -1

        var tmpResources = [];

        for (var i = 0; i < resources.length; i++) {
          tmpResources.push(resources[i]);
        }

        // reorder sorting to match
        if (finalPos > initialPos) {
          tmpResources[finalPos] = resources[initialPos];
          tmpResources[finalPos].sortOrder = finalPos + 1;

          for (var i = initialPos + 1; i <= finalPos; i++) {
            //resources[i].sortOrder -= 1;
            tmpResources[i - 1] = resources[i];
            tmpResources[i - 1].sortOrder -= 1;
          }
        } else {
          tmpResources[finalPos] = resources[initialPos];
          tmpResources[finalPos].sortOrder = finalPos + 1;

          for (var i = initialPos - 1; i >= finalPos; i--) {
            //resources[i].sortOrder += 1;
            tmpResources[i + 1] = resources[i];
            tmpResources[i + 1].sortOrder += 1;
          }
        }

        for (var i = 0; i < tmpResources.length; i++) {
          resources[i] = tmpResources[i];
        }

        $('#calendar').fullCalendar('refetchResources'); // refresh display

        // sorting is lost after a refetch when in vertical display, so need to reapply:    
        $("table thead tr").sortable({
            items: "> th:gt(0)",
            axis: "x"
          })
          .disableSelection()
          .on("sortstart", function(event, ui) {
            initialPos = ui.item.index() - 1; // need to subtract 1 because of the empty first header cell
          })
          .on("sortupdate", function(event, ui) {
            sortUpdate(event, ui);
          });
      }

    });
  </script>
</body>

</html>

横向视图：

<!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' />
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <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 src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>
    var resources = [
      { id: 'a', sortOrder: 1},
      { id: 'b', sortOrder: 2, eventColor: 'green' },
      { id: 'c', sortOrder: 3, eventColor: 'orange' },
      { id: 'd', sortOrder: 4 },
      { id: 'e', sortOrder: 5 },
      { id: 'f', sortOrder: 6, eventColor: 'red' },
      { id: 'g', sortOrder: 7 }
    ];

    $(function() { // document ready

      $('#calendar').fullCalendar({
        now: '2017-05-07',
        editable: true, // enable draggable events
        aspectRatio: 1.8,
        scrollTime: '00:00', // undo default 6am scrollTime
        header: {
          left: 'today prev,next',
          center: 'title',
          right: ''
        },
        defaultView: 'timelineDay',
        views: {
          timelineThreeDays: {
            type: 'timeline',
            duration: {
              days: 3
            }
          }
        },
        resourceLabelText: 'Rooms',
        resourceText: function(resource) {
          return 'Auditorium ' + ('' + resource.id).toUpperCase();
        },
        resourceOrder: 'sortOrder',
        resources: resourcesFunc,
        events: [
          { id: '1', resourceId: 'b', start: '2017-05-07T02:00:00', end: '2017-05-07T07:00:00', title: 'event 1' },
          { id: '2', resourceId: 'c', start: '2017-05-07T05:00:00', end: '2017-05-07T22:00:00', title: 'event 2' },
          { id: '3', resourceId: 'd', start: '2017-05-06', end: '2017-05-08', title: 'event 3' },
          { id: '4', resourceId: 'e', start: '2017-05-07T03:00:00', end: '2017-05-07T08:00:00', title: 'event 4' },
          { id: '5', resourceId: 'f', start: '2017-05-07T00:30:00', end: '2017-05-07T02:30:00', title: 'event 5' }
        ]
      });

      function resourcesFunc(callback) {
        callback(resources);
      }

    });
  </script>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
      font-size: 14px;
    }

    #calendar {
      max-width: 900px;
      margin: 50px auto;
    }
  </style>
</head>

<body>

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

  <script>
    $(function() {

      var initialPos, finalPos;

      $("table tbody").sortable({
          axis: "y"
        })
        .disableSelection()

        .on("sortstart", function(event, ui) {
          initialPos = ui.item.index();
        })
        .on("sortupdate", function(event, ui) {

          finalPos = ui.item.index();

          if (finalPos == -1) return; // "sortupdate" gets called twice for an unknown reason. Second time with finalPos == -1

          var tmpResources = [];

          for (var i = 0; i < resources.length; i++) {
            tmpResources.push(resources[i]);
          }

          // reorder sorting to match
          if (finalPos > initialPos) {
            tmpResources[finalPos] = resources[initialPos];
            tmpResources[finalPos].sortOrder = finalPos + 1;

            for (var i = initialPos + 1; i <= finalPos; i++) {
              //resources[i].sortOrder -= 1;
              tmpResources[i - 1] = resources[i];
              tmpResources[i - 1].sortOrder -= 1;
            }
          } else {
            tmpResources[finalPos] = resources[initialPos];
            tmpResources[finalPos].sortOrder = finalPos + 1;

            for (var i = initialPos - 1; i >= finalPos; i--) {
              //resources[i].sortOrder += 1;
              tmpResources[i + 1] = resources[i];
              tmpResources[i + 1].sortOrder += 1;
            }
          }

          for (var i = 0; i < tmpResources.length; i++) {
            resources[i] = tmpResources[i];
          }

          $('#calendar').fullCalendar('refetchResources'); // refresh display
        })
    });
  </script>
</body>

</html>

FullCalendar - 垂直资源订单安排

1 个答案: