Configuration¶
To start using the calendar views, you need to configure:
- Application config
- Lime Admin
Application config¶
Info
To get a license key, please reach out to one of the package developers
If you're using the Ressource calendar view, you have to set a license key in the application config:
solution-<Your solution name>:
secrets:
fullcalendar:
license-key: <Your license key>
Lime Admin¶
To add calendar configurations, you have to go into Lime Admin --> Settings --> Calendar --> Calendar configurations, where you can then add items for each type of calendar view.
From there, you give it a name, that you will use when setting up the view on a limetype, and you choose what limetype you want it on.
Calendar Item¶
You also have to choose the properties for the following configurations on a calendar item:
- Title
- Start time
- "Always full days": If it should always be displayed as full days regardless of time
- End time
- Colors: Here you should choose a property the should decide the color, if events should have different colors. There's also the possibilty to change the default color for events, and choose a property for the border color.
View Options¶
Depending on if you choose Grid or Timeline as view, you will get different options to configure. In both, you will the option to Capitalize headers, if wanted.
1. Timeline/Ressource calendar¶
The timeline/ressource calendar you can configure the view and what properties should be shown on a ressource.
Under View, you can add multiple views.
You need to configure at least one view! Label is required, together with some other properties:
- Duration: Choose type and length of that type (how many units does the type take up)
- Slot duration: Choose type and length of that type (how many units does the type take up). This must be equal or shorter than the duration
- Top label formatting: Choose if top label (the duration) should be hidden, what type and format it should be.
- Bottom label formatting: Choose if bottom label (the slot duration) should be hidden, what type and format it should be.
They are illustrated in the below picture.
2. Grid calendar¶
With the grid calendar you can choose to display week numbers or not.
Under View, you can add multiple types of views, for example Month, Week or Day, which you will then be able to switch between in the calendar.
You need to configure at least one view! The views needs a label and duration. Additionally you can also confiugre whether to show weekend days or not, and for Month you can choose to include days outside active month.
Card/table configuration¶
When you have configured the Calendar in the settings, you can set it up either on the tableview for a limetype, or on the startpage. This will describe how to set it up on a tableview for the limetype you want to set up a calendar for. When it's set up here, it will also be availabe when going to the tab of a related object.
In the Enabled Views, you can add a new one. Give it a suiting title and icon. Under Custom view, you add the component lwc-limepkg-calendar-calendar-view. Under Properties you specify a property called configName, which should have the name of the calendar item you gave it earlier. Here is an example view config:
{
"title": "Calendar view",
"icon": "calendar_1",
"view": {
"name": "lwc-limepkg-calendar-calendar-view",
"props": {
"configName": "<Title from Calendar item>"
}
}
}
Info
There's a default limit of max 100 items shown in the calendar. If you want to show more, you can add a property called "filterLimit" under props to increase it up until a 1000. For example, to show max 500 items, you add:
{
"title": "Calendar view",
"icon": "calendar_1",
"view": {
"name": "lwc-limepkg-calendar-calendar-view",
"props": {
"configName": "<Title from Calendar item>",
"filterLimit": 500
}
}
}
Startpage configuration¶
When you have configured the Calendar in the settings, it's also possible to set up on the startpage. To do this, you need to navigate to the startpage configuration in Lime Admin. From here, on a startpage of your choice, you can add a webcomponent called limec-object-explorer-widget. From here, you can then choose a limetype that you have configured calendar for, and then in views, you add the lwc-limepkg-calendar-calendar-view component. Configure it in "Properties" where you specify a property called configName, which should have the name of the calendar item you gave it earlier. Here is an example view config:
{
"configName": "<Title from Calendar item>"
}
Warning
When adding the calendar view on the startpage, the size needs to be big enough to show the calendar properly. It's recommended to set the size to at least a medium rectangle or bigger.
Info
There's a default limit of max 100 items shown in the calendar. If you want to show more, you can add a property called "filterLimit" under props to increase it up until a 1000. For example, to show max 500 items, you add:
{
"title": "Calendar view",
"icon": "calendar_1",
"view": {
"name": "lwc-limepkg-calendar-calendar-view",
"props": {
"configName": "<Title from Calendar item>",
"filterLimit": 500
}
}
}
Example config¶
An example config of a grid view on todo, that has a month, week and day view:
{
"calendar_item": {
"title": {
"property_path": "subject"
},
"starttime": {
"property_path": "starttime"
},
"allways_full_day": false,
"endtime": {
"property_path": "endtime"
},
"colors": {
"default_color": "rgb(var(--color-blue-light))",
"color_property": "id"
}
},
"view_options": {
"capitalize_headers": true,
"show_week_numbers": true,
"first_day_of_week": 0,
"views": [
{
"is_default": true,
"show_weekends": true,
"show_non_current_dates": false,
"label": "Month",
"duration": "dayGridMonth"
},
{
"is_default": false,
"show_weekends": true,
"duration": "timeGridWeek",
"label": "Week"
},
{
"is_default": false,
"show_weekends": true,
"label": "Day",
"duration": "timeGridDay"
}
],
"view_type": "dayGrid"
},
"name": "Grid calendar",
"limetype": "todo"
}
Example of ressource view config with day and week view:
{
"calendar_item": {
"title": {
"property_path": "subject"
},
"starttime": {
"property_path": "starttime"
},
"allways_full_day": false,
"endtime": {
"property_path": "endtime"
},
"colors": {
"default_color": "rgb(var(--color-blue-light))"
}
},
"view_options": {
"capitalize_headers": false,
"first_day_of_week": 0,
"views": [
{
"is_default": true,
"duration": {
"date_type": "day",
"length": 1
},
"slot_duration": {
"date_type": "hour",
"length": 2
},
"slot_width": 25,
"slot_label_format_top": {
"hidden": false,
"formatting": "numeric",
"date_type": "day"
},
"slot_label_format_bottom": {
"hidden": false,
"formatting": "numeric",
"date_type": "hour"
},
"label": "Day"
},
{
"is_default": false,
"duration": {
"date_type": "week",
"length": 1
},
"slot_duration": {
"date_type": "day",
"length": 1
},
"slot_width": 25,
"slot_label_format_top": {
"hidden": false,
"formatting": "numeric",
"date_type": "week"
},
"slot_label_format_bottom": {
"hidden": false,
"formatting": "numeric",
"date_type": "day"
},
"label": "Week"
}
],
"resources": {
"header": "Resources",
"name": {
"property_path": "id"
},
"value": {
"property_path": "subject"
},
"default_name": "",
"sortorder": "id"
},
"view_type": "resourceTimeline"
},
"name": "Ressource calendar",
"limetype": "todo"
}