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:

Events

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:

itemClick

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")); 
     });

itemBeforeStartMove

Return false to stop the movement.


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

itemBeforeEndMove

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? " ) );
         } 
     });

itemEndCreate

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") 
        });
     });