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!

you need to change your vie to agendaWeek Docs . you can use changeView function — Max Novich
Things may have changed, I ended up using the timeGrid plugin to get this to work with timeGridWeek for the view - fullcalendar.io/docs/timegrid-view — Marvel Moe

MikeSmithDev MikeSmithDev · Accepted Answer · 2015-03-12T13:16:36

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>

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

1 Answers