TimeGrid View - Fullcalendar

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 individual packages like so:

npm install --save \
  @fullcalendar/core \
  @fullcalendar/timegrid

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/core'
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/core'
import timeGridPlugin from '@fullcalendar/timegrid'

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

View a demo »