Calendars
The events of a single calendar can be sorted into different categories, called calendars. For example, this can be useful if you want to display a calendar each for a specific team, department or school class, all in one user interface. The calenders can then be distinguished by their color.
Configuration
In the calendar configuration object, there is a property called calendars.
Each calendar needs a name, which is then referenced as calendarId in the events. The name can be freely chosen,
as long as it can be used a JavaScript object key as in the example below, where we have the calendars personal,
work, leisure and school. The value of colorName can only contain lower key characters, since this will
internally be used as part of a custom CSS property.
You do not need to define colors for dark- and light mode unless you use them both.
Example
const config = {
// ... other configuration
calendars: {
personal: {
colorName: 'personal',
lightColors: {
main: '#f9d71c',
container: '#fff5aa',
onContainer: '#594800',
},
darkColors: {
main: '#fff5c0',
onContainer: '#fff5de',
container: '#a29742',
},
},
work: {
colorName: 'work',
lightColors: {
main: '#f91c45',
container: '#ffd2dc',
onContainer: '#59000d',
},
darkColors: {
main: '#ffc0cc',
onContainer: '#ffdee6',
container: '#a24258',
},
},
leisure: {
colorName: 'leisure',
lightColors: {
main: '#1cf9b0',
container: '#dafff0',
onContainer: '#004d3d',
},
darkColors: {
main: '#c0fff5',
onContainer: '#e6fff5',
container: '#42a297',
},
},
school: {
colorName: 'school',
lightColors: {
main: '#1c7df9',
container: '#d2e7ff',
onContainer: '#002859',
},
darkColors: {
main: '#c0dfff',
onContainer: '#dee6ff',
container: '#426aa2',
},
},
},
events: [
// ... other events
{
title: "Meeting with Mr. boss",
start: "2024-01-05 05:15",
end: "2024-01-05 06:00",
id: "98d85d98541f",
calendarId: "work"
}, {
title: "Sipping Aperol Spritz on the beach",
start: "2024-01-05 12:00",
end: "2024-01-05 15:20",
id: "0d13aae3b8a1",
calendarId: "leisure"
},
]
}