calendar

Creates a swipeable calendar as a monthly view.

Field Configurations

Key	Type	Description	Default Value
"activeMonthBackgroundColor"	Color	The background color for the dates of the current month of the current year.	"transparent"
"activeMonthFontColor"	Color	The font color for the dates of the current month of the current year.	"#000000"
"backgroundColor"	Color	The background color of the layer.	"transparent"
"firstDayOfWeek"	FirstDayOfWeek	First day of the week	"mo"
"font"	String	The font to be used for the dates.	null
"fontSize"	UnitSize	The font size for the dates.	null
"highlightColor"	Color	The background color for the current date.	"#000000"
"highlightFontColor"	Color	The font color for the current date.	"#FFFFFF"
"inactiveMonthBackgroundColor"	Color	The background color for the dates of the month that is not current month.	"transparent"
"inactiveMonthFontColor"	Color	The font color for the dates of the month that is not current month.	"#000000"
"items"	Array	undefined	null
"lineColor"	Color	Border color for each date.	"transparent"
"maxDate"	String	Maximum date to which the user can swipe.	null
"minDate"	String	Minimum date to which the user can swipe.	null
"monthFont"	String	The font to be used for the month names displaying in header.	null
"monthFontColor"	Color	The font color for months.	"#000000"
"monthFontSize"	UnitSize	The font size for the month names displaying in header.	null
"monthFormat"	String	Format to display the current month.	"MMMM YYYY"
"query"	String	Query to retrieve data.	null
"queryParams"	Array	Parameters for the query.	null
"scrollDirection"	ScrollDirection	The direction the calendar can scroll.	"vertical"
"selectionEvent"	String	The event to trigger when user selects a date in the calendar.	null
"showMonth"	Boolean	Determines whether the title should be displayed with the month.	true
"startDate"	String	Date with month that is at the beginning.	null
"table"	String	Table containing the calendar entries	null
"template"	String	Template for the data.	null
"weekDayFont"	String	The font to be used for the weekday names.	null
"weekDayFontColor"	Color	The font color for weekdays.	"#000000"

Inherited

From Base Layer

Base Layer

Field Configurations

Key	Type	Description	Default Value
"_value"	Value	[PREVIEW] Dynamic value of the layer.	null
"accessibilityAppendState"	String	Defines this layer appends its state to the accessibility text.	null
"accessibilityText"	String	Text for accessibility navigation. Can be translated.	null
"actions"	ActionList	List of actions, which will be executed when the layer is tapped.	null
"borderColor"	Color	The color of the border in hex color value.	null
"borderRadius"	UnitSize	The radius applies to all corners; with a borderWidth of 0 the border is not drawn and radius is set anyway.	0
"borderWidth"	UnitSize	The width of the border.	0
"bottomLeftRadius"	UnitSize	Radius for the bottom left corner.	0
"bottomRightRadius"	UnitSize	Radius for the bottom right corner.	0
"classes"	Array	List of classes for layer styles.	null
"conditions"	Conditions	List of conditions to alter the layer state.	null
"constraints"	Constraints	A list of constraints defining the position of the layer in a layout.	null
"consumesKeyboard"	Boolean	This layer will be used to shrink, if a keyboard is shown.	null
"dataKey"	String	Name for assigning data to this layer.	null
"focusColor"	Color	The highlight color of this layer when it is focused. Mainly used on TV. If no color is provided, the pressedColor will be used.	null
"hidden"	Boolean	Indicates whether the layer is hidden. Default: false.	false
"isAccessibilityElement"	String	Defines if this layer is important for accessibility navigation. The default depends on the layer type.	null
"layerRotation"	Number	The layer is rotated by the specified degree.	0
"name"	String	Unique name in the layout. Used for alignment or actions.	null
"opacity"	Number	The opacity of the layer.	1
"overInsetBottom"	Boolean	Determines if this layer ignores the save space at the bottom of the device.	false
"overInsetTop"	Boolean	Determines if this layer ignores the save space at the top of the device.	false
"pressedColor"	Color	The highlight color of this layer when it is pressed. Mainly used on TV. If no color is provided, the focusColor will be used.	null
"safeArea"	SafeAreaTypeObject	Determines the safe area behaviour.	null
"shadowElevation"	Number	The elevation of this layer for casting shadows.	0
"state"	String	The state the layer will use as default.	"default"
"states"	LayerStates	A list of named states that affect the appearance of the layer.	null
"topLeftRadius"	UnitSize	Radius for the top left corner.	0
"topRightRadius"	UnitSize	Radius for the top right corner.	0
"touchFeedback"	TouchFeedback	Determines if the layer should show a touch feedback if touched.	"visible"
"trackingKey"	String	Defines a key for a scroll event.	null
"type"	LayerType	The type of the layer	null
"value"	Value	(Initial) value of the layer.	null

Examples

Example 1: Swipeable calendar layer

Show ExampleHide Example

The calendar entries are retrieved from a database table and mapped using a client template.

{
  "type": "calendar",
  "activeMonthBackgroundColor": "#f3f3f3",
  "activeMonthFontColor": "#2f96b4",
  "inactiveMonthBackgroundColor": "#b1b2b2",
  "inactiveMonthFontColor": "#bf4797",
  "highlightColor": "#2f96b4",
  "lineColor": "#2f96b4",
  "monthFontColor": {
    "light": "#202424",
    "dark": "#d2d3d3"
  },
  "weekDayFontColor": {
    "light": "#202424",
    "dark": "#d2d3d3"
  },
  "monthFontSize": "20pt",
  "template": "calendarEntry",
  "table": "calendar",
  "query": "all"
}

{
  "name": "calendarEntry",
  "content": {
    "text": "{{eventTitle}}",
    "date": "{{eventDate}}",
    "color": "{{eventColor}}",
    "fontColor": "{{eventFontColor}}"
  }
}

The appearance of the calendar can be customized with various fields.