1 Overview
2 Defining views
- 2.1 Infinite scroll
  - 2.1.1 Enable zoom
  - 2.1.2 Scroll to date
- 2.2 Stretch events
- 2.3 Floor dates
  - 2.3.1 Apply offset
- 2.4 Custom views
3 Advanced
- 3.1 General
- 3.2 Headers
  - 3.2.1 Tick width
  - 3.2.2 Custom headers
    - 3.2.2.1 Allowed options
  - 3.2.3 Time resolution

Overview

Defining views is a powerful feature of our scheduler component that allows you to create customized views for your schedules. With this feature, you can choose which parts of your schedule to display and how to organize them. For example, you can create a month view that shows an overview of all the events in a given month, or a day view that provides a detailed breakdown of each hour of the day.

For some related examples see: default navigation and custom headers

Defining views

Views will determine the headers of your scheduler and the duration that is shown. There are many options for defining a view but at its most basic you can select one of the default view types (day, week, month, year). You are however also able to define almost any kind of custom view.

Every view needs at least a unique view id and a name. All other options are there to customize how the view behaves and make it suit the needs of your application.

Infinite scroll

Infinite scroll allows you to scroll indefinitely to the left and right within the scheduler. Each time the view changes—i.e., when the visible range alters—the scheduler updates the data source (unless this feature is disabled in the options). This enables the data necessary for the current view to be loaded.

It may be beneficial to query a bit more data than what is dictated by the current start and end dates of the visible range. Doing so facilitates smoother navigation when scrolling left or right and also allows for the "scroll to event" functionality to work for events that are currently off-screen.

There are some key differences between the fixed timeline and the infinite scroll options:

The "floor to date" and "apply offset" functionalities will be disabled, as they are not applicable to an infinite timeline.
The "Context Start Date" is not editable from Mendix and is instead controlled by the scheduler. To move to a specific date, you can use the "Scroll to Date" attribute. Simply change this attribute on the context object to scroll to the desired location. Note that the “Context Start Date” will still be used to set the initial date of the view.

Enable zoom

When enable zoom is enabled you can zoom in and out in the scheduler using Ctrl + scroll.

Scroll to date

When the "Infinite Scroll" feature is enabled, a "Scroll to Date" attribute can be specified. This attribute allows you to shift the scheduler's view to any date simply by changing its value. Upon changing the value, the scheduler updates to display the selected date and then resets the "Scroll to Date" attribute to an empty state.

Stretch events

Stretch events 'stretches' the events over the entire cell width, no matter how long the event lasts. It will be rounded down to the closest column line.

Floor dates

Floor dates are enabled by default but can also be disabled. When enabled it will round the visible view to the nearest major unit of time. This means that for a year view, it will auto adjust the view to the first of January, and for a day view to the start of the day

Apply offset

An offset can be applied to adjust the rounding/flooring of dates. For instance, when you specify the unit hour and increment 9 for a day view the view will automatically start at 9:00.

Custom views

When you create a custom view a few extra settings will become available. These settings allow you to specify the duration of the view and the previous and next behavior of the default navigation (view skip). The view unit will also determine the base preset that is used to set up the view. For instance, when you select an hour the headers will show hours and days.

Advanced

Under the advanced tab, the views can be further modified.

General

The custom display date is used in the tooltips when hovering or resizing events.

Headers

Tick width

The tick width will determine the minimum width of a single tick. In the first screenshot, the tick width is 50 and in the second screenshot, the tick width is 150. This can be used to make very compact views or to let the views breathe more (potentially even forcing a scrollbar).

Custom headers

When ‘override headers’ is enabled you can define one or more custom headers. Since Mendix currently doesn’t support popups more than 2 levels deep we are forced to use a JSON for this.

Please note that this JSON is translatable so custom date formats for different languages are supported.

Below you can find an example of such a header JSON

[
    {{
        "unit": "year",
        "dateFormat": "YYYY",
        "align": "start"
    },
    {{
        "unit": "month",
        "dateFormat": "MMM",
        "increment": 4
    }
]

note that mendix requires {{ to escape the “{“ in translatable texts.

Allowed options

Option	Usage

Option

Usage

unit

Defined the unit of time for the header

"unit": "year"

possible values are millisecond, second, minute, hour, day, week, month, and year

dateFormat

The date format for the date label of the header columns.

"dateFormat": "YYYY",

Please find out more about formatting dates here.

increment

This allows you to add a column marker and a new header column every “increment“ times the view unit has passed. For example: when the unit is an hour and the increment is 4 a column line will be added every 4 hours.

"increment": 4

customHeader

Allows you to apply a custom text to a header column. For now only formattedStartDate and formattedEndDate are available. The start date will be formatted using the dateFormat supplied in the json.

"customHeader": "Fiscal year ${{formattedStartDate}"

offset and

offsetUnit

Normally the header columns (see image above) for a year will start on januari and a the header columns for a month will start on the first day of the month. You can however apply an offset to those header columns. For instance if you want to create a fiscal year that starts on September the offsetUnit would be month and the offset would be 9.

Keep in mind though that the offset is always calculated from the view start. For instance, if your view already starts on September and not on January since you are applying an offset to your view the offset for the header should be 0 since it is calculated based on the start of the view.

Both offsetUnit and offset need to be set. Also cannot be used on the last header element.

Example of a header of a fiscal year starting on september and an extra month header with a view starting in Januari.

[
    {{
        "customHeader": "FY: ${{formattedStartDate}",
        "offsetUnit": "month",
        "offset": 9,
        "unit": "year",
        "increment": 1,
        "dateFormat": "YYYY"
    },
    {{
        "unit": "month",
        "increment": 1,
        "dateFormat": "MMM"
    }
]

Time resolution

The time resolution setting will determine to what time resolution the events should snap when dragging and resizing. For instance. When the time resolution is specified at 2 hours like in the screenshot above all events will snap to these intervals: 00:00, 02:00, 04:00, etc.

Documentation

1.2.1. Views