Note 1: below examples are for FullCalendar version 5! If you still use FullCalendar 4, see examples and some styling information.

Note 2: in the below examples only the configuration of the Gutenberg block is used. If you use the shortcode make sure to translate the properties to valid shortcode attributes as explained in the Using the plugin page.

FullCalendar documentation

Below you'll find some common FullCalendar properties you can set. But there are many more properties you can set as you can see in the FullCalendar documentation. By seeing the below examples, it should be clear how to add the other properties.

Height, scrollbars and maximum number of events

A major difference between FullCalendar 4 and 5 is the sizing of the calendar. Version 4 had a fixed size and fitted in as much events as possible and showed the "+ more" link for the events that didn't fit in. It didn't show scrollbars as well.

Version 5 shows by default displays all the events and shows a scrollbar if the calendar is becoming too high. The height of the calendar is defined by the aspectRatio property. The higher this value, the less high the calendar will be. Another sizing properties is height. If set to "auto", the calendar will be as high as needed, so scrollbars never appear. If this is set to a specific height (e.g. "700px") then this will be the height and as much events will be displayed as possible and a "+ more" link appears if there are more events.

Two other properties that are important in this area are the dayMaxEventRows and dayMaxEvents properties. If set to true, then as many events as possible are displayed and if set to a specific integer, then this many events are displayed.

For my site I mostly set the dayMaxEvents to true and aspectRatio to 1, as this has the best results, e.g. a calendar with a fixed height that fits in as many events as possible without displaying a scrollbar.

{
  "dayMaxEvents": true,
  "aspectRatio": 1
}

{
  "height": "auto"
}

{
  "height": "700px"
}

Locale

The locale is used for things like the language used for the buttons and the first day of the week. The locale of your WordPress installation is used by default, but you can override this by setting the locale property. For example to set this to Dutch language:

{
  "locale": "nl-nl"
}

First day of the week

The first day of the week is taken from the defined locale, but you can change it explicitly by setting the firstDay property, where 0 is Sunday.

{
  "firstDay": 1
}

Timezone

By default the events are displayed in the timezone of the browser. If you want to change this, use the timeZone property:

{
  "timeZone": "America/New_York"
}

Toolbar

The default toolbar configuration is:

{
  "headerToolbar": {
    "start": "prev,next today",
    "center": "title",
    "end": "dayGridMonth,timeGridWeek,listWeek"
  }
}

If you want to have the title on the left, also show buttons for previous and next year and remove the buttons to switch views:

{
  "headerToolbar": {
    "start": "title",
    "center": "prevYear,prev,next,nextYear today",
    "end": ""
  }
}

See FullCalendar docs.

There is also a footerToolbar property. If you want to have a footerToolbar and no headerToolbar, you have to explicitly set the headerToolbar to null:

{
  "headerToolbar": null,
  "footerToolbar": {
    "start": "title",
    "center": "prevYear,prev,next,nextYear today",
    "end": ""
  }
}

Disable weekends

Set the weekends property to false if you want to disable Saturday and Sunday.

Week numbers

Set weekNumbers to true if you want to display weeknumbers.