Question

提前感谢。

我正在努力克服fullcalendar调度程序的东西。

我只想显示如下所示的工作时间表。（仅供参考，以下的CSS仅由我编辑，当然这不是我想要的答案。）

如您所见，对于原始全日历日程安排人员的周末时间，您不能在一个事件中拥有相同的y点，我想自定义此内容。

请您的建议，谢谢

enter image description here

Answer 1

如果没有看到您用于创建此方案的确切事件数据，则很难确切地知道问题所在。但这是我的建议：

我认为你想要并排举办两场比赛，但只要他们的时间重叠，你就永远无法做到。即使时间不重叠，如果事件1的结束和事件2的开始落在插槽中间某处，它们仍然会重叠。

让我们使用下面的代码片段来说明这一点：

演示中有两个日历（向下滚动以查看第二个日历）。这两个日历都有相同的资源和事件。

第一个资源包含在同一天重叠的事件。所以他们永远不会并排展示。
第二个资源包含不重叠的事件。一个结束就在中午之前，第二天在同一天的中午开始。

在第一个日历上，它们仍然显示为重叠，因为日历仅以1天为间隔显示内容。在整天的背景下，事件仍然重叠。当天只有1个插槽可供放置。

然而，在第二个日历上，第二个资源中的事件将并排显示，因为插槽持续时间（12小时）现在足够短以允许根据事件的开始/结束时间将事件放入单独的插槽中。

$(function() { // document ready
  $('#calendar1').fullCalendar({
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    defaultView: 'timeline',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'timeline'
    },
    slotDuration: {
      days: 1
    },
    resources: [{
        "id": 1,
        "title": "Screenshot 1"
      },
      {
        "id": 2,
        "title": "Screenshot 2"
      },
    ],
    events: [{
        id: '1',
        resourceId: "1",
        start: '2017-06-01',
        end: '2017-06-04',
        title: 'event 1'
      },
      {
        id: '2',
        resourceId: "1",
        start: '2017-06-03',
        end: '2017-06-06',
        title: 'event 2'
      },
      {
        id: '3',
        resourceId: "2",
        start: '2017-06-01',
        end: '2017-06-03T12:00',
        title: 'event 3'
      },
      {
        id: '4',
        resourceId: "2",
        start: '2017-06-03T12:00',
        end: '2017-06-06',
        title: 'event 4'
      }
    ]
  });

  $('#calendar2').fullCalendar({
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    defaultView: 'timeline',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'timeline'
    },
    slotDuration: {
      hours: 12
    },
    resources: [{
        "id": 1,
        "title": "Screenshot 1"
      },
      {
        "id": 2,
        "title": "Screenshot 2"
      },
    ],
    events: [{
        id: '1',
        resourceId: "1",
        start: '2017-06-01',
        end: '2017-06-04',
        title: 'event 1'
      },
      {
        id: '2',
        resourceId: "1",
        start: '2017-06-03',
        end: '2017-06-06',
        title: 'event 2'
      },
      {
        id: '3',
        resourceId: "2",
        start: '2017-06-01',
        end: '2017-06-03T12:00',
        title: 'event 3'
      },
      {
        id: '4',
        resourceId: "2",
        start: '2017-06-03T12:00',
        end: '2017-06-06',
        title: 'event 4'
      }
    ]
  });

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" media="all" />
<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/scheduler.min.css' rel='stylesheet' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/scheduler.min.js'></script>

<div id='calendar1'></div>
<br/><br/>
<div id='calendar2'></div>

因此，总而言之，为了获得您想要的效果，您必须确保

您的活动不会按日期或时间重叠，
配置的插槽持续时间足够小以允许日历将事件并排放置在不同的插槽中。

至于如何自定义Fullcalendar Scheduler的持续时间

1 个答案: