CSS Customization

This article describes the various techniques for customizing the CSS of your calendar.

When NOT to use CSS customization

Firstly, you should NOT use CSS customization if a setting already exists for what you want to achieve. For example, if you want to change the color of the events on your calendar, use the eventColor setting. For more event-related visual customization settings, see Event Display.

Technique 1) Custom Properties

To surgically customize CSS, set custom properties on the root selector:

:root {
  --fc-border-color: black;
  --fc-daygrid-event-dot-width: 5px;
}

This example customizes just two variables, but there are many more! You can browser fullcalendar’s source code to see all available variables:

• common CSS variables
• daygrid CSS variables
• list CSS variables
• and potentially other plugins, located in <package-root>/src/styles/vars.css

Technique 2) Overriding Properties

Use the Chrome DevTools or equivelant to pinpoint the element you want to customize. Then, view its active CSS statements. For example, if you want to customize the day-of-week headers at the top of dayGrid view, you’ll see this CSS:

.fc .fc-col-header-cell-cushion {
  display: inline-block;
  padding: 2px 4px;
}

Imagine you want to adjust the top/bottom padding which is curently set to 2px. Include this statement in a stylesheet somewhere else in your project:

.fc .fc-col-header-cell-cushion { /* needs to be same precedence */
  padding-top: 5px; /* an override! */
  padding-bottom: 5px; /* an override! */
}

As long as your statement is loaded AFTER fullcalendar’s stylesheets, your padding will take effect. If your statement is NOT written after, or if your statement does not have the same precedence as the original, you’ll need to think about CSS precedence and specificity.

While this technique is rather simple to implement, it is brittle because if fullcalendar adjusts its CSS statements in future versions, you might need to adjust your CSS as well.