DMXzone Calendar 2 Manual

Advanced: Adding Custom Dates to DMXzone Calendar 2

In this tutorial we will show you how to use DMXzone Calendar 2 formatting options in order to add custom dates to your calendar.

*You can also check out the video.

How to do it

1. We've created our page layout and now we'll add the DMXzone Calendar 2. Click the DMXzone Calendar 2 icon and the dialog will appear.

2. Choose a date format (1), in our case – dd-mm-yy and an intitial date (2). Also, check the Display calendar inline (2).

3. In the formatting tab we'll select static (1) as dates source and dd/mm/yy as a date format (2).

4. Now, we're going to add a period during our house is not available for reservations. Click the Add new date button.  

5. Add a start and end dates (1) for the period. If you want to display only one day, leave the till date field empty. Uncheck the Selectable checkbox so that the reserved dates are not selectable (2).

6. We'll add a custom CSS Class to the period (1). If you haven't defined any class you can use the create a new class button (2).  

We defined the following rules in our page styling:

.reserved {background: #f00!important;}

.reserved span {color:#fff!important;}

.reserved a {color:#fff!important;}

.reserved a.ui-state-active {color:#00C !important;}

.reserved a.ui-state-highlight {color:#00C !important;}

7. Add a message that will appear when the mouse moves over the custom dates.

8. Now, you can save your work and preview the result in the browser.