Calendar view UI customization

The calendar view's UI can be customized using the design system object.

This page contains some sample scenarios and how to acheive them.

Scenario 1 - Customizing how a calendar item is displayed

In some applications, the appearance of the calendar items should vary depending on various factors determined by the application logic.

To acheive this using the calendar view, load the items using a procedure or data provider and use the "class" field. The class selected here will be used in the control and can be used to customize all aspects of the item's appearance.

To do so the developer can add rules like the ones below (we recommend doing so in the customization design system). These examples show rules for items with class "MyItemClass".

.MyItemClass .K2BT_CalendarDayItemDescription {
   //Customize how the description is shown (changing colors, changing font properties)
}

.MyItemClass .K2BT_CalendarDayItemHourPeriod {
   // Customize how the item hour period is shown (changing colors, changing font properties)
}

.MyItemClass .K2BT_CalendarBackground {
   // Customize the item's background
}

These are just some common examples, the possible CSS selectors combining the item class and the classes used in the item's HTML structure provide a broad range of options.

Scenario 2 - Adding scroll to the calendar view

In some cases the Start/End hour of the calendar view control define a range that is greater than the one commonly used by the user.

For example, the calendar may show all hours (0-23), but the user rarely uses the hours before 7am.

In those cases, you can add this rules to add scroll to the grid view:

    .K2BT_CalendarPeriod {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        height: 600px;
        overflow-y: auto;
        align-items: stretch;
        justify-content: stretch;
    }

    .K2BT_CalendarDayViewHeader {
        display: flex;
        align-items: center;
        flex-direction: column;
        color: $colors.k2bt_onsurface02;
        position: sticky;
        top: 0px;
        background: #fff;
        z-index: 1;
    }

    .K2BT_CalendarDayHour{
        scroll-margin-top: 70px;
    }

This should be used toghether with the ScrollToHour method in the grid view to select the default scroll position.