With this movie we will show you how to use the dynamic conditional date formatting in order to retrieve dates with special meanings from a database.
DMXzone Calendar 3 Manual
June 29, 2016
Dynamic Conditional Date Formatting
Dynamic Conditional Date Formatting
Step by Step
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.
