Fullcalendar-如何在周視圖中添加一天中的時間

Question

默認周視圖是這樣的，左側一天中沒有時間：

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

但我想以這種方式制作視圖，並將一天中的時間放在左側：

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

點擊上方按鈕面板上的“星期”即可查看。

如何配置使其看起來像這樣？

謝謝！

Answer 1

您要使用defaultView屬性。 如docs中所指定的，這將設置日歷加載時的初始視圖。 您想要的特定視圖是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>