完整日历 - 如何在周视图中添加一天中的时间

Fullcalendar - How to add time of the day in week view

本文关键字：视图 添加 一天 时间 日历 周视图      更新时间：2023-09-26

默认周视图是这样的，左侧没有一天中的时间：

http://fullcalendar.io/views/basicWeek/

但我想以这种方式查看，一天中的时间在左侧：

http://fullcalendar.io/js/fullcalendar-2.3.1/demos/agenda-views.html

单击上方按钮面板上的"周"以查看它。

如何配置它以使其看起来像这样？

谢谢！

要使用 defaultView 属性。这将设置日历加载时的初始视图，如文档中指定的那样。所需的特定视图是agendaWeek（可用视图列表）。

因此，当您初始化日历时，您将defaultView: 'agendaWeek' .

例：

$('#fullCal').fullCalendar({
  events: [{
    title: 'Random Event 1',
    start: moment().add(-4, 'h'),
    end: moment().add(-2, 'h'),
    allDay: false
  }, {
    title: 'Random Event 2',
    start: moment().add(1, 'h'),
    end: moment().add(2, 'h'),
    allDay: false
  }, {
    title: 'Random Event 3',
    start: moment().add(6, 'h'),
    end: moment().add(8, 'h'),
    allDay: false
  }],
  header: {
    left: '',
    center: 'prev title next today',
    right: ''
  },
  timezone: 'local',
  defaultView: 'agendaWeek' /* this is the line you need */
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>
<div id="fullCal"></div>

相关文章：