Calendar Properties
The property panel contains all configuration settings for your Vizlib Calendar, organized into dimensions, date settings, settings, appearance, and interactivity sections.
This topic contains the following sections:
Dimensions, Measure, Heatmap
Vizlib Calendar supports one date dimension which needs to have the $timestamp metadata tag assigned to it by the Qlik Sense data model. The Vizlib Calendar Wizard provides you with a list of available date dimensions. Dimensions can be linked to a Measure expression, a Marker (Icon) or a Heatmap to display dimension values using a range of colors
Dimensions
The Field and Label settings for the dimension are listed first. Field text should not contain any symbols e.g. using =[Invoice Date] would be incorrect.
Figure 1: Dimensions
Measure
You can enable Measure expression settings if you'd like to link the dimension to a measure expression and display a number which relates to a date field you've selected (e.g. a price). You can enter a Measure Expression and choose from Auto, Number, Money, Date, Duration and Custom for your Measure Formatting.
Figure 2: Measure
Marker
Enabling the Marker settings allows you to display an Icon in the top right corner of a cell of a date field you've selected. You can click the icon to select a new one, set the symbol Size, customize the icon Color, and change the Icon Opacity.
Figure 3: Marker
Heatmap
Heatmap settings apply a heatmap to the calendar, with a choice of settings. You can enter your own color selection in the Measure Expression field, while Gradient Color varies the shading according to a date's position in the calendar, and you can choose from a variety of color sets or adding your own. With Sequential Color, you can specify two colors and display a range between them. Expression Color lets you enter an expression for a specific color, and you can also choose to Reverse Colors and set a Null Value Color.
Figure 4: Gradient Color Heatmap
Note: Note: The Color range in this example is truncated, you can see the full range in your Qlik Sense Hub.
Date Settings, Data Ranges
These settings control how the date field is formatted, presented, and how date ranges are configured.
Date Settings
The Date Settings section controls how the date field will be formatted and presented. You can customize the Date range, to set the Min Date and Max Date and choose a Date Format from the drop-down. You can also set the Week start day, choose to Hide weekends and Unlock calendar view.
Figure 5: Date Settings
You can also choose to display Week day names, select a Day Format, choose a Label Color, Background Color, Font Size, Label Font Style and Calendar Locale, setting the language for year, month and day names.
Figure 6: Weekday Names
You can also enable Holidays, and enter a comma separated list of dates, setting the Cell background and the Text color.
Figure 7: Holidays
Data Ranges
When you choose to show Date Ranges, you'll be able to set a custom date range, setting the Custom Range Name, the Range Direction, the Date Range Value, and opt to Exclude Weekends. You can also choose a Range Unit and see a Preview the date range label.
Figure 8: Date Ranges
Note: The software always includes today in addition to the selected date range. For example, selecting the next three days displays four days in total: today plus the three following days.
Settings
The Settings section covers properties and settings which control the main behavior and look and feel of your Vizlib Calendar.
Settings, Selection Bar, Date Picker, Display View
If you choose Advanced settings, you'll display all the options available for customizing the calendar. Basic mode offers a more limited choice. You can also display a Selection Bar (if the display view is collapsed) and set its position, select a category of Date Picker (a single date or a date range with a start and end) and choose a Display View to show the full calendar or collapse it into a dropdown.
Figure 9: Settings, Selection Bar, Date Picker, Display View
Placeholder Text, Calendar Label
You can enter some Placeholder Text to display a message if no selections have been made in the calendar, and show a Calendar label, setting the Label Color, Font Size, Label Font Style and Label Position.
Figure 10: Placeholder Text, Label
Background, Border, Input Width
You can set a Background for the calendar, choosing a Font Color, and choose to display a Border, setting the Border Color, Border Thickness, and Border Radius. You can choose an Input Width, either define the size of the input box as a fixed value or choosing to automatically Fill the box.
Figure 11: Background, Border
Appearance
The Appearance section of the property panel controls styling and formatting options.
General
In the General tab you can choose to show or hide a title, add title details using the expression editors and show or hide calendar details.
Figure 12: General
Alternate States
Alternate States has settings related to adding the object to master visualizations.
Figure 13: Alternate States
Calendar Appearance
Calendar Appearance contains settings where you can modify the appearance and display of the calendar. You can enter your own text for a Main Label, False Value Label, and True Value Label, as well as set the view mode default to Day View or Month View and show or hide input boxes for Selected Dates when the calendar is expanded.
Figure 14: Calendar Appearance
In this section you can also set the color for the Calendar Background, show or hide a Border, set the Border Color, Border Thickness and Border Radius.
Figure 15: Calendar Background and Border
There are also settings to display a Control Panel showing pre-defined date ranges, set the control panel Position and enable the Calendar View Selector to switch between month and day view (the default setting for a Single date picker will be a month view).
Figure 16: Control Panel
Cell Background
Cell Background controls settings related to the cell background in the calendar body. You can choose between standard Qlik Sense styling (grey/white/green logic to indicated excluded, possible and selected days) or define a Custom formatting, where you can choose a Default Color for all days, a Selected Color for selections and a Hovered Color when the cursor hovers over the cell.
You can also choose a Today Color to highlight today (Advanced Mode settings only).
Figure 17: Cell Background
Cell Text Color
Cell Text Color controls settings related to the cell text in the calendar body. You can choose between standard Qlik Sense styling (grey/white/green logic to indicated excluded, possible and selected days) or define a Custom formatting, where you can choose a Default Color for all days, a Selected Color for selections and a Hovered Color when the cursor hovers over the cell. You can also choose a Today Color to highlight today (Advanced Mode settings only).
Figure 18: Cell Text Color
Cell Border
Cell Border allows you to show a Border around the cell, define the Cell Border Color and Cell Border Thickness.
Figure 19: Cell Border
Date Range Buttons
Date Range Buttons controls font and border settings for the date range buttons, allowing you to change the Button Background, Button Font Color, Button Font Size, Button Border Color, Button Border Size, and Button Border Radius.
Figure 20: Date Range Buttons
Size
Size settings control the cell size, and indirectly the size of the calendar body. You can choose the Cell Font Size, the Gap between cells, enable the calendar Auto size function (instead of setting a fixed size), and set a Cell Radius to make the cell view circular.
Figure 21: Cell Size
Interactivity, Alternate State, Vizlib Actions
These settings control how users interact with the Vizlib Calendar and integrate Vizlib Actions.
Interactivity
Interactivity settings allow you to control with Vizlib Calendar. You can choose whether to Allow Selections (de-activating this setting makes the calendar read-only), Allow Quick Select and enable a Persist Dialog. You can also enable Initial Selection (Experimental) to set a default Initial date to be applied when the sheet is opened, with options to use Only One Selected Date, have the date Always Selected or Run actions with initial selection (Actions are run when selections are made by clicking. The default selection is made without clicking, a developer has the property to decide if they want actions to run alongside the default selection).
There are two options for Selection Behaviour: Qlik (selections in the calendar are added to existing selections) and Override (new selections override existing selections in the calendar).
Note: Initial Selection should only contain available and selectable dates for the chosen date field.
You can also choose to display a Qlik Sense native Full-screen icon and a Snapshot icon.
Note: The snapshot icon has been part of the Hover Menu since the Qlik Sense September 2020 release, and is no longer controlled using the property panel.
Figure 22: Interactivity
Alternate State
Alternate State allows you to assign a Vizlib Calendar object to an alternate selection state. If you want to add the object to master visualizations, you need to set State to Inherited, and you can also enable the Alternate States Manager in the published app.
You can find more information about working with alternate states here.
Figure 23: Alternate State
Vizlib Actions
Vizlib Actions allow you to integrate actions into your calender. Click Add Action, then select an option from the Pick Action drop-down and add the information you need (this example uses Selection in Field). You can find out more about the full range of Vizlib Actions here.
Figure 24: Vizlib Actions