YUI Calendar

YUI Calendar

By Yahoo

Spry

By Adobe

Download the YUI Calendar from the Adobe Exchange:

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1695041

Create a Spry DataSet:

1) Open Dreamweaver.

2) Create a new HTML document.

3) Create a table.

4) Fill out the table with one column named "Date".

Format dates as follows: 12/30/2009

5) Go to code view.

6) Give the table an id.

7) Save the page in the folder for your site.

Make sure you are working inside of a site in Dreamweaver.

8) Create a new HTML document.

9) Save it in the same site folder.

10) Go to the bindings tab. (Window >> Bindings)

11) Create a new Spry Data Set. (click the plus sign)

12) Leave the name of the Data Set "ds1" for this example.

13) Click browse and find the first HTML document you made.

14) Click on the yellow arrow on your table.

15) Click next.

16) Click next.

17) Select "Do not insert HTML" and click done.

Create a Spry Region:

1) Insert a Spry Region. (Insert >> Spry >> Spry Region)

2) Select "DIV", "Detail Region", "ds1", and click OK.

3) Replace "Content for Spry Detail Region Goes Here" with a table.

4) Format the table to fit the data you would like.

5) Drag bindings from the Bindings tab into your table.

6) Save the file.

Create and Connect a YUI Calendar:

1) Go to code view.

2) Select right before the Spry Detail Region start div tag.

3) Insert a YUI Calendar. (Insert >> YUI >> YUI Calendar)

4) Find selectHandler(event, data).

5) Inside the brackets, place the following code:

var formattedDateString = data[0][0][1] + "/" + data[0][0][2] + "/" + data[0][0][0];

var r = ds1.findRowsWithColumnValues({"Date": formattedDateString }, true);

var region = Spry.Data.getRegion("eventDetail");

if(r){

ds1.setCurrentRow(r.ds_RowID);

region.setState("showEvent", true);

} else {

region.setState("ready", true);

}

6) Find spry:detailregion and add an id "eventDetail".

7) Wrap the following DIV tag around the table:

8) Directly below that DIV tag, add the following DIV tag:

There are no events on this date. Please select another date.

Your YUI Calendar should be up and running now. Just go to Live View to see it. For a more detailed explanation of this process, see the article by Roman Villarreal:

http://www.adobe.com/devnet/dreamweaver/articles/using_yui_widgets.html