Create a Dynamic Calendar in Dreamweaver Using the Yahoo YUI Calendar Control
Introduction
The YUI library, which stands for Yahoo User Interface, is a group of multiple controls that simplify Web enhancements. In order to use one of these, you must download the specific control and install it using the Adobe Extension Manager. Start the process by downloading the YUI Calendar, which is a zipped file and then expanding it. As of November 2009, the file name was YUI_2.8.0r4.zip. This page also contains extensive tutorial information about using the Calendar that will be well worth your time to read.
Locate the Adobe Extension Manager CS4 in the Adobe program group. After opening this program, click on the “Install” button at the top. This opens a window to locate the YUI Calendar. The image in the next section shows the Extension Manager after installing and enabling the YUI calendar with a checkmark in the “Enabled” box.
You will also need to ensure you have the latest package of Spry controls. Visit the Adobe Dreamweaver support site and download this set of functions. The latest update by November 2009 was Spry_1_6_1_022400. Once downloaded and unzipped. Use the Extension Manager again to install these controls.
Add a Basic Calendar
Open a new HTML file for the Dreamweaver calendar and name it “MyCalendar.html”. Click “Insert” and “YUI,” which should now be listed at the bottom of the drop down menu that opens. Looking at the page in Design view, you will not see a calendar at this point, only a small label with a blue background reading “YUI_Calendar:yuicalendar1” confirming you have installed the Calendar. If you view the Code listing, there is some lengthy JavaScript coding that Dreamweaver created. Besides the action code lines, extensive comments are part of the display, introduced by to slash figures (//) on each line. Links to more explanatory information are here as well, including a Calendar API cheat sheet. All of this information is essential if you want to do more than just display a static calendar
Images
Link to a Spry Data Set through the Wizard
In order to add dynamic functionality to the calendar, for example display information when a user clicks on a date, create a Spry Data Set, and link it to the Calendar. The Data Set can be in either HTML or XML. Select one type depending on the contents of your dataset, and then complete the Spry Data Set Wizard to convert from the original Data Set to the Spry version. In the original Calendar_Demo file, click “Insert,” “Spry,” and “Spry Data Set” This opens a window to “Specify Data Source.” Select the Data Type in the first box—either HTML or XML depending your source. The default Data Set Name is ds1; change this if you wish. If the data source uses tables, then set the “Detect” box to that method. If the data source used div commands, then change to that in the Detect box. Complete the steps in the Wizard by specifying the Data File using the “Browse” button in the next field.
Refer to the comments within the lengthy JavaScript for explanations on activating dynamic links when a user clicks on a date. How this is done depends on the individual format and type of your own linked Spry Data Set. When you have gone through all the steps, Click “Done” and save the file. Test the results by clicking on “Live View” or the Globe icon to preview the page. If everything is correct, when you click on a date, the associated event should appear in a popup.
Images
Considerations
Although creating the calendar is simple, the steps involved in building and linking a Data Set are not. You will save quite a bit of time by going through all the tutorials on the Yahoo UI site as well as additional Dreamweaver help information. There is even a video link to the Spry Data Set control on the opening page of Dreamweaver CS4.
