YUI2 Diary

Diary is a widget to render and manipulate a diary.

Multi-day event example

This is a live version of the example on the overview page with some extra features. The example demonstrates multi-day items. The data has been changed to include a road trip starting the previous week into Monday (pink bars); Spring, runnning from Jan to April (the green line); some sleep (orange bar from Weds to Thurs), and some more holidays, extending into the following week.

Multi-day items

Items can span any number of days and will be rendered from 00:00 to 23:59 on the intermediate days. The items are a little more restricted than single-day items; it's not currently possibly to drag and drop them. You can change the start and end times of the item using resize.


The data now looks like this: var dataArr = [ {DTSTART: "2010/01/27 08:00", DTEND:"2010/02/01 10:30", SUMMARY: "Road trip" , category: "personal" }, {DTSTART: "2010/02/01 09:00", DTEND:"2010/02/01 11:30", SUMMARY: "Write some code", category: "work"}, {DTSTART: "2010/02/03 17:00", DTEND: "2010/02/04 11:00", SUMMARY: "Sleeping", category: "personal"}, {DTSTART: "2010/02/04 11:30", DTEND:"2010/02/04 12:30", SUMMARY: "Client meeting", category: "work important"}, {DTSTART: "2010/02/04 12:00", DTEND: "2010/02/10 12:30", SUMMARY: "holidays", category: "personal"}, {DTSTART: "2010/01/01 08:00", DTEND: "2010/01/04 08:00", SUMMARY: "Spring", category: "seasons" } ];

Diary javascript

This example also enables the creation of multi-day items, using the configuration attribute allowCreateMultiDayItems: true Otherwise it's the same as the other examples.