问如何自定义平日视图的完整日历？
EN

Stack Overflow用户

提问于 2017-06-12 10:02:41

回答 3查看 2.3K关注 0票数 0

我们如何使用完整的日历获得这种类型的视图？

正如您在图像中看到的，我只想在标题中显示工作日。

jquery

fullcalendar

平台电商解决方案

为客户提供电商客服、电商图片系统识别及搜索的快速搭建方案

回答 3

Stack Overflow用户

发布于 2017-06-13 01:56:11

我认为你正在寻找这个：

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

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

票数 0

Stack Overflow用户

发布于 2017-06-13 08:36:34

FullCalendar本身并没有一个完整的重复事件概念。它将呈现一周中多天的事件，但不能使用更复杂的规则(例如“每周一”)重复这些事件。

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

$(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>