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. The example demonstrates how to use the fieldMap config attribute and how to filter your DiaryItems.
The fieldMap configuration attribute lets you map fields in your DataSource to the expected field names for the Diary. The field names expected are iCalendar style but your DataSource doesn't need to follow this. In this example, the data has a field called starttime, and a couple of extras: DESCRIPTION and category. category will be used for filtering.
The data now looks like this:
var dataArr = [
{starttime: "2010/02/01 08:00",
DTEND:"2010/02/01 10:30",
SUMMARY: "Doctors appointment" ,
DESCRIPTION : "Go and see Jack about my back",
category: "personal" },
{starttime: "2010/02/01 09:00",
DTEND:"2010/02/01 11:30",
SUMMARY: "Write some code",
DESCRIPTION : "More Diary examples",
category: "work"},
{starttime: "2010/02/04 11:30",
DTEND:"2010/02/04 12:30",
SUMMARY: "Client meeting",
DESCRIPTION : "Go and see Jack about my back",
category: "work important"}
];
and the response schema is now:
data.responseSchema = {
resultsList : "VCALENDAR",
fields : [
{ key: "starttime" , parser:"date" },
{ key: "DTEND" , parser:"date" },
{ key: "SUMMARY" },
{ key: "DESCRIPTION" },
{ key: "category" }
]
};
The only change is the config object literal we pass to the constructor;
it includes a fieldMap object that maps starttime and category fields to
DTSTART and backClass respectively:
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
fieldMap: {
DTSTART: "starttime",
backClass: "category"
}
};
Diary will now know to use the starttime field as the DTSTART value.
The Diary will also take the values in the backClass (i.e. "category" in this example)
field and add them as classes to the container of each DiaryItem. This enables
styling of different types of event as needed. There is also a detailClass
property which does the same thing but adds the style to the html element
containing the actual text of the Diary item. For this example we have the
additional styles
.lplt-diary-item.work{
background-color: #A7DFA7;
}
.lplt-diary-item.personal{
background-color: #EFC986;
}
.lplt-diary-item.important{
border-color: red;
}
We can also use these categories as filters. Diary has a method addItemFilter
which takes a Selector string, prepends it with "lplt-diary-item" (the class
added to the container of DiaryItems), and hides matches. removeItemFilter
removes the filter. This does nothing to the data; it just adds a "lplt-diary-item-hidden"
class to hide them from the display. Filters continue to be applied when
you navigate to a different week. To add some buttons to show and hide
personal and work items, we add some (simple) controls:
<button id="filterwork" value="hide work" >hide work</button>
<button id="unfilterwork" value="show work" >show work</button>
<button id="filterpersonal" value="hide personal" >hide personal</button>
<button id="unfilterpersonal" value="hide personal" >show personal</button>
and some simple event listeners:
YAHOO.util.Event.on( "filterwork", "click" , function(){this.addItemFilter( ".work" );}, myDiary , true );
YAHOO.util.Event.on( "unfilterwork", "click" , function(){this.removeItemFilter( ".work" );}, myDiary , true );
YAHOO.util.Event.on( "filterpersonal", "click" , function(){this.addItemFilter( ".personal" );}, myDiary , true );
YAHOO.util.Event.on( "unfilterpersonal", "click" , function(){this.removeItemFilter( ".personal" );}, myDiary , true );