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

YUI Calendar - Highlight Date

YUI Calendar

By Yahoo

Spry DataSet

By Adobe

Once you have a YUI Calendar hooked up to a Spry DataSet and have events on the calendar, you can highlight those dates. In order to do so, you must tell the calendar to highlight certain dates. This can be done so by the following:

1) Find yuicalendar1.render(); and insert the following code directly before it:

var cald = '12/25/2009';

yuicalendar1.addRenderer(cald, yuicalendar1.renderCellStyleHighlight1);

In this example, the calendar would highlight December 25, 2009.

For multiple dates:

var cald = '12/25/2009, 12/27/2009';

For ranges of dates:

var cald = '12/25/2009-12/27/2009';

For multiple dates/ranges of dates:

var cald = '12/5-12/7/2009, 12/25/2009';

Thanks to Phil_W on the Adobe Forums for this information.