Dynamic Conditional Date Formatting

Insert DMXzone Calendar 3

Let's add the DMXzone Calendar 3 on our page. From the insert panel (1), click DMXzone Calendar 3 icon (2).

Select the date format

Select the date format for your calendar (1) and go to the formatting tab (2).

Select a different date format if needed

You can select a different date format for the conditional dates, if needed. We leave this field to its default format. Click add new date button (1) and select the dynamic data source option (2).

Repeating element

We've already defined an HTML5 Data Bindings data source that returns the reserved dates from our database. Select the repeating element of your data source (1). Click the dynamic date icon, in order to select the binding, which returns your dates (2). * Note that when selecting the repeating element you can use the HTML5 Data Bindings Formatter, in order to format the returned data. For example, you can use the "where" filter to show only dates, that match a specific condition.

Select the dates binding

Select the dates binding (1) and click the HTML5 Data Bindings Formatter icon (2).

Format the dates

We need to format the dates that come from our database. In the date and time filters category (1), select the format date filter (2) and click add (3). The date's format should be the same as the one selected in the Formatting tab. When you're done, click OK.

Add the formatted date binding.

Add the formatted date binding.

Background color

We leave the Till date field empty as we only store single dates in our database. Use the till date (1), if you want to show date ranges. Add a custom CSS class if you want to style these special dates differently. We've created a class called reserved that adds a red background to our database dates (2).

Selectable or not

Choose whether your special dates should be selectable or not (1). We also add a dynamic tooltip (2) message that will appear when the mouse cursor moves over any special date.

Preview the results

You can add, as many dynamic or static dates and date ranges, as you need. Also, you can style them differently, using different CSS classes. When you're done, click Ok and preview the result.