Docs TimeGrid View

A TimeGrid view displays one-or-more horizontal days as well as an axis of time, usually midnight to midnight, on the vertical axis. Either install via script tags or ES build system.

There are numerous other options throughout the docs that affect the display of TimeGrid view, such as the date/time display options and locale-related options.

Week & Day View

The following example shows how to toggle between timeGridWeek and timeGridDay:

import { Calendar } from 'fullcalendar'
import timeGridPlugin from 'fullcalendar/timegrid'

const calendar = new Calendar(calendarEl, {
  plugins: [timeGridPlugin],
  initialView: 'timeGridWeek',
  headerToolbar: {
    left: 'prev,next',
    center: 'title',
    right: 'timeGridWeek,timeGridDay' // user can switch between the two
  }
})

View a demo »

Custom Duration

You can create TimeGrid views with arbitrary durations. The following creates a 4-day view:

import { Calendar } from 'fullcalendar'
import timeGridPlugin from 'fullcalendar/timegrid'

const calendar = new Calendar(calendarEl, {
  plugins: [timeGridPlugin],
  initialView: 'timeGridFourDay',
  views: {
    timeGridFourDay: {
      type: 'timeGrid',
      duration: { days: 4 }
    }
  }
})

View a demo »