如何自定義工作日視圖的完整日歷？

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>

不幸的是，此解決方案不適用於全天事件，但除此之外我希望它有用。

PS歸功於原始解決方案的這個答案： https : //stackoverflow.com/a/29393128/5947043

Answer 3

我知道這是舊的，但也許這個答案可以幫助其他人，所以我把它放在這里。 要生成這樣的視圖，您可以簡單地：

1. 通過像這樣放置hiddenDays屬性來隱藏星期天： hiddenDays: [0]
2. 像這樣設置dateAlignment屬性： dateAlignment: 'week'
3. 像這樣將firstDay屬性設置為 1： firstDay: 1

就這樣。 有關更多詳細信息，您可以查看以下網址

https://fullcalendar.io/docs/dateAlignment

https://fullcalendar.io/docs/hiddenDays