YUI2 Diary

Diary is a widget to render and manipulate a diary.

Events example

This is a live version of the example on the overview page, with some event handlers on some of the interesting moments in the Diary. The overview describes the basic setup - there's no real difference in this example.

Try dragging and dropping items, resizing the tops and bottoms, or clicking somewhere on the diary.

And one extra thing: destroy it completely:


Diary provides quite a few events at the moment: check the API for details. Some of the more interesting ones are subscribed here, and are all fired by the Diary:


The object passed to the subscriber has a property item, pretty consistently across the events where it makes sense. So we can display the summary text:

// Show summary myDiary.on( "itemClick", function(ob){ alert( "Thank you for clicking: " + ob.item.get("SUMMARY")); });


Return false to stop the movement.

// Turn it orange while we're moving myDiary.on( "itemBeforeStartMove", function(ob){ ob.item.setStyle("color","orange"); });


Return false to return the item to where it came from.

// Confirm movement and change text back to black myDiary.on( "itemBeforeEndMove", function( ob ){ ob.item.setStyle("color","black"); if( ob.originEvent.ev == "endResize" ){ return ( confirm( "Are you sure you want to change the times of this event?" ) ); } else { return ( confirm( "Are you sure you want to move this event? " ) ); } });


After creating a new item by click and dragging: useful for saving! In this example we just push it onto the data array. This means that in this example if you create a new item, go to the previous week and then back again, your item is still there; in other examples it's not saved and so disappears when the data is parsed again.

// Save a new item (into the array) myDiary.on("itemEndCreate", function(ob) { ob.item.set("SUMMARY", prompt("Enter summary text:")); dataArr.push({ DTSTART: ob.item.get("DTSTART"), DTEND: ob.item.get("DTEND"), SUMMARY: ob.item.get("SUMMARY") }); });