Vizlib Calendar

Vizlib Calendar is a highly customisable, supported and easy-to-use control component for Qlik Sense which provides features as auto-detection of dates, date ranges, font and size control, interactivity, custom colours, pre-defined selections and lots of styling and formatting options.

Vizlib Calendar
Vizlib Calendar
Vizlib Calendar
Vizlib Calendar
Vizlib Calendar
Vizlib Calendar
Vizlib Calendar
Vizlib Calendar
Vizlib Calendar

Vizlib Calendar is a control component extension and helps you handle and present date fields in a much more user-friendly way, allowing you to build intuitive and compelling dashboards for your users.

Benefits and Features:

  • Developer-friendly Wizard, helps you build the chart with a few clicks
  • Option to use it as a Single Date Picker or Date Range Picker
  • Expanded mode to see the full calendar or collapsed mode to save real estate on the sheet
  • Qlik Selection state aware
  • One-Selected-Value Option
  • Pre-defined date selections when opening the app
  • Vizlib rich formatting options to style your calendar according to your company brand

Download Vizlib Calendar

Up to 5 users free.

Terms & Conditions

Vizlib Calendar

Readme

  1. Installation
    1.1 Qlik Sense Server
    1.2 Qlik Sense Desktop
  2. Features
  3. Extension Settings
    3.1 Dimensions
    3.2 Settings
    3.3 Date Settings
    3.5 Appearance
    3.6 Interactivity
  4. What's new?
  5. Feedback & Bug Reporting
  6. Terms & Conditions


1. Installation

1.1 Qlik Sense Server
  1. Download the .zip file from the link provided your eMail.
  2. Visit the QMC on of your Qlik Sense Server.
  3. Import the .zip file in your extension tab.
  4. Open Qlik Sense and add the 'Vizlib Calendar' extension to a sheet.

1.2 Qlik Sense Desktop
  1. Download the .zip file from the link provided your eMail.
  2. Extract the .zip file to your default extension folder (documents/qlik/sense/extensions) in Qlik Sense.
  3. Open Qlik Sense and add the 'Vizlib Calendar' extension to a sheet.

2. Features:

  1. Developer-friendly Wizard, helps you build the chart with a few clicks
  2. Option to use it as a Single Date Picker or Date Range Picker
  3. Expanded mode to see the full calendar or collapsed mode to save real estate on the sheet
  4. Qlik Selection state aware
  5. One-Selected-Value Option
  6. Pre-defined date selections when opening the app
  7. Vizlib rich formatting options to style your calendar according to your company brand
  8. Up to 5 users free.


3. Extension Settings:


3.1 Dimensions:

The Vizlib Calendar supports one date dimension which needs to have the $timestamp metadata tag assign to it by the Qlik Sense data model. The Vizlib Calendar Wizard will support you in building the component, by providing you with a list of available date dimensions.

3.2 Measures:

The Vizlib Calendar does not support Measures, yet. This is a feature expected to be introduced in the near future.

3.3 Settings
Vizlib Calendar

The Settings section covers properties and settings which control the main behaviour and look and feel of the Vizlib Calendar

  • Settings
    Choose between advanced and basic settings mode. The advanced mode will allow you to see all available settings whereas the basic mode only displays a subset of those, for a more user-friendly configuration.
  • Date Picker
    This setting allows you to choose between a single date picker (one calendar allowing you to pick single dates) or a date range picker (permitting you to select ranges of dates).
  • Display View
    Either collapse the calendar object to only display when the user clicks on the input box (saves real estate) or show the calendar expanded in full view.
  • Placeholder Text
    If no selections are made in the date field, the placeholder text will be displayed in the input box.
  • Calendar Label
    Show/Hide the calendar label. You can modify the label name, the position, font size, colour and style.
  • Background Color
    Set the background colour of the calendar input box
  • Font Color
    Set the font colour of the calendar input box
  • Border Settings
    Show/hide the border of the input box including border width, color and radius.
  • Input width
    Modify the width size of the input box by either setting a
  • Show
    Conditional show for the reference line to display it only when the calculation condition is true.

3.4 Date Settings

The date settings section in the property panel covers how the date field will be formatted and presented.

  • Date Range
    Set the min and maximum allowable dates to be used in the calendar. By default, in auto-mode, the min-max available date values are used.
  • Date Format
    Date re-presentation in the input box. By default, the default formatting of the date or the app locale is taken. However, you can change the appearance by selecting a different date format or even write your own custom one.
  • Week Start
    For most users, the week starts on a Monday, however e.g. in Israel, the week begins on a Sunday. This option allows you to switch between the two.
  • Exclude weekends
    This will only display business days in the calendar object.
  • Unlock calendar view
    Normally, when the date range picker is selected, the two adjacent calendar months are consecutive. By unlocking the calendar view, both months become entirely independent.
  • Weekday Names
    This setting allows you to show & hide the weekday titles of the days in the calendar. Further to that, there are several styling and formatting settings available to modify the look and feel of the weekday names.
Vizlib Calendar
  • Calendar locale
    By default, this setting reads your app's locale, however you can overwrite it by defining your own language in there. The calendar local sets the language how year, month and day names are called.
  • Holidays
    Vizlib Calendar supports the use of holidays by formatting those days differently. You can either use the pre-defined set of holidays or add a custom sets of dates yourself. These days will then be formatted differently (background & text color).

3.5 Date Ranges

Date Ranges are relevant to the date range picker mode. The pre-define a set of days that can be selected as a shortcut. By default five date ranges are pre-defined.

Vizlib Calendar
Vizlib Calendar

To set a Date Range, simply click on "Add Date Range" and then set the following settings:

  • Custom date range name
    Gives your custom date range a name.
  • Range Direction
    Sets the direction of the days selection.
  • Range Unit
    Choose between Days, Weeks, Months, Quarters or Years

The combination of the above settings will create a date range selection area which will be illustrated in a Preview.

Vizlib Calendar


3.5 Appearance

This section of the property panel collects are styling and formatting options. It's sub-divided into the following parts:

3.5.1 General

General section is Qlik's native collection of titles, sub-titles and footers

3.5.2 Calendar Appearance

Here you can modify the appearance and show or hide different parts of the calendar.

  • Default View
    Choose between Months and Days as the default view on open.
  • Selected Date(s)
    Show/Hide additional input boxes when the calendar is expanded to present the selected dates.
  • Calendar Background
    Set the background color of the calendar body
  • Border
    Show/hides the border on the calendar body. You can also set the border width, color and radius.
  • Control Panel
    Show or hide the control panel and if displayed, position it either on the left hand or right hand side. The control panel includes pre-defined date ranges.

3.5.2 Cell Background Color

This section covers how the cell (calendar days) background is formatted in the calendar body. You can choose between standards Qlik styling, which uses its proprietary grey/white/green logic to indicated excluded, possible and selected days. Alternatively, you can also format the calendar yourself bespoke.

When you choose custom formatting, you've got the following options to style:

  • Default Color
    Default Background Color for all Days
  • Selected Color
    Change Qlik's selected "green" to a different color.
  • Hovered Color
    Background color a date cell assumes when you hover over it with the mouse.
  • Today Color (Advanced Mode)
    Background color a today's date cell.

3.5.2 Cell Text Color

Same as with the background colour, this section covers how the cell (calendar days) text colour is formatted in the calendar body. You can choose between standards Qlik styling, which uses its proprietary grey/white/green logic to indicated excluded, possible and selected days. Alternatively, you can also format the calendar yourself bespoke.

  • Default Color
    Default Text Color for all Days
  • Selected Color
    Text Color for selected values
  • Hovered Color
    Text Color for hovered values
  • Today Color (Advanced Mode)
    Text color a today's date cell.

3.5.3 Cell Border

This section allows you to set a border around the dates, and define the width, colour and rounding of them.

3.5.4 Cell Size

This section covers the cell sizes and as such the size of the whole calendar body.
Following options are available:

  • Cell Font Size
    Defines the Font Size of the calendar days
  • Gap between cells
    Defines how much space should be left between the individual dates.
  • Autosize
    This option sets whether the size of the calendar should be picked automatically based on the size of the extension. Alternatively, also set a fixed calendar size.
  • Cell border radius
    Define the radius of the cells and make it look like a circle.

3.6 Interactivity

Interactivity provides you with a set of options which allow you to control how the user can interact with the Vizlib Calendar

  • Allow Selections
    Permits the user to make date selections via the calendar object. Deactivating this setting will make the calendar read-only.
  • Allow Quick-Select
    Quick-Select allows the user to make a selection which is passed on to the data model immediately. No confirmation of selections is required.
  • Initial Selections (Experimental)
    Set either a fixed date or a date range to be applied by default when the user enters the sheet. This setting is experimental and should only contain dates which are available and selectable in the chosen date field.
  • Always one selected value
    This option is only available for the single date picker. It ensures the user can only select one date at a time. If more than one date is selected, the calendar enforces a selection of the latest date.
  • Full screen icon
    Hide or show Qlik's native full-screen icon.
  • Snapshot icon
    Hide or show Qlik's native snapshot icon.

4. What's new?:

v1.0.1 22/11/2017:

Bug Fix:

  • Fixed issue where Vizlib Calendar would produce unexpected results when used with more than 5,000 dates.

v1.0 12/11/2017:

  • Initial extension release
  • Single Date and Range Picker
  • One Selected Value & pre-defined selections
  • Support for Locale
  • Rich formatting options

Coming Soon:

  • Adding Metrics to the Calendar Object
  • Year & Month selections
  • Additional formatting & styling options


5 Feedback and Bug Reporting

Feel free to raise your feedback or bugs found on the page below:
www.vizlib.com/feedback

Contact us:

support@vizlib.com

6 Terms & Conditions

Terms and Conditions
2017 © Vizlib Ltd. - All rights reserved.