Calendar component

Level: beginner

Use the Calendar component to display calendar events.

View the example of a configuration object that embeds external content into a page below.

Example of a configuration object that embeds external content into a page
{
    "type": "crt.Calendar",
    "templateValuesMapping": {
        "startColumn": "StartDate",
        "endColumn": "DueDate",
        "titleColumn": "Title",
        "notesColumn": "Notes",
        "colorizationColumn": "Status.Color"
    },
    "colorizationType": "byField",
    "items": "ItemsAttribute",
    "dateRange": "CalendarSelectedDate",
    "viewMode": "CalendarViewMode",
    "focusDate": "CalendarPickerFocusDate",
    "createItem": {
        "request": "crt.CreateCalendarRecordRequest",
        "params": {
            "entityName": "Activity",
            "defaultValues": [
                {
                    "attributeName": "ShowInScheduler",
                    "value": "true"
                }
            ]
        }
    }
}

string type

Component type. crt.Calendar for the Calendar component.

object templateValuesMapping

Data source columns to bind.

Parameters

Name	Type	Description
string startColumn	Required	Column that stores start date of calendar events.
string endColumn	Required	Column that stores end date of calendar events.
string titleColumn	Required	Column that stores title of calendar events.
string notesColumn	Optional	Column that stores additional details of calendar events.
string colorizationColumn	Optional	Column that stores custom color of calendar events.

string colorizationType

The data source attribute that stores calendar colorization modes from the viewModelConfig schema section. Requires the colorizationColumn property.

Set up calendar colorization

Add a column that stores a custom color to data source. Instructions: Implement the data source (steps 1-3).

View the configuration object example that implements the data source of the Activity object below.

Configuration object example that implements the data source
"modelConfig": {
    "primaryDataSourceName": "PDS",
    "dataSources": {
        "PDS": {
            "config": {
                "entitySchemaName": "Activity",
                "attributes": {
                    "Status.Color": {"path": "Status.Color"}
                }
            }
        }
    }
}

Open the mobile app manifest.
Go to the SyncOptions schema section → ModelDataImportConfig.
Add a configuration object of a custom column.
Save the changes.

View the configuration object example that registers a custom column of the ActivityStatus object below.

Configuration object example that registers a custom column
/* Synchronization settings.*/
"SyncOptions": {
    ...,

    /* An array of models that loads data during synchronization. */
    "ModelDataImportConfig": [

        /* "ActivityStatus" model configuration. */
        {
            "Name": "ActivityStatus",
            ...,
            /* An array of the model columns for which data is imported. */
            "SyncColumns": [
                "Color"
            ]
        },
        ...,
    ]
}

string items

The data source attribute from the viewModelConfig schema section.

string dateRange

The data source attribute that stores time interval from the viewModelConfig schema section.

string viewMode

The data source attribute that stores calendar display modes from the viewModelConfig schema section. For example, day, 3 days, week.

string focusDate

The data source attribute that stores date from the viewModelConfig schema section. For example, current date.

object createItem

Configuration object that configures parameters of calendar event to create in the Calendar component. For example, tasks.

See also​

See also