Diary is a widget to render and manipulate a diary.
This is a live version of the example on the overview page with some extra features. This example demonstrates use of all the current config options, with some of the defaults that are usually off turned on. In particular there's the "useAnimation" and "tooltip" which hopefully do what they say; the animation is applied when items squeeze or expand when they're overlapping.
The config object used in this example is
var cfg = {
// allow new multi-day items (click-and-drag over several days in one week)
allowCreateMultiDayItems: true,
// whether to use a YAHOO.widget.Calendar in the navigation
calenderNav: true,
// display format: times as 24 hr. formats can be "day", "month", or "week"
// (the default). startTime and endTime determine the size of the
// visible window and how far down it's scrolled, so that initially you
// should see 8am to 6pm (in this example).
display: { format: "week" , startTime: 8, endTime: 18 },
// last day to show in Diary: redundant at the moment but may be useful
// when other diaplay formats are available. Or it might disappear in the
// future!
endDate: new Date( "2010/02/06"),
// first day to show in the Diary.
startDate: new Date("2010/01/31"),
// width of the Diary container, as a number in pixels. If a width is set
// on the container, and no value is passed here, Diary will use the width
// of the element. This is used to work out the width of the columns.
width: 800,
// A string used to render the title of the Diary. You can use strftime
// type strings: a little bit of sweetness in YUI I only found doing this,
// in YAHOO.util.Date.format
titleString: "My whizzy diary, week %e %B, %Y"
// whether to stretch columns to fit
scaleColumns: true,
// Whether clicking on an existing item should allow starting to create
// a new one. If you've got itemClick listeners doing anything,
// you probably want this off, or it'll start making new items as well
// as doing other things...
itemClickCreateNew: true,
// maps your datasource fields to the fields that Diary expects. See
// the 'filtering' example for more on this. You can use strings
// to map single fields in your data to single fields in the diary,
// or you can pass a function, whose only argument is the data source
// and which must return the value to be assigned to the DiaryItem
// field.
fieldMap: {
backClass: "category"
},
// whether to use a Tooltip to display info on hovering over diary items.
// it doesn't work too well at the moment - it can be a bit slow or
// appear in the top left, because it uses a single Tooltip and changes
// the context whenever you mouse over. I think there's a better way to
// do this..
tooltip: true,
// whether to animate movement of DiaryItems.
useAnimation: true,
// change the height of the diary: number of pixels per hour
pxPerHour: 40,
// NEW: (31/5/2010, v1.2) Whether to make sure the first day displayed
// in week or month views is a particular day. Pass the index of the
// day you want first (i.e. 0 = Sunday). False means that any day can
// be the first in the view, and it might change as they navigate around.
keepFirstDay: 1,
// locale: uses YAHOO.util.DateLocale locales to render strings
locale: "en-GB",
};