YUI2 Diary

Diary is a widget to render and manipulate calendar items on a diary.

Introducation

Diary is a YUI widget to render a DataSource as a diary.

Currently features are:

Drag and drop to move diary items
Resize to change times of diary items
Click and drag to create new items
Some navigation
Multi-day diary items display
Filtering of visible items based on data passed
Week, day or month views

Examples

A few examples:

API docs

The API documents are here

Dependencies

The dependencies for Diary are:


      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css">
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/base/base-min.css">
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/resize/assets/skins/sam/resize.css"> 
      <!-- Optional: -->
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/container/assets/container.css">
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/calendar/assets/skins/sam/calendar.css"> 
      
      <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo.js"></script> 
      <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/event/event.js"></script> 
      <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/dom/dom.js"></script> 
      <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/event-delegate/event-delegate.js"></script>
      <script src="http://yui.yahooapis.com/2.8.0r4/build/event-mouseenter/event-mouseenter-min.js" ></script>
      <script src="http://yui.yahooapis.com/2.8.0r4/build/container/container-min.js"></script>
      <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/selector/selector.js"></script>
      <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datasource/datasource.js"></script> 
      <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/dragdrop/dragdrop.js"></script> 
      <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element.js"></script> 
      <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/resize/resize.js"></script>
      
      <!-- Optional -->
      <script src="http://yui.yahooapis.com/2.8.0r4/build/animation/animation-min.js" type="text/javascript"></script>  
      <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/calendar/calendar.js"></script>

or combo-ed


      <!-- Combo-handled YUI CSS files: -->
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/assets/skins/sam/skin.css">
      <!-- Combo-handled YUI JS files: -->
      <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/animation/animation-min.js&2.8.0r4/build/calendar/calendar-min.js&2.8.0r4/build/dragdrop/dragdrop-min.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/datemath/datemath-min.js&2.8.0r4/build/selector/selector-min.js&2.8.0r4/build/event-delegate/event-delegate-min.js&2.8.0r4/build/event-mouseenter/event-mouseenter-min.js&2.8.0r4/build/element/element-min.js&2.8.0r4/build/element-delegate/element-delegate-min.js&2.8.0r4/build/resize/resize-min.js"></script>

You'll also need the js and css available here on github.

Markup

You only need an element on the page to render to:


       <div id="diary-holder"></div>

Javascript

First you'll need a DataSource of diary type events. These need at least a start and an end time:


     // The raw data:
     var dataArr = [ 
            {DTSTART: "2010/02/01 08:00", DTEND:"2010/02/01 10:30", SUMMARY: "Doctors appointment" }, 
            {DTSTART: "2010/02/01 09:00", DTEND:"2010/02/01 11:30", SUMMARY: "Write some code"}, 
            {DTSTART: "2010/02/04 11:30", DTEND:"2010/02/04 12:30", SUMMARY: "Client meeting"}
     ];

     // Set up the DataSource
     var data = new YAHOO.util.DataSource({ 
      	    total: 3, 
      	    VCALENDAR: dataArr
     }); 

     data.responseType = YAHOO.util.DataSource.TYPE_JSON;
     
     // Point to the data
     data.responseSchema = {
        resultsList : "VCALENDAR", 
        fields : [
            { key: "DTSTART" , parser:"date" },                   
            { key: "DTEND" , parser:"date" },  
            { key: "SUMMARY" }
        ]
     };

Dates need to be in a form that DataSource can convert into javascript dates, and you'll need to include the parser: "date". Field names can be conifgured. Instantiating the Diary is then pretty straightforward:


     var cfg = { 
      startDate: new Date("2010/01/31") , // first day to show in the Diary
      width: 800, // width in px
      scaleColumns: true, // whether to stretch columns to fit
      display: { format: "week" , startTime: 8, endTime: 20 }, // display format: times as 24 hr
      calenderNav: true // whether to use a YAHOO.widget.Calendar in the navigation
     };
    
     var myDiary = new YAHOO.widget.Diary(  "diary-holder" , data, cfg  );

Tested

I've tested this in Firefox, IE7 and 8 and Chrome so far, all on Windows. I'd be glad to have feedback on others.