In this video, we'll take a look at the display and header settings for our FullCalendar view.

  • On the view settings page for the calendar view, click "Settings" next to "Format"

Display settings

  • Initial Display: Month (This is the calendar display that is visible when the page is first loaded. We can show the month view, week view, or day view, and the week and day views both have "agenda" and "basic" view modes to choose from. Let's take a look at each of them real quick.)
    • Month (This is the view we've been looking at up to this point.)
    • Week (Agenda) (This shows the current week, with times on the left-hand side of the calendar, and events expand vertically from the start time to the end time.)
    • Week (Basic) (This shows the current week, without time indicators. Events are simply listed in chronological order on the date they occur.)
    • Day (Agenda) (This is just like the Week (Agenda) option, but only shows one day at a time.)
    • Day (Basic) (This is just like the Week (Basic) option, and shows all events for a single day listed in chronological order.)
  • Week starts on: Sunday (If your calendar starts on a different day of the week (ie: Monday) you can set that here.)
  • Week mode: Fixed (This setting only affects the month view. It has three options, Fixed, Liquid and Variable. You can click the "More info" link for more info, but here are the basics.)
    • Fixed (The calendar will always be 6 weeks tall and the height of each week will always be the same.)
    • Liquid (The calendar will have either 4, 5, or 6 weeks, depending on the month and the height of the weeks will stretch to fill the available height. So, if the calendar height is set to 500px, each week in a month with four weeks will be taller than the weeks in a month with six weeks because they will both adjust to a height of 500px.)
    • Variable (The calendar will have either 4, 5, or 6 weeks, depending on the month and each week will have the same constant height, meaning the calendar’s height will change month-to-month. This means that a month with 6 weeks may have a height of something like 600px while a month with 4 weeks might only be 400px in height.)

Header Settings

The header settings let you decide where to display the Title, Previous, Next, Today, Previous Year, Next Year, and other view mode buttons (Month, Week, Day). For details on what to enter for each option, click the "More info" link.

  • Left: today prev,next (This will display the "Today" button to bring today into view. As well as the "Previous" and "Next" buttons to navigate through the calendar.
  • Center: title (This will show the title that we set in the "Time/Date Settings" section in the last video.)
  • Right: month agendaWeek agendaDay (This will show links to view the Month, Agenda Week and Agenda Day view modes. If you'd like to use a different view mode, click the "More info" link, and then click the "Available Views" link on that page. Then just copy and paste the view you would like to use.)

In the next video, we'll take a look at the last two sections on this page: Style Settings, and Customize Fields. Then we'll see how Ajax can improve the calendar load speed.