Skip to main content
Version: 8.1

Set up Calendar component

Level: beginner

Use Calendar component to display records of any object as a set of tiles on a calendar.

Example

Set up the Calendar component that displays marketing events. Enable users to filter the events by date and record owner.

Fig. 1 Set up a Quick filter component that uses a custom filter
Fig. 1 Set up a Quick filter component that uses a custom filter
  1. Drag a Calendar component to the canvas and open the component setup area.

  2. Select "Event" in the Object parameter. After you select an object, Creatio attempts to populate some component fields automatically.

  3. Specify the column that contains the record start date in the Start date column parameter. For this example, leave the automatically populated value.

  4. Specify the column that contains the record end date in the End date column parameter. For this example, select "End."

  5. Specify the column that contains the title of the tile in the Primary display field parameter. For this example, leave the automatically populated value.

  6. Select how to color code the tiles in the Tile colorization mode parameter. The following modes are available:

    • Default. Uses out-of-the-box palette that contains shades of blue.
    • Automatic. Uses color coding specified in the selected lookup. Learn more: Manage lookup values. If the lookup does not have color coding, the component assigns a random palette each time you select the lookup.
    • By user (only available for "Activity" object). Colors each tile based on the activity owner.

    For this example, select the Automatic mode.

  7. Select Owner in the Lookup parameter.

  8. Click next to the Apply filter by page data parameter to filter calendar data by page data source, Approvals list, Attachment list, or List component. For this example, do not set up these filters.

  9. Click next to the Apply filter by page data parameter to filter calendar data by a Quick filter or Search component. For this example, connect the component to Quick filter components later.

  10. Click Setup filter to set up a static filter that is always applied to the list. The filter setup process is similar to general filter setup. Learn more in a separate article: Advanced filter. For this example, set up the do not set up the static filter.

  11. Click next to the Secondary tile fields group to add one or more fields that contain subtitles of the tile. For this example, select the Owner column → Select.

  12. Click the or button in the Visibility group to make the component visible or invisible by default on the page, respectively. For this example, leave the component visible.

  13. Click Setup conditions in the Visibility group to set up element business rules. For this example, do not add business rules. Learn more about setting up business rules in a separate article: Set up business rules.

  14. Select the column that contains links to the online meeting related to the record in the Field with online meeting information parameter. Creatio parses the link from the selected field. For the example, leave the automatically populated value.

  15. View the unique component code in the page schema in the Element code parameter. Creatio uses this code in page schemas. You can change it if needed. This helps software developers to customize the app easier, especially if you have multiple similar components on the page. For this example, leave the code as is.

  16. Set up a date/time Quick filter component that filters calendar records by "Start" and "End" columns. Connect the filter to the Calendar component. Learn more: Set up Quick filter components.

  17. Set up a lookup Quick filter component that filters calendar records by "Owner" column. Connect the filter to the Calendar component. Learn more: Set up Quick filter components.

As a result, Creatio will add the Calendar component that displays events to the page. Users will be able to filter event records by date and record owner.


See also

Overview of Freedom UI Designer and its elements

Set up the app UI

Set up business rules

Localize a Freedom UI element

Tech Hour: UI/ UX Building pages in Freedom UI Designer

Tech Hour: UI/ UX Best practices in Creatio