Using the Calendar Widget

The Calendar widget allows displaying Events either by Month, Week, Day or in the form of a List. Options in the toolbar allow returning quickly to Today and move around using the buttons < and > as well as filtering the data to display.

Calendar Widget in Month View

The widget settings can be edited using a dedicated configurator.

Calendar Widget Configurator

The upper tabs allow configuring the:

  • Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.

  • Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.

  • Toolbar, beneath the widget header, by adding configurable action buttons. For more details, please refer to Section Using the Action API.

  • Custom Controller in charge of customizing the widget behavior, set to None by default.

  • Filters that should only apply to the widget, in addition to any filters set at a more global level, such as the Filter widget. For more details, please refer to Section Using the Filter Widget.

The main tabs allow configuring the:

  • Calendar properties, such as the:

    • Default view, either Day, Week, Month or List;

    • Button display options, such as Hide Previous/Next navigation buttons, Hide Month button, Hide Week button, Hide Day button, Hide List button, and Hide Today navigation button;

    • Show business hours option, which grays out time spans in the calendar that do not concur with the parameters set via the options Business days, Business start time, and Business end time;

  • Events to display, using the Add event and Delete event buttons, by setting, for each, the:

    • Event Type, i.e. the entity corresponding to the event(s) to display;

    • Event Name, i.e. the type of event(s) to display;

    • Start time, i.e. the entity attribute that corresponds to the event(s) start time;

    • End time, i.e. the entity attribute that corresponds to the event(s) end time;

    • Label, i.e. the entity attribute that corresponds to the event(s) label;

    • Tooltip, i.e. the entity attribute that corresponds to the text to display in the tooltip when hovering over the event(s);

    • Default event color, which can be changed using the conditional formatting options described below.

    • Background event option, which, when enabled, stacks a semi-opaque layer of the event color in the cell background instead of stacking event labels vertically in the cell. Having multiple events in the same cell merges their colors.

    • Inverted background event option, available only if the Background event option is enabled, which colors only empty cells.

    • Conditional Formatting, available only if the Inverted background event option is disabled, by selecting a Field, i.e. an entity and one of its attribute, and using the button + ADD ANOTHER RULE that displays Custom style options to Apply style when the value Is null, Is not null, Is true or Is false.