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:

1. Title
2. Start time
3. "Always full days": If it should always be displayed as full days regardless of time
4. End time
5. 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, and also choose what the first day of the week should be. This defaults to sunday.

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 configuration

When you have configured the Calendar in the settings, go to the View for the limetype you want to set up a calendar tab for.

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>"
        }
    }
}

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"
}