Servis-Rhino 4211B Betriebsanweisung PDF herunterladen (Seite 194)

column "column" and "matrix". A column style shows data for a period (eg. a day) in a single

column. The matrix style shows a "grid" of entries.

The data shown in the Calendar is bound to an instance of a Dojo Store. If the content of the store

changes, so does the representation of the Calendar. Conversely, if a user interactively changes the

Calendar, the store updates itself to reflect the change at the data level.

Each of the items in the store has the following format:

{

id: // A unique id for the store.

summary: // A text value that will be shown as the summary for the entry

startTime: // A JavaScript Date object for the start date/time

endTime: // A JavaScript Date object for the end date/time

allDay: // A JavaScript boolean flag to mark this as an "all day" entry

}

The "id" property is a unique identifier that each item must posses. This is also mandated by the

Dojo store technology. This unique

An example of creating a suitable store would be:

var store = new Observable(new Memory({data: someData}));

This can be set dynamically on the Calendar using its "store" property.

Since the store is required to implement the dojo/store/Observable model, we can define

an observe on a query to be informed when something in the model changes. This might be a

change caused by the user by dragging an entry (for example).

var results = store.query({});

results.observe(function(item, removedFrom, insertedInto) {

//debugger;

console.log(item);

}, true);

The function passed on the observe() is supplied three parameters:

• item – The item that has changed.

• removedFrom – If the value is -1, then this represents a new addition.

• insertedInto – If the value is -1, then this represents a deletion.

Each item can be styled individually. When an item is to be shown, a function defined by the

"cssClassFunc" property is called and is passed the item to be shown. This function can then

return a class name (String) which will be applied to the item.

When working with the Calendar widget, when it has focus, keyboard events can be sent to it.

• Cursor left – Select previous entry

• Cursor right – Select next entry

• Click – Select clicked entry

With an entry selected, pressing "Enter" will enter edit mode. Once can then use the cursor keys to

move the entry around. Holding the control key with the cursor allows one to expand or contract

the entry. Press "Enter" again to commit any changes made or press "Escape" to cancel any

pending changes without commiting.

At the top of a calendar is a set of navigation buttons.

These navigation buttons are defined by a piece of template HTML. When the calendar instance is

Page 194

1 2 ... 189 190 191 192 193 194 195 196 197 198 199 ... 297 298

Servis-Rhino 4211B Betriebsanweisung Seite 194