Advanced: Populate the Calendar withDates from Other Fields

Introduction

Now you can give your visitors and users the option to control the calendar from other fields or to can control the minimum and maximum date range of 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 is for "min date" and the last for "max date", giving them appropriate TextField ID's, in the Property Inspector, in our case "mindate" and "maxdate" 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 To Calendar.


A new popup appears:


In Source Input by ID, choose the ID of the text box you want to attach the behavior to, which would be "mindate" for this tutorial. In the Target Calendar by ID field, choose your calendar's unique ID, in our case "dmxCalendar_2.  Set Date to Use to "Minimal Date" and pick the format in which you want the date to appear in the Date Import 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, we leave "onBlur" to set the condition in which the behavior will be activated.

Press OK

5.       Now we will repeat the same process for the text field of Max 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 To Calendar.


A new popup appears:


In Source Input by ID, choose the ID of the text box you want to attach the behavior to, which would be "maxdate" for this tutorial. In the Target Calendar by ID field, choose your calendar's unique ID, in our case "dmxCalendar_2.  Set Date to Use to "Maximal Date" and pick the format in which you want the date to appear in the Date Import 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, we leave "onBlur" to set the condition in which the behavior will be activated.

7.       Save your files and upload them!

You should be able to automatically transfer the min and max dates from the text fields to the calendar! It is very useful if you have vacation reservation forms, for example!

First click in the "Min Date" field and input your min date in the format you specified; for example 2009-02-07. Then click in the "Max Date" field and input your max date in the same format and you will see the result appear in the calendar above.

Then click the icon of the calendar to see your results.

8.       Save your files and upload them!

You should be able to automatically transfer the min and max dates from the text fields to the calendar! It is very useful if you have vacation reservation forms, for example!

First click in the "Min Date" field and input your min date in the format you specified; for example 2009-02-07. Then click in the "Max Date" field and input your max date in the same format and you will see the result appear in the calendar above.

Then click the icon of the calendar to see your results.