Advanced: Using the Calendar Range Selector and Populating Other Fields with the Selection.

Introduction

In this tutorial we will explain how to set a new selection range of the calendar.
The new Event Behaviors of the DMXZone Calendar give you an opportunity to populate input fields with a date or to have a date inserted in a field to be displayed by the calendar.

How to do it

1.       Define your site in Dreamweaver and Create a new page
Define your site in Dreamweaver and choose the option to create a new page. You can read more about this at this page.

2.       Using the Form, text fields, and inserted Calendar from the previous tutorial, we add three more rows.

The first one will be for a new calendar which we insert the same way we have shown in the previous tutorials. Make sure you enable "Date range selection" in your calendar's Advanced options.

If you don't know how to create a Calendar in a form, click here to go back to that tutorial.

The second row we insert will be for "start date" and the last for "end date", giving them appropriate TextField ID's, in the Property Inspector, in our case "startdate" and "enddate" respectively. 


Notice your calendar's unique ID in the property inspector, which in our case will be "dmxCalendar_2".

3.       Select the text field next to "Start Date" and go to the Behaviors tab. Click on the + icon.


Select DMXzone/DMXzone Calendar/Copy Date From Calendar.


A new popup appears:


In the Source Calendar by ID field, choose your calendar's unique ID, in our case "dmxCalendar_2. In Target Input by ID, choose the ID of the text box you want to attach the behavior to, which would be "startdate" for this tutorial.  Set Date to Use to "Start Date (of range selection)" and pick the format in which you want the date to appear in the Date Export Format field. Make sure that the date format of the behavior and the date format of your calendar are the same. For this tutorial we choose yy-mm-dd.

Press OK.

4.       Your behavior should appear in the Behaviors tab.


Here, to the left of the behavior, you can select when you want the behavior to be activated. We choose "onClick".


Press OK

5.       Now we will repeat the same process for the text field of "End Date".

Select the text field next to "End Date" and go to the Behaviors tab. Click on the + icon.


Select DMXzone/DMXzone Calendar/Copy Date From Calendar.


A new popup appears:


In the Source Calendar by ID field, choose your calendar's unique ID, in our case "dmxCalendar_2. In Target Input by ID, choose the ID of the text box you want to attach the behavior to, which would be "enddate" for this tutorial. Set Date to Use to "End Date (of range selection)" and pick the format in which you want the date to appear in the Date Export Format field. Make sure that the date format of the behavior and the date format of your calendar are the same. For this tutorial we choose yy-mm-dd.

6.       Your behavior should appear in the Behaviors tab.


Here, to the left of the behavior, you can select when you want the behavior to be activated. We choose "onClick".

7.       Save your files and upload them!

You should be able to automatically copy the selected date or range from the calendar to your separate input field! It is very useful if you have vacation reservation forms, for example!

To do that, first, click the icon of the calendar, then select your range and close the calendar.

 

Then click in the "Start Date" or "End Date" field and you will see that date appear in the field.