Question

我们如何使用完整日历获取此类视图？

正如您在图片中看到的那样，我只想在标题中找到工作日。

Answer 1

我认为你正在寻找这个：

$('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    weekends: false // will hide Saturdays and Sundays
});

这可以在基本用法文档中找到。 https://fullcalendar.io/docs/usage/

Answer 2

FullCalendar本身并不具备重复事件的完整概念。它将在一周中的多天中呈现事件，但不能使用更复杂的规则（例如“每个星期一”）重复它们。

要克服这个问题，需要进行一些自定义。幸运的是，这可以通过API完成，而无需修改底层代码。一种方法是稍微改变事件对象的结构，然后将一些自定义代码写入fullCalendar中的“eventRender”回调，以便它读取自定义数据并根据单个“事件”对象创建适当的重复事件。喂它。

$(document).ready(function() {
  var repeatingEvents = [{
    "id": "1",
    "title": "Event 1",
    //in "start and "end", only set times of day, not dates. 
    "start": "09:00",
    "end": "10:00",
    //use standard dow property to define which days of the week the event will appear on
    "dow": "1",
    //the custom "ranges" sets when the repetition begins and ends
    "ranges": [{
      "start": "2017-06-01",
      "end": "2017-06-30"
    }],
    "allDay": false
  }, {
    "id": "2",
    "title": "Event 2",
    "start": "10:00",
    "end": "12:00",
    "dow": "2",
    "ranges": [{
      "start": "2017-05-10",
      "end": "2017-07-16"
    }],
    "allDay": false
  }, {
    "id": "3",
    "title": "Event 3",
    "start": "15:00",
    "end": "16:30",
    "dow": "3",
    "ranges": [{
      "start": "2017-06-01",
      "end": "2017-06-30"
    }],
    "allDay": false
  }];

  $('#calendar').fullCalendar({
    hiddenDays: [0], //hide Sundays as per your screenshot
    minTime: "07:00",
    maxTime: "22:00",
    defaultView: 'agendaWeek',
    events: repeatingEvents,
    //custom code to create repeating events from the data
    eventRender: function(event) {
      return (event.ranges.filter(function(range) { // test event against all the ranges

        return (event.start.isBefore(range.end) &&
          event.end.isAfter(range.start));

      }).length) > 0; //if it isn't in one of the ranges, don't render it (by returning false)
    }
  });
});

<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.3.1/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/gcal.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" rel="stylesheet" media="all" />
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" media="all" />

<div id='calendar'></div>

不幸的是，这个解决方案不适用于全天活动，但我希望它有用。

P.S。相信原始解决方案的答案：https://stackoverflow.com/a/29393128/5947043

Answer 3

我知道这是旧的，但也许这个答案可以帮助其他人，所以我把它放在这里。要生成这样的视图，您可以简单地：

通过像这样放置 hiddenDays 属性来隐藏星期天： <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <canvas id="canvas" height="90"></canvas>
像这样设置 dateAlignment 属性：hiddenDays: [0]
将 firstDay 属性设置为 1，如下所示：dateAlignment: 'week'

仅此而已。有关更多详细信息，您可以查看以下网址

https://fullcalendar.io/docs/dateAlignment

https://fullcalendar.io/docs/hiddenDays

如何自定义工作日视图的完整日历？

3 个答案: