Calendar
The SenseOps Calendar Extension provides an easy and interactive way to work with dates inside Qlik Sense dashboards. Whether you need a simple date picker or quick access to commonly used date ranges, the extension offers flexible options along with styling controls to match your dashboard’s design. This guide explains the features available and how to configure the calendar in your app.
Accessing the Calendar Extension
Step 1. Open Your Qlik Sense Application: Open the app where you want to use the calendar.
Step 2. Enter Edit Mode: Go to your sheet and switch to edit mode to add or configure objects.
Step 3. Open Custom Objects: In the left panel, select Custom Objects.
Step 4. Select SenseOps: Locate the SenseOps category under custom extensions.
Step 5. Add the Calendar Extension: Drag the SenseOps Calendar object from the list and drop it onto the sheet.
Features
| Feature | Description | Scenario |
|---|---|---|
| Date Field Binding | Select which date field from the data model the calendar should use. | Bind “Invoice Date” to filter sales charts. |
| Single or Range Selection | Choose between selecting a single date or a date range. | Pick a single billing date or a period such as 01–10 March. |
| Predefined Date Ranges | Display quick-select ranges like Last 7 Days, MTD, YTD, etc. | Users can instantly filter to “Last 30 Days.” |
| Custom Date Ranges | Add your own date range presets. | Can create custom ranges such as “Last 20 Days” or “Last 2 years.” |
| Calendar Label | Show a label above the input and customize its text, color, and style. | Rename the label to “Order Date” in blue bold text. |
| Placeholder Text | Set custom placeholder text for the date input. | Show “Select date” when no date is chosen. |
| Date Format Options | Choose from multiple date formats or use a custom format. | Display dates as DD/MM/YYYY or 17-Feb-2016. |
| Week Start Day | Select Monday or Sunday as the first day of the week. | Match your regional calendar preference. |
| Input Width Control | Allow the input to stretch and fill available space. | Use “Fill” to align the calendar field with other objects. |
| Picker Placement | Control where the date picker appears relative to the input. | Place the picker at "Bottom Start" for better visibility. |
| Appearance Styling | Customize cell colors, button colors, text colors, and borders. | Match the calendar design with your app theme. |
| Selection Bar | Show a bar displaying selected dates and choose its position. | Display selected dates at the bottom of the input field. |
| Advanced Mode Styling | Unlock detailed styling controls for labels, cells, and range buttons. | Apply highly customized designs. |
Configuration Options
Field
Date Field
This dropdown lists only the fields identified as date fields in your data model. Select the appropriate date field from this list to drive calendar selections in the app. The calendar will filter your data based on the field you choose.
Settings
1. Selection Bar
You can show or hide the bar that displays the selected date or date range, and choose whether it appears at the top or bottom of the input field.
2. Date Picker Mode
Choose whether users should select a single date or a date range, depending on your dashboard’s requirement.
3. Calendar Label
Enable or disable the label above the input field, customize its text, and adjust its color and font style to match the rest of your sheet.
4. Placeholder Text
Set a clear and meaningful placeholder so users know what to select when no date is chosen.
5. Input Width
Use the Fill option to automatically expand the calendar input to match the width of surrounding objects, helping maintain layout consistency.
6. Picker Placement
Choose where the calendar popup should appear.
Date Settings
1. Date Range Mode
Choose whether the calendar should automatically use the minimum and maximum dates from your selected field (Auto) or let you set your own limits (Custom) by entering the Min and Max dates along with their formats.
2. Date Format
Select how dates should appear in the input. You can use preset formats like 17/02/2016, 02/17/2016, 17-Feb-2016, or simply choose Auto. If none of the presets match your requirement, you can apply a Custom format.
3. Week Start Day
Decide whether the calendar week should begin on Monday or Sunday, depending on your regional or organizational preference.
Date Ranges Panel
The calendar supports predefined and custom quick selection date ranges.
Enable Date Ranges
Enable this option if you want date ranges available for users.
Built-in Ranges
You can instantly use built-in ranges like Last 7 Days, Last 30 Days, MTD, YTD, and Last 12 Months to help users make quicker selections.
Customize Ranges
Each range:
- Expands for configuration
- Can be reordered using the drag handles
- Can be renamed
- Can be deleted
- Supports adding a new range via Add Date Range
This allows the calendar to match your reporting needs.
Appearance
The Calendar Extension includes an extensive set of appearance settings so that the calendar can blend seamlessly with your Qlik Sense theme.
1. Cell Background
Customize how date cells look by setting the default background color for unselected dates and a separate background color for selected dates. You can choose to use default settings or switch to custom colors.
2. Cell Text Color
Control the text color for both regular and selected date cells, ensuring clarity and alignment with your theme.
3. Date Range Panel Styling
Choose whether the panel containing the ranges should appear on the left or right side of the calendar.
4. Button Stylings (Date Range Buttons)
Adjust the styling of date range buttons by modifying their background color, text color, borders, and corner radius so they visually match the rest of your dashboard.
5. Qlik Object Settings
Style the overall calendar container by modifying border type, size, radius, and color. You can also remove padding if you want the calendar to align tightly with other objects.
Advanced Mode
Advanced Mode unlocks deeper styling options, giving you greater control over the appearance of labels, date cells, and date range buttons. These options allow fine-tuning of visual consistency across your app.
Advanced Options
1. Label Customization
You can set the label color, define its font size, and choose where the label should appear—inline, above, or below the input. You can also control its alignment (left, center, or right).
2. Date Cell Styling
You can define separate background colors and text colors for default, selected, and hover states, allowing you to fine-tune exactly how each date cell behaves and looks.
3. Date Range Button Styling
Adjust button-level properties such as background color, text color, border radius, border size, and border color to ensure consistency with your overall design.