Advanced: Using the Modal PopupCalendar

Introduction

Also you can have a Modal Calendar Popup attached to a field and you can position it anywhere you like by entering custom coordinates.

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 two more rows.

The first one will be for a modal calendar which will appear centered on your page and the second, we will give custom coordinates.

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

Give the text fields next to "Shop for Present" and "Date of Party", appropriate TextField ID's, in the Property Inspector, in our case "shop" and "party" respectively. 

3.       Select the text field next to "Shop for Present" and go to the Behaviors tab. Click on the + icon.


Select DMXzone/DMXzone Calendar/Show Modal Calendar Dialog.


A new popup appears:


In Related Input by ID, choose the ID of the text box you want to attach the behavior to, which would be "shop" for this tutorial. Set 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.


Here you can edit your calendar with the Live Editor button.


You can set the Minimum, Initial, and Maximum Dates here under Dates which will not be editable by the user later.


Last, but not least, you can set the positioning of your modal calendar under Show position. For this first one, we will leave Centered checked, as we want it to appear at the center of our page.


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 Modal Calendar with custom coordinates which will be in the text field next to Date of Party.

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


Select DMXzone/DMXzone Calendar/Show Modal Calendar Dialog.

6.       A new popup appears:


In Related Input by ID, choose the ID of the text box you want to attach the behavior to, which would be "party" for this tutorial. Set 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.


Here you can edit your calendar with the Live Editor button.


You can set the Minimum, Initial, and Maximum Dates here under Dates which will not be editable by the user later.


Last, but not least, you can set the positioning of your modal calendar under Show position. For this second one, we will uncheck Centered put in our own coordinates.


Press OK.

7.       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".

8.       Save your files and upload them!
You should see a modal calendar when you click in each of the two fields we worked on!

Shop for Present:

Date of Party:

When you've selected your dates, they should appear in the fields in the format you chose.