1 <div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.calendar.CalendarView-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.calendar.CalendarView-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.calendar.CalendarView-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.calendar.CalendarView-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.calendar.CalendarView"><img src="resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div><h1>Class <a href="source/CalendarView.html#cls-Ext.calendar.CalendarView">Ext.calendar.CalendarView</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.calendar</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/CalendarView.html#cls-Ext.calendar.CalendarView">CalendarView.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/CalendarView.html#cls-Ext.calendar.CalendarView">CalendarView</a></td></tr><tr><td class="label">Subclasses:</td><td class="hd-info"><a href="output/Ext.calendar.DayBodyView.html" ext:cls="Ext.calendar.DayBodyView">DayBodyView</a>, <a href="output/Ext.calendar.MonthView.html" ext:cls="Ext.calendar.MonthView">MonthView</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr></table><div class="description"><p>This is an abstract class that serves as the base for other calendar views. This class is not
\r
2 intended to be directly instantiated.</p>
\r
3 <p>When extending this class to create a custom calendar view, you must provide an implementation
\r
4 for the <code>renderItems</code> method, as there is no default implementation for rendering events
\r
5 The rendering logic is totally dependent on how the UI structures its data, which
\r
6 is determined by the underlying UI template (this base class does not have a template).</p></div><div class="hr"></div><a id="Ext.calendar.CalendarView-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-ddCreateEventText"></a><b><a href="source/CalendarView.html#cfg-Ext.calendar.CalendarView-ddCreateEventText">ddCreateEventText</a></b> : String<div class="mdesc"><div class="short">The text to display inside the drag proxy while dragging over the calendar to create a new event (defaults to
7 'Crea...</div><div class="long">The text to display inside the drag proxy while dragging over the calendar to create a new event (defaults to
\r
8 'Create event for {0}' where {0} is a date range supplied by the view)</div></div></td><td class="msource">CalendarView</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-ddMoveEventText"></a><b><a href="source/CalendarView.html#cfg-Ext.calendar.CalendarView-ddMoveEventText">ddMoveEventText</a></b> : String<div class="mdesc"><div class="short">The text to display inside the drag proxy while dragging an event to reposition it (defaults to
9 'Move event to {0}'...</div><div class="long">The text to display inside the drag proxy while dragging an event to reposition it (defaults to
\r
10 'Move event to {0}' where {0} is the updated event start date/time supplied by the view)</div></div></td><td class="msource">CalendarView</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-ddResizeEventText"></a><b><a href="source/CalendarView.html#cfg-Ext.calendar.CalendarView-ddResizeEventText">ddResizeEventText</a></b> : String<div class="mdesc"><div class="short">The string displayed to the user in the drag proxy while dragging the resize handle of an event (defaults to
11 'Updat...</div><div class="long">The string displayed to the user in the drag proxy while dragging the resize handle of an event (defaults to
\r
12 'Update event to {0}' where {0} is the updated event start-end range supplied by the view). Note that
\r
13 this text is only used in views
\r
14 that allow resizing of events.</div></div></td><td class="msource">CalendarView</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-enableAddFx"></a><b><a href="source/CalendarView.html#cfg-Ext.calendar.CalendarView-enableAddFx">enableAddFx</a></b> : Boolean<div class="mdesc"><div class="short">True to enable a visual effect on adding a new event (the default), false to disable it. Note that if
15 enableFx is f...</div><div class="long">True to enable a visual effect on adding a new event (the default), false to disable it. Note that if
\r
16 <a href="output/Ext.calendar.CalendarView.html#Ext.calendar.CalendarView-enableFx" ext:member="enableFx" ext:cls="Ext.calendar.CalendarView">enableFx</a> is false it will override this value. The specific effect that runs is defined in the
\r
17 <a href="output/Ext.calendar.CalendarView.html#Ext.calendar.CalendarView-doAddFx" ext:member="doAddFx" ext:cls="Ext.calendar.CalendarView">doAddFx</a> method.</div></div></td><td class="msource">CalendarView</td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-enableDD"></a><b><a href="source/CalendarView.html#cfg-Ext.calendar.CalendarView-enableDD">enableDD</a></b> : Boolean<div class="mdesc">True to enable drag and drop in the calendar view (the default), false to disable it</div></td><td class="msource">CalendarView</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-enableFx"></a><b><a href="source/CalendarView.html#cfg-Ext.calendar.CalendarView-enableFx">enableFx</a></b> : Boolean<div class="mdesc"><div class="short">Determines whether or not visual effects for CRUD actions are enabled (defaults to true). If this is false
18 it will o...</div><div class="long">Determines whether or not visual effects for CRUD actions are enabled (defaults to true). If this is false
\r
19 it will override any values for <a href="output/Ext.calendar.CalendarView.html#Ext.calendar.CalendarView-enableAddFx" ext:member="enableAddFx" ext:cls="Ext.calendar.CalendarView">enableAddFx</a>, <a href="output/Ext.calendar.CalendarView.html#Ext.calendar.CalendarView-enableUpdateFx" ext:member="enableUpdateFx" ext:cls="Ext.calendar.CalendarView">enableUpdateFx</a> or <a href="output/enableRemoveFx.html" ext:cls="enableRemoveFx">enableRemoveFx</a> and
\r
20 all animations will be disabled.</div></div></td><td class="msource">CalendarView</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-enableRemoveFx"></a><b><a href="source/CalendarView.html#cfg-Ext.calendar.CalendarView-enableRemoveFx">enableRemoveFx</a></b> : Boolean<div class="mdesc"><div class="short">True to enable a visual effect on removing an event (the default), false to disable it. Note that if
21 enableFx is fa...</div><div class="long">True to enable a visual effect on removing an event (the default), false to disable it. Note that if
\r
22 <a href="output/Ext.calendar.CalendarView.html#Ext.calendar.CalendarView-enableFx" ext:member="enableFx" ext:cls="Ext.calendar.CalendarView">enableFx</a> is false it will override this value. The specific effect that runs is defined in the
\r
23 <a href="output/Ext.calendar.CalendarView.html#Ext.calendar.CalendarView-doRemoveFx" ext:member="doRemoveFx" ext:cls="Ext.calendar.CalendarView">doRemoveFx</a> method.</div></div></td><td class="msource">CalendarView</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-enableUpdateFx"></a><b><a href="source/CalendarView.html#cfg-Ext.calendar.CalendarView-enableUpdateFx">enableUpdateFx</a></b> : Boolean<div class="mdesc"><div class="short">True to enable a visual effect on updating an event, false to disable it (the default). Note that if
24 enableFx is fa...</div><div class="long">True to enable a visual effect on updating an event, false to disable it (the default). Note that if
\r
25 <a href="output/Ext.calendar.CalendarView.html#Ext.calendar.CalendarView-enableFx" ext:member="enableFx" ext:cls="Ext.calendar.CalendarView">enableFx</a> is false it will override this value. The specific effect that runs is defined in the
\r
26 <a href="output/Ext.calendar.CalendarView.html#Ext.calendar.CalendarView-doUpdateFx" ext:member="doUpdateFx" ext:cls="Ext.calendar.CalendarView">doUpdateFx</a> method.</div></div></td><td class="msource">CalendarView</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-monitorResize"></a><b><a href="source/CalendarView.html#cfg-Ext.calendar.CalendarView-monitorResize">monitorResize</a></b> : Boolean<div class="mdesc"><div class="short">True to monitor the browser's resize event (the default), false to ignore it. If the calendar view is rendered
27 into ...</div><div class="long">True to monitor the browser's resize event (the default), false to ignore it. If the calendar view is rendered
\r
28 into a fixed-size container this can be set to false. However, if the view can change dimensions (e.g., it's in
\r
29 fit layout in a viewport or some other resizable container) it is very important that this config is true so that
\r
30 any resize event propagates properly to all subcomponents and layouts get recalculated properly.</div></div></td><td class="msource">CalendarView</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-spansHavePriority"></a><b><a href="source/CalendarView.html#cfg-Ext.calendar.CalendarView-spansHavePriority">spansHavePriority</a></b> : Boolean<div class="mdesc"><div class="short">Allows switching between two different modes of rendering events that span multiple days. When true,
31 span events are...</div><div class="long">Allows switching between two different modes of rendering events that span multiple days. When true,
\r
32 span events are always sorted first, possibly at the expense of start dates being out of order (e.g.,
\r
33 a span event that starts at 11am one day and spans into the next day would display before a non-spanning
\r
34 event that starts at 10am, even though they would not be in date order). This can lead to more compact
\r
35 layouts when there are many overlapping events. If false (the default), events will always sort by start date
\r
36 first which can result in a less compact, but chronologically consistent layout.</div></div></td><td class="msource">CalendarView</td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-startDay"></a><b><a href="source/CalendarView.html#cfg-Ext.calendar.CalendarView-startDay">startDay</a></b> : Number<div class="mdesc">The 0-based index for the day on which the calendar week begins (0=Sunday, which is the default)</div></td><td class="msource">CalendarView</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-trackMouseOver"></a><b><a href="source/CalendarView.html#cfg-Ext.calendar.CalendarView-trackMouseOver">trackMouseOver</a></b> : Boolean<div class="mdesc"><div class="short">Whether or not the view tracks and responds to the browser mouseover event on contained elements (defaults to
37 true)....</div><div class="long">Whether or not the view tracks and responds to the browser mouseover event on contained elements (defaults to
\r
38 true). If you don't need mouseover event highlighting you can disable this.</div></div></td><td class="msource">CalendarView</td></tr></tbody></table><a id="Ext.calendar.CalendarView-props"></a><h2>Public Properties</h2><div class="no-members">This class has no public properties.</div><a id="Ext.calendar.CalendarView-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-CalendarView"></a><b><a href="source/CalendarView.html#cls-Ext.calendar.CalendarView">CalendarView</a></b>( <code>Object config</code> )
39 <div class="mdesc"><div class="short"></div><div class="long"><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>config</code> : Object<div class="sub-desc">The config object</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-getEventBodyMarkup"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-getEventBodyMarkup">getEventBodyMarkup</a></b>()
41 String<div class="mdesc"><div class="short">Returns a string of HTML template markup to be used as the body portion of the event template created
42 by getEventTem...</div><div class="long">Returns a string of HTML template markup to be used as the body portion of the event template created
\r
43 by <a href="output/Ext.calendar.CalendarView.html#Ext.calendar.CalendarView-getEventTemplate" ext:member="getEventTemplate" ext:cls="Ext.calendar.CalendarView">getEventTemplate</a>. This provdes the flexibility to customize what's in the body without
\r
44 having to override the entire XTemplate. This string can include any valid <a href="output/Ext.Template.html" ext:cls="Ext.Template">Ext.Template</a> code, and
\r
45 any data tokens accessible to the containing event template can be referenced in this string.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc">The body template string</div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-getEventEls"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-getEventEls">getEventEls</a></b>( <code>String eventId</code> )
47 Ext.CompositeElement<div class="mdesc"><div class="short"></div><div class="long"><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventId</code> : String<div class="sub-desc"></div></li></ul><strong>Returns:</strong><ul><li><code>Ext.CompositeElement</code><div class="sub-desc">The matching CompositeElement of nodes
48 that comprise the rendered event. Any event that spans across a view
49 boundary will contain more than one internal Element.</div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-getEventIdFromEl"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-getEventIdFromEl">getEventIdFromEl</a></b>( <code>String/Element/HTMLElement el</code> )
51 void<div class="mdesc"><div class="short">Retrieve an Event object's id from its corresponding node in the DOM.</div><div class="long">Retrieve an Event object's id from its corresponding node in the DOM.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>el</code> : String/Element/HTMLElement<div class="sub-desc">An <a href="output/Ext.Element.html" ext:cls="Ext.Element">Ext.Element</a>, DOM node or id</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-getEventSelectorCls"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-getEventSelectorCls">getEventSelectorCls</a></b>( <code>String eventId</code>, <code>Boolean forSelect</code> )
53 String<div class="mdesc"><div class="short"></div><div class="long"><div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventId</code> : String<div class="sub-desc"></div></li><li><code>forSelect</code> : Boolean<div class="sub-desc"></div></li></ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc">The selector class</div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-getEventTemplate"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-getEventTemplate">getEventTemplate</a></b>()
55 Ext.XTemplate<div class="mdesc"><div class="short">Returns the XTemplate that is bound to the calendar's event store (it expects records of type
56 Ext.calendar.EventReco...</div><div class="long"><p>Returns the XTemplate that is bound to the calendar's event store (it expects records of type
\r
57 <a href="output/Ext.calendar.EventRecord.html" ext:cls="Ext.calendar.EventRecord">Ext.calendar.EventRecord</a>) to populate the calendar views with events. Internally this method
\r
58 by default generates different markup for browsers that support CSS border radius and those that don't.
\r
59 This method can be overridden as needed to customize the markup generated.</p>
\r
60 <p>Note that this method calls <a href="output/Ext.calendar.CalendarView.html#Ext.calendar.CalendarView-getEventBodyMarkup" ext:member="getEventBodyMarkup" ext:cls="Ext.calendar.CalendarView">getEventBodyMarkup</a> to retrieve the body markup for events separately
\r
61 from the surrounding container markup. This provdes the flexibility to customize what's in the body without
\r
62 having to override the entire XTemplate. If you do override this method, you should make sure that your
\r
63 overridden version also does the same.</p><div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Ext.XTemplate</code><div class="sub-desc">The event XTemplate</div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-getStartDate"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-getStartDate">getStartDate</a></b>()
65 Date<div class="mdesc"><div class="short">Returns the start date of the view, as set by setStartDate. Note that this may not
66 be the first date displayed in t...</div><div class="long">Returns the start date of the view, as set by <a href="output/Ext.calendar.CalendarView.html#Ext.calendar.CalendarView-setStartDate" ext:member="setStartDate" ext:cls="Ext.calendar.CalendarView">setStartDate</a>. Note that this may not
\r
67 be the first date displayed in the rendered calendar -- to get the start and end dates displayed
\r
68 to the user use <a href="output/Ext.calendar.CalendarView.html#Ext.calendar.CalendarView-getViewBounds" ext:member="getViewBounds" ext:cls="Ext.calendar.CalendarView">getViewBounds</a>.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Date</code><div class="sub-desc">The start date</div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-highlightEvent"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-highlightEvent">highlightEvent</a></b>( <code>Ext.CompositeElement els</code>, <span title="Optional" class="optional">[<code>Object color</code>]</span>, <span title="Optional" class="optional">[<code>Object o</code>]</span> )
70 void<div class="mdesc"><div class="short">Visually highlights an event using Ext.Fx.highlight config options.
71 If highlightEventActions is false this method wi...</div><div class="long">Visually highlights an event using <a href="output/Ext.Fx.html#Ext.Fx-highlight" ext:member="highlight" ext:cls="Ext.Fx">Ext.Fx.highlight</a> config options.
\r
72 If <a href="output/Ext.calendar.CalendarView.html#Ext.calendar.CalendarView-highlightEventActions" ext:member="highlightEventActions" ext:cls="Ext.calendar.CalendarView">highlightEventActions</a> is false this method will have no effect.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>els</code> : Ext.CompositeElement<div class="sub-desc">The element(s) to highlight</div></li><li><code>color</code> : Object<div class="sub-desc">(optional) The highlight color. Should be a 6 char hex
\r
73 color without the leading # (defaults to yellow: 'ffff9c')</div></li><li><code>o</code> : Object<div class="sub-desc">(optional) Object literal with any of the <a href="output/Ext.Fx.html" ext:cls="Ext.Fx">Ext.Fx</a> config
\r
74 options. See <a href="output/Ext.Fx.html#Ext.Fx-highlight" ext:member="highlight" ext:cls="Ext.Fx">Ext.Fx.highlight</a> for usage examples.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-isToday"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-isToday">isToday</a></b>()
76 Boolean<div class="mdesc"><div class="short">Returns true if the view is currently displaying today's date, else false.</div><div class="long">Returns true if the view is currently displaying today's date, else false.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Boolean</code><div class="sub-desc">True or false</div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-moveDays"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-moveDays">moveDays</a></b>( <code>Number value</code> )
78 void<div class="mdesc"><div class="short">Shifts the view by the passed number of days relative to the currently set date</div><div class="long">Shifts the view by the passed number of days relative to the currently set date<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>value</code> : Number<div class="sub-desc">The number of days (positive or negative) by which to shift the view</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-moveMonths"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-moveMonths">moveMonths</a></b>( <code>Number value</code> )
80 void<div class="mdesc"><div class="short">Shifts the view by the passed number of months relative to the currently set date</div><div class="long">Shifts the view by the passed number of months relative to the currently set date<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>value</code> : Number<div class="sub-desc">The number of months (positive or negative) by which to shift the view</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-moveNext"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-moveNext">moveNext</a></b>()
82 void<div class="mdesc"><div class="short">Updates the view to the next consecutive date(s)</div><div class="long">Updates the view to the next consecutive date(s)<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-movePrev"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-movePrev">movePrev</a></b>()
84 void<div class="mdesc"><div class="short">Updates the view to the previous consecutive date(s)</div><div class="long">Updates the view to the previous consecutive date(s)<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-moveTo"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-moveTo">moveTo</a></b>( <code>Date dt</code> )
86 void<div class="mdesc"><div class="short">Updates the view to contain the passed date</div><div class="long">Updates the view to contain the passed date<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>dt</code> : Date<div class="sub-desc">The date to display</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-moveToday"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-moveToday">moveToday</a></b>()
88 void<div class="mdesc"><div class="short">Updates the view to show today</div><div class="long">Updates the view to show today<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-moveWeeks"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-moveWeeks">moveWeeks</a></b>( <code>Number value</code> )
90 void<div class="mdesc"><div class="short">Shifts the view by the passed number of weeks relative to the currently set date</div><div class="long">Shifts the view by the passed number of weeks relative to the currently set date<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>value</code> : Number<div class="sub-desc">The number of weeks (positive or negative) by which to shift the view</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-setStartDate"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-setStartDate">setStartDate</a></b>( <code>Date dt</code> )
92 void<div class="mdesc"><div class="short">Sets the start date used to calculate the view boundaries to display. The displayed view will be the
93 earliest and l...</div><div class="long">Sets the start date used to calculate the view boundaries to display. The displayed view will be the
\r
94 earliest and latest dates that match the view requirements and contain the date passed to this function.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>dt</code> : Date<div class="sub-desc">The date used to calculate the new view boundaries</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-setStore"></a><b><a href="source/CalendarView.html#method-Ext.calendar.CalendarView-setStore">setStore</a></b>( <code>Ext.data.Store store</code> )
96 void<div class="mdesc"><div class="short">Sets the event store used by the calendar to display events.</div><div class="long">Sets the event store used by the calendar to display <a href="output/Ext.calendar.EventRecord.html" ext:cls="Ext.calendar.EventRecord">events</a>.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>store</code> : Ext.data.Store<div class="sub-desc"></div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CalendarView</td></tr></tbody></table><a id="Ext.calendar.CalendarView-events"></a><h2>Public Events</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Event</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-datechange"></a><b><a href="source/CalendarView.html#event-Ext.calendar.CalendarView-datechange">datechange</a></b> :
97 ( <code>Ext.calendar.CalendarView this</code>, <code>Date startDate</code>, <code>Date viewStart</code>, <code>Date viewEnd</code> )
98 <div class="mdesc"><div class="short">Fires after the start date of the view changes</div><div class="long">Fires after the start date of the view changes<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>this</code> : Ext.calendar.CalendarView<div class="sub-desc"></div></li><li><code>startDate</code> : Date<div class="sub-desc">The start date of the view (as explained in <a href="output/Ext.calendar.CalendarView.html#Ext.calendar.CalendarView-getStartDate" ext:member="getStartDate" ext:cls="Ext.calendar.CalendarView">getStartDate</a></div></li><li><code>viewStart</code> : Date<div class="sub-desc">The first displayed date in the view</div></li><li><code>viewEnd</code> : Date<div class="sub-desc">The last displayed date in the view</div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-dayout"></a><b><a href="source/CalendarView.html#event-Ext.calendar.CalendarView-dayout">dayout</a></b> :
99 ( <code>Ext.calendar.CalendarView this</code>, <code>Date dt</code>, <code>Ext.Element el</code> )
100 <div class="mdesc"><div class="short">Fires when the mouse exits a day element</div><div class="long">Fires when the mouse exits a day element<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>this</code> : Ext.calendar.CalendarView<div class="sub-desc"></div></li><li><code>dt</code> : Date<div class="sub-desc">The date that is exited</div></li><li><code>el</code> : Ext.Element<div class="sub-desc">The day Element that is exited</div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-dayover"></a><b><a href="source/CalendarView.html#event-Ext.calendar.CalendarView-dayover">dayover</a></b> :
101 ( <code>Ext.calendar.CalendarView this</code>, <code>Date dt</code>, <code>Ext.Element el</code> )
102 <div class="mdesc"><div class="short">Fires while the mouse is over a day element</div><div class="long">Fires while the mouse is over a day element<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>this</code> : Ext.calendar.CalendarView<div class="sub-desc"></div></li><li><code>dt</code> : Date<div class="sub-desc">The date that is being moused over</div></li><li><code>el</code> : Ext.Element<div class="sub-desc">The day Element that is being moused over</div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-eventclick"></a><b><a href="source/CalendarView.html#event-Ext.calendar.CalendarView-eventclick">eventclick</a></b> :
103 ( <code>Ext.calendar.CalendarView this</code>, <code>Ext.calendar.EventRecord rec</code>, <code>HTMLNode el</code> )
104 <div class="mdesc"><div class="short">Fires after the user clicks on an event element</div><div class="long">Fires after the user clicks on an event element<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>this</code> : Ext.calendar.CalendarView<div class="sub-desc"></div></li><li><code>rec</code> : Ext.calendar.EventRecord<div class="sub-desc">The <a href="output/Ext.calendar.EventRecord.html" ext:cls="Ext.calendar.EventRecord">record</a> for the event that was clicked on</div></li><li><code>el</code> : HTMLNode<div class="sub-desc">The DOM node that was clicked on</div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-eventmove"></a><b><a href="source/CalendarView.html#event-Ext.calendar.CalendarView-eventmove">eventmove</a></b> :
105 ( <code>Ext.calendar.CalendarView this</code>, <code>Ext.calendar.EventRecord rec</code> )
106 <div class="mdesc"><div class="short">Fires after an event element is dragged by the user and dropped in a new position</div><div class="long">Fires after an event element is dragged by the user and dropped in a new position<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>this</code> : Ext.calendar.CalendarView<div class="sub-desc"></div></li><li><code>rec</code> : Ext.calendar.EventRecord<div class="sub-desc">The <a href="output/Ext.calendar.EventRecord.html" ext:cls="Ext.calendar.EventRecord">record</a> for the event that was moved with
\r
107 updated start and end dates</div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-eventout"></a><b><a href="source/CalendarView.html#event-Ext.calendar.CalendarView-eventout">eventout</a></b> :
108 ( <code>Ext.calendar.CalendarView this</code>, <code>Ext.calendar.EventRecord rec</code>, <code>HTMLNode el</code> )
109 <div class="mdesc"><div class="short">Fires anytime the mouse exits an event element</div><div class="long">Fires anytime the mouse exits an event element<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>this</code> : Ext.calendar.CalendarView<div class="sub-desc"></div></li><li><code>rec</code> : Ext.calendar.EventRecord<div class="sub-desc">The <a href="output/Ext.calendar.EventRecord.html" ext:cls="Ext.calendar.EventRecord">record</a> for the event that the cursor exited</div></li><li><code>el</code> : HTMLNode<div class="sub-desc">The DOM node that was exited</div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-eventover"></a><b><a href="source/CalendarView.html#event-Ext.calendar.CalendarView-eventover">eventover</a></b> :
110 ( <code>Ext.calendar.CalendarView this</code>, <code>Ext.calendar.EventRecord rec</code>, <code>HTMLNode el</code> )
111 <div class="mdesc"><div class="short">Fires anytime the mouse is over an event element</div><div class="long">Fires anytime the mouse is over an event element<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>this</code> : Ext.calendar.CalendarView<div class="sub-desc"></div></li><li><code>rec</code> : Ext.calendar.EventRecord<div class="sub-desc">The <a href="output/Ext.calendar.EventRecord.html" ext:cls="Ext.calendar.EventRecord">record</a> for the event that the cursor is over</div></li><li><code>el</code> : HTMLNode<div class="sub-desc">The DOM node that is being moused over</div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-eventsrendered"></a><b><a href="source/CalendarView.html#event-Ext.calendar.CalendarView-eventsrendered">eventsrendered</a></b> :
112 ( <code>Ext.calendar.CalendarView this</code> )
113 <div class="mdesc"><div class="short">Fires after events are finished rendering in the view</div><div class="long">Fires after events are finished rendering in the view<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>this</code> : Ext.calendar.CalendarView<div class="sub-desc"></div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-initdrag"></a><b><a href="source/CalendarView.html#event-Ext.calendar.CalendarView-initdrag">initdrag</a></b> :
114 ( <code>Ext.calendar.CalendarView this</code> )
115 <div class="mdesc"><div class="short">Fires when a drag operation is initiated in the view</div><div class="long">Fires when a drag operation is initiated in the view<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>this</code> : Ext.calendar.CalendarView<div class="sub-desc"></div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.calendar.CalendarView-rangeselect"></a><b><a href="source/CalendarView.html#event-Ext.calendar.CalendarView-rangeselect">rangeselect</a></b> :
116 ( <code>Ext.calendar.CalendarView this</code>, <code>Object dates</code>, <code>Function callback</code> )
117 <div class="mdesc"><div class="short">Fires after the user drags on the calendar to select a range of dates/times in which to create an event</div><div class="long">Fires after the user drags on the calendar to select a range of dates/times in which to create an event<div class="mdetail-params"><strong style="font-weight: normal;">Listeners will be called with the following arguments:</strong><ul><li><code>this</code> : Ext.calendar.CalendarView<div class="sub-desc"></div></li><li><code>dates</code> : Object<div class="sub-desc">An object containing the start (StartDate property) and end (EndDate property) dates selected</div></li><li><code>callback</code> : Function<div class="sub-desc">A callback function that MUST be called after the event handling is complete so that
\r
118 the view is properly cleaned up (shim elements are persisted in the view while the user is prompted to handle the
\r
119 range selection). The callback is already created in the proper scope, so it simply needs to be executed as a standard
\r
120 function call (e.g., callback()).</div></li></ul></div></div></div></td><td class="msource">CalendarView</td></tr></tbody></table></div>