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

Question

Default weekview is like this one, no time of the day on left side:

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

but I'd like to make the view this way, with time of the day on left side:

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

click 'week' on upper button panel to see it.

How do I configure it to make it looks like this way?

Thanks!

Answer 1

You want to use the defaultView property. This sets, as specified in the docs , the initial view when the calendar loads. The specific view you want is agendaWeek ( list of available views ).

So when you initialize your calendar, you'll put defaultView: 'agendaWeek' .

Example:

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