Yahoo! UI Library

Diary widget  1.4

Yahoo! UI Library > diary > YAHOO.widget.Diary
Search:
 
Filters

Class YAHOO.widget.Diary - extends YAHOO.util.Element

The main diary;

This is the main object. It:

  1. gets the data
  2. does the main background display
  3. sets up the DiaryDay objects and calls their render methods
  4. holds delegated event listeners for the DiaryItems

Constructor

YAHOO.widget.Diary ( el , oDS , oCfg )
Parameters:
el <HTMLElement> Container element for the Diary
oDS <YAHOO.util.DataSource> DataSource instance. Each 'row' in the data will need a start date/time and end date/time, both as js Date objects. Use the fieldMap config attribute to map data fields to those expected by Diary - DTSTART and DTEND.
oCfg <Object> Object literal of config values.

Properties

_cacheStartEndTimes - protected Object

Caches start/end times for view changes
Default Value: {startTime: 8; endTime: 20}

_colToDayMap - protected Object

provieds a map from columns id's to dates (in seconds)

_colWidth - protected Int

Column widths

_diaryData - protected Array

Array holding currently displayed data

_ds - protected YAHOO.util.DataSource

Reference to the datasource passed in

_filters - protected Object

Object of filters currently applied

_footerEl - protected HTMLElement

Footer element
Default Value: undefined

_itemHash - protected Array

Array holding DiaryItem element ids and DiaryItem refs

_lastData - protected Object

Object with cache of last data, pre-parsed, from datasource

_loadingElId - protected String

Id of 'loading' element
Default Value: ''

_lockDragDrop - protected Boolean

Whether drag-dropping of DiaryItems is allowed

_lockResize - protected Boolean

Whether resizing of DiaryItems is allowed

_navCalendar - protected YAHOO.widget.Calendar

Navigation calendar

_selector - protected Object

Holds details of a click-and-drag to add new Items

_tooltip - protected YAHOO.widget.Tooltip

Re-usable tooltip, if included on page

Methods

_applyFilters

protected void _applyFilters ( )
Re-applies all filters currently in place. Called internally when navigating to keep existing filters in place
Returns: void

_applyFiltersToElement

protected void _applyFiltersToElement ( HTMLElement )
Re-applies all filters to the element passed. Called internally when navigating to keep existing filters in place.
Parameters:
HTMLElement <object>
Returns: void

_changeView

protected void _changeView ( )
Changes between views (day/week/month)
Returns: void

_destroyData

protected void _destroyData ( )
Clears out existing data
Returns: void

_destroyDays

protected void _destroyDays ( )
Destroys the days rendered in the diary
Returns: void

_doCalNav

protected void _doCalNav ( ev , selDate )
Go to any start date (set by calendar)
Parameters:
ev <Event>
selDate <Array> Selected date, as returned by YAHOO.util.Calendar (ie array [[[ yyyy, mm, dd]]])
Returns: void

_doFirstDayOfTodaysWeek

protected void _doFirstDayOfTodaysWeek ( )
Goes to the start of this week
Returns: void

_doNext

protected void _doNext ( )
Go to the next day/week
Returns: void

_doPrevious

protected void _doPrevious ( )
Go to the previous day/week
Returns: void

_endSelector

protected void _endSelector ( ev )
Called at the end of selector - creating a new item by drag-drop
Parameters:
ev <Event>
Returns: void

_getData

protected void _getData ( oDS )
Gets data from the data source
Parameters:
oDS <YAHOO.util.DataSource>
Returns: void

_handleColumnHeaderClick

protected void _handleColumnHeaderClick ( )
Handles column header clicks. Does different things depending on view: on week view, goes to day-to-view; on day view goes back to week view; on month view does nothing.
Returns: void

_handleMonthToWeekClick

protected void _handleMonthToWeekClick ( )
Handles clicks on the right-hand 'go to week view' when in month view. Works out which week it is and then reformats.
Returns: void

_parseData

protected void _parseData ( req , data )
Parses the data when it comes
Parameters:
req <Object> Request object
data <Object> Data returned by DataSource
Returns: void

_parseDataUsingFieldMap

protected Object _parseDataUsingFieldMap ( oData )
Uses fieldMap given in config to extract from raw data to format expected by DiaryItems. Values in the fieldMap may be strings or functions, so this applies them as appropriate.
Parameters:
oData <Object> Object literal containing raw data to be parsed
Returns: Object
Object literal containing parsed data.

_reDo

protected void _reDo ( getData )
Redraws calendar. If getData is true, it will delete DiaryItems and data currently held first
Parameters:
getData <Boolean>
Returns: void

_reFormat

protected void _reFormat ( )
Called on formatChange to alter start/end time window or day/week/month to view.
Returns: void

_removeListeners

protected void _removeListeners ( )
Removes event listeners
Returns: void

_renderColumnLabels

protected void _renderColumnLabels ( )
Adds column headers and date labels, and click listeners
Returns: void

_renderCoreDiary

protected void _renderCoreDiary ( )
Renders the Diary except for the items
Returns: void

_renderFooter

protected void _renderFooter ( )
Adds a footer element for status messages
Returns: void

_renderLoading

protected void _renderLoading ( )
Adds a div with a 'loading' class to indicate data's on it's way.
Returns: void

_renderNav

protected void _renderNav ( )
Renders the navigation. Provides left, today, calendar and right buttons, and adds listeners.
Returns: void

_renderTitle

protected void _renderTitle ( )
Puts the title text in the title container box Doesn't actually produce the title string though.
Returns: void

_renderTooltip

protected void _renderTooltip ( )
Renders tooltip for showing full info
Returns: void

_resizeSelectorDiv

protected void _resizeSelectorDiv ( ev )
Resizes the selector when creating a new item
Parameters:
ev <Event>
Returns: void

_setFooter

protected void _setFooter ( )
Adds text to the footer element, and optionally hides it after hideDelay. Called onFooterStringChange. Animated opacity change if Anim is available.
Returns: void

_setViewFormat

protected void _setViewFormat ( format )
Sets week/day/month view
Parameters:
format <String> type of view
Returns: void

_startNewItem

protected void _startNewItem ( ev )
Click and drag to add new DiaryItem
Parameters:
ev <Event>
Returns: void

addItem

DiaryItem addItem ( oCfg , redraw )
Add an item to the Diary
Parameters:
oCfg <Object> Data for the new item, minimally- DTSTART: oDate, DTEND: oDate
redraw <Boolean> Whether to redraw once it's added
Returns: DiaryItem
The new item created

addItemFilter

Int addItemFilter ( selector )
Filters DiaryItems based on css selector. selector passed will be appended directly to ".lplt-diary-item" If nothing is passed, it will filter for all (ie hide everything)
Parameters:
selector <String>
Returns: Int
Number of items hidden

destroy

void destroy ( )
destroys the Diary
Returns: void

getDiaryDay

Object getDiaryDay ( secsDate )
Get the DiaryDay object based on date (in seconds)
Parameters:
secsDate <Int> start time in seconds.
Returns: Object
DiaryDay

getItem

DiaryItem getItem ( elId )
Returns the DiaryItem with id elId
Parameters:
elId <String>
Returns: DiaryItem

getNavContainer

HTMLElement getNavContainer ( )
Returns the container for the navigation els
Returns: HTMLElement

handleDayClick

void handleDayClick ( ev , el , container )
Handles clicks on the day container
Parameters:
ev <Event>
el <HTMLElement>
container <HTMLElement>
Returns: void

handleItemClick

protected void handleItemClick ( ev , el )
When a DiaryItem is clicked
Parameters:
ev <Event>
el <HTMLElement>
el <HTMLElement>
Returns: void

handleItemMouseEnter

protected void handleItemMouseEnter ( ev , el , container )
When a DiaryItem is mouseenter-ed. Default behaviour is to show a tooltip (if this was enabled in the config). The itemMouseEnter event is fired first; return false to this to stop the default behaviour.
Parameters:
ev <Event>
el <HTMLElement>
container <HTMLElement>
Returns: void

initData

protected void initData ( el , oCfg , oDS )
Store a reference to the data and get it
Parameters:
el <HTMLElement>
oCfg <Object>
oDS <YAHOO.util.DataSource>
Returns: void

initListeners

protected void initListeners ( )
Set up delegated event listeners for rendering and mouse events
Returns: void

lock

void lock ( lockResize , lockDragDrop )
Locks resize and/or drag-drop for all currently existing DiaryItems.
Parameters:
lockResize <Boolean>
lockDragDrop <Boolean>
Returns: void

rebuildColumns

void rebuildColumns ( )
Goes through existing data and updates columns and blocks - useful for visibility changes of items
Returns: void

removeItem

void removeItem ( item )
Removes an item from the diary and destroys the element
Parameters:
item <Object> DiaryItem to remove
Returns: void

removeItemFilter

Int removeItemFilter ( selector )
Removes filter on DiaryItems based on css selector. selector passed will be appended directly to ".lplt-diary-item" If nothing is passed, it will filter for all (ie show everything)
Parameters:
selector <String>
Returns: Int
Number of items shown

render

void render ( )
Renders the Diary. Called after data is parsed - shouldn't need to be called otherwise.
Returns: void

renderDateLabel

String renderDateLabel ( oDate )
Overwritable to render date labels at the top of each column. Default is oDate.toString().substring(0, 10);
Parameters:
oDate <Date> Date object
Returns: String

renderItems

void renderItems ( )
Renders the diary Items onto the Diary
Returns: void

renderTitle

String renderTitle ( titleString )
Overwriteable to render title string Can use strftime identifiers in the format string
Parameters:
titleString <String> Title string with strftime placeholders.
Returns: String

setupDays

protected void setupDays ( )
Display days of the week holders
Returns: void

showNavCalendar

void showNavCalendar ( ev )
Shows the calendar navigator
Parameters:
ev <Event> Event object; used to position. Pass an object with ev.clientX and ev.clientY to position the Calendar manually.
Returns: void

toggleItemFilter

Int toggleItemFilter ( selector )
Toggles an item filter
Parameters:
selector <String>
Returns: Int
Number of items shown/hidden: positive => shown; negative value => hidden

unlock

void unlock ( unlockResize , unlockDragDrop )
Unlocks resize and/or drag-drop for all currently existing DiaryItems.
Parameters:
unlockResize <Boolean>
unlockDragDrop <Boolean>
Returns: void

Events

allowCreateMultiDayItemsChange

allowCreateMultiDayItemsChange ( event )
Fires when the value for the configuration attribute 'allowCreateMultiDayItems' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

animateChange

animateChange ( event )
Fires when the value for the configuration attribute 'animate' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeAddItem

beforeAddItem ( Object )
Before an item is added to the Diary
Parameters:
Object <object> Object literal containing data

beforeAllowCreateMultiDayItemsChange

beforeAllowCreateMultiDayItemsChange ( event )
Fires before the value for the configuration attribute 'allowCreateMultiDayItems' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeAnimateChange

beforeAnimateChange ( event )
Fires before the value for the configuration attribute 'animate' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeCalenderNavChange

beforeCalenderNavChange ( event )
Fires before the value for the configuration attribute 'calenderNav' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeDisplayChange

beforeDisplayChange ( event )
Fires before the value for the configuration attribute 'display' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeEndDateChange

beforeEndDateChange ( event )
Fires before the value for the configuration attribute 'endDate' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeFieldMapChange

beforeFieldMapChange ( event )
Fires before the value for the configuration attribute 'fieldMap' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeItemClickCreateNewChange

beforeItemClickCreateNewChange ( event )
Fires before the value for the configuration attribute 'itemClickCreateNew' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeKeepFirstDayChange

beforeKeepFirstDayChange ( event )
Fires before the value for the configuration attribute 'keepFirstDay' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeLocaleChange

beforeLocaleChange ( event )
Fires before the value for the configuration attribute 'locale' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforePxPerHourChange

beforePxPerHourChange ( event )
Fires before the value for the configuration attribute 'pxPerHour' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeReDo

beforeReDo ( )
Fired before the Diary is redrawn, which happens on navigation (onStartDateChange)

beforeScaleColumnsChange

beforeScaleColumnsChange ( event )
Fires before the value for the configuration attribute 'scaleColumns' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeStartDateChange

beforeStartDateChange ( event )
Fires before the value for the configuration attribute 'startDate' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeTitleStringChange

beforeTitleStringChange ( event )
Fires before the value for the configuration attribute 'titleString' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeTooltipChange

beforeTooltipChange ( event )
Fires before the value for the configuration attribute 'tooltip' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeUseCssCategoriesChange

beforeUseCssCategoriesChange ( event )
Fires before the value for the configuration attribute 'useCssCategories' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeWidthChange

beforeWidthChange ( event )
Fires before the value for the configuration attribute 'width' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

calenderNavChange

calenderNavChange ( event )
Fires when the value for the configuration attribute 'calenderNav' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

dataFailure

dataFailure ( oArgs.request )
Fired when data has failed
Parameters:
oArgs.request <object> Request object from DataSource

dataRequest

dataRequest ( oArgs.DataSource , oArgs.target )
Fired before data requested
Parameters:
oArgs.DataSource <object> DataSource
oArgs.target <object> Diary

dayClick

dayClick ( oArgs.el , oArgs.day )
When a day container is clicked.
Parameters:
oArgs.el <object> The element clicked on
oArgs.day <object> A date object representing the day clicked

destroy

destroy ( )
When the Diary has finished destorying

destroyData

destroyData ( )
After all the data has been destroyed.

displayChange

displayChange ( event )
Fires when the value for the configuration attribute 'display' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

endDateChange

endDateChange ( event )
Fires when the value for the configuration attribute 'endDate' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

fieldMapChange

fieldMapChange ( event )
Fires when the value for the configuration attribute 'fieldMap' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

itemBeforeEndCreate

itemBeforeEndCreate ( )
Fired on the mouseup after drag-selecting to create a new Item. This is fired before the actual item is created and rendered. If subscribers return false the start is cancelled.

itemBeforeEndMove

itemBeforeEndMove ( oArgs.from , oArgs.to , oArgs.item , oArgs.originEvent )
fired when an item is moved or resized (ie the times change). Return false to cancel the resize/move
Parameters:
oArgs.from <object> Object literal containing original DTSTART and DTEND
oArgs.to <object> Object literal containing final DTSTART and DTEND
oArgs.item <object> DiaryItem that's being moved
oArgs.originEvent <object> Original event from resize/dragdrop passed through.

itemBeforeStartCreate

itemBeforeStartCreate ( oArgs.originEvent )
Before starting to create a new item by click and dragging If subscribers return false the start is cancelled.
Parameters:
oArgs.originEvent <object> Event passed through

itemBeforeStartMove

itemBeforeStartMove ( oArgs.item )
Fired before everything starts moving. Return false to cancel move.
Parameters:
oArgs.item <object> DiaryItem that's about to be moved.

itemClick

itemClick ( oArgs.item , oArgs.ev , oArgs.el , oArgs.container )
Parameters:
oArgs.item <object> The DiaryItem clicked on
oArgs.ev <object> The click event
oArgs.el <object> The element clicked on
oArgs.container <object> The container element (from delegate)

itemClickCreateNewChange

itemClickCreateNewChange ( event )
Fires when the value for the configuration attribute 'itemClickCreateNew' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

itemEndCreate

itemEndCreate ( )
Fired at the end of thee mouseup after drag-selecting to create a new Item. This is fired after the actual item is created and rendered.

itemEndMove

itemEndMove ( oArgs.from , oArgs.to , oArgs.item , oArgs.originEvent )
fired when an item is moved or resized (ie the times change)
Parameters:
oArgs.from <object> Object literal containing original DTSTART and DTEND
oArgs.to <object> Object literal containing final DTSTART and DTEND
oArgs.item <object> DiaryItem that's being moved
oArgs.originEvent <object> Original event from resize/dragdrop passed through.

itemMouseEnter

itemMouseEnter ( oArgs.item , oArgs.ev , oArgs.el , oArgs.container )
When a mouse enters a DiaryItem. Return false to cancel default behaviour (tooltip at the moment).
Parameters:
oArgs.item <object> The DiaryItem mouseentered
oArgs.ev <object> The mouseenter event
oArgs.el <object> The element
oArgs.container <object> The container element (from delegate)

keepFirstDayChange

keepFirstDayChange ( event )
Fires when the value for the configuration attribute 'keepFirstDay' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

localeChange

localeChange ( event )
Fires when the value for the configuration attribute 'locale' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

parseData

parseData ( oArgs.data , oArgs.type , oArgs.target )
Fired when data parsed and ready
Parameters:
oArgs.data <object> Parsed data
oArgs.type <object> "parseData"
oArgs.target <object> Diary

pxPerHourChange

pxPerHourChange ( event )
Fires when the value for the configuration attribute 'pxPerHour' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

render

render ( oArgs.target )
When the rendering of the Diary is complete
Parameters:
oArgs.target <object> Diary

scaleColumnsChange

scaleColumnsChange ( event )
Fires when the value for the configuration attribute 'scaleColumns' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

startDateChange

startDateChange ( event )
Fires when the value for the configuration attribute 'startDate' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

titleStringChange

titleStringChange ( event )
Fires when the value for the configuration attribute 'titleString' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

tooltipChange

tooltipChange ( event )
Fires when the value for the configuration attribute 'tooltip' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

useCssCategoriesChange

useCssCategoriesChange ( event )
Fires when the value for the configuration attribute 'useCssCategories' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

widthChange

widthChange ( event )
Fires when the value for the configuration attribute 'width' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

Configuration Attributes

allowCreateMultiDayItems - Boolean

Whether, when creating new items, they're allowed to span multi days
Default Value: : false

animate - Boolean

Whether to use animation when moving items around. Write once.
Default Value: : false

calenderNav - Boolean

Whether to use a YAHOO.widget.Calendar in the navigation. Write once.
Default Value: true

display - Object

Display formats: object literal with format and start and end times (in 24-hour clock hours) displayed in the main window (the rest are above and below the scroll. 
{ format: "week", startTime: 8, endTime: 20 }
. Possible formats are "day", "week", "month", and working on "year".
Default Value: 
{ format: "week", startTime: 8, endTime: 20 }

endDate - {Date} (Optional)

Final date currently displayed on Diary
Default Value: 7 days on from startDate

fieldMap - {Object}

Field map, mapping keys of DataSource to expected keys of data for DiaryItems. DiaryItem keys are the keys in the object passed; values are the names of the fields in the DataSource. backClass is the css class string applied to the background container of the DiaryItem; detailClass is the css class string applied to the element holding the text of the item. These can be used by addItemFilter to show or hide items by category.

DTSTART and DTEND need to be strings; but other values may be functions. These functions are called on the Diary instance (i.e. this in your function is the Diary, and receive the raw data literal as their only argument.

Write once
Default Value: 
 
         { UID: "UID",
           DTSTART: "DTSTART",
           DTEND:   "DTEND",
           SUMMARY: "SUMMARY",
           DESCRIPTION: "DESCRIPTION",
           CATEGORIES: "CATEGORIES",
           LOCATION: "LOCATION",
           URL: "URL",
           backClass: "backClass",
           detailClass: "detailClass" }

itemClickCreateNew - Boolean

Whether you can click and drag on an existing item to start creating a new one.
Default Value: false

keepFirstDay - {Boolean | Int}

Whether the first column should be restricted to a particular day of the week. If so, pass the day of the week (with 0 = Sunday).
Default Value: false

locale - {String}

Which locale to use when parsing dates. See YAHOO.util.Date and YAHOO.util.DateLocale. For more info.
Default Value: "en-GB"

pxPerHour - Number

Number of pixels per hour. Write once.
Default Value: : 20

scaleColumns - Boolean

Whether to scale columns to width. writeOnce
Default Value: true

startDate - {Date}

When to start the diary display from

titleString - String

String to use as template for title. You can use strftime type identifiers. Write once.
Default Value: "Diary w/c %A, %e %B %Y"

tooltip - Boolean

Whether to use tooltip for mouseover events to show details. Write once.
Default Value: : false

useCssCategories - Boolean

If true, any CATEGORIES will be added as css classes to the container element for the DiaryItem, allowing styling and filtering. Anything passed to backClass will also be added. Spaces in categories will be changed to hyphens.
Default Value: false

width - Number (Optional) Will use element styled width if no value provided and it has one

Overall width of Diary (in pixels)

Modules

Files

Copyright © 2010 Yahoo! Inc. All rights reserved.