FullCalendar Themes - sydsutton/FS.FluentUI GitHub Wiki

You can choose between a default theme that doesn't require any plugins:

calendar.themeSystem.standard

You can choose a Bootstrap theme that require plugins and html links:

(In index.html's head)

For Bootstrap5:

<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css' rel='stylesheet'>

, then:

calendar.plugins [ Plugin.bootstrap5Plugin ]
calendar.themeSystem.bootstrap5

For Bootstrap4:

<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css' rel='stylesheet'>
<link href='https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css' rel='stylesheet'>

, then:

calendar.plugins [ Plugin.bootstrapPlugin ]
calendar.themeSystem.bootstrap

OR you can choose between various Bootswatch themes (see full list of themes here):

run npm install bootswatch

calendar.themeSystem.sketchy

NOTE: If using FS.FullCalendar in conjunction with FS.FluentUI, you must place the calendar outside of the root Fui.fluentProvider if you want to use one of the bootswatch themes. If you don't do this, the coloring will still change, but bootswatch won't be able to override styles such as fontFamily.