Properties Methods Events Config Options Direct Link

# Class Ext.ensible.cal.CalendarPanel

Package: | Ext.ensible.cal
Defined In: | CalendarPanel.js
Class: | CalendarPanel
Extends: | Object

This is the default container for calendar views. It supports day, week, multi-week and month views as well as a built-in event edit form. The only requirement for displaying a calendar is passing in a valid store config containing records of type EventRecord.

## Config Options

Config Options | Defined By
--- | ---
| activeItem : Number The 0-based index within the available views to set as the default active view (defaults to undefined). If not speci... The 0-based index within the available views to set as the default active view (defaults to undefined). If not specified the default view will be set as the last one added to the panel. You can retrieve a reference to the active view at any time using the activeView property. | CalendarPanel
| calendarStore : Ext.data.Store The store which is bound to this calendar and contains CalendarRecords. This is an optional store that provides multi... The store which is bound to this calendar and contains CalendarRecords. This is an optional store that provides multi-calendar (and multi-color) support. If available an additional field for selecting the calendar in which to save an event will be shown in the edit forms. If this store is not available then all events will simply use the default calendar (and color). | CalendarPanel
| dayText : String Text to use for the 'Day' nav bar button. | CalendarPanel
| dayViewCfg : Object A config object that will be applied only to the DayView managed by this CalendarPanel. | CalendarPanel
| editModal : Boolean True to show the default event editor window modally over the entire page, false to allow user interaction with the p... True to show the default event editor window modally over the entire page, false to allow user interaction with the page while showing the window (the default). Note that if you replace the default editor window with some alternate component this config will no longer apply. | CalendarPanel
| editViewCfg : Object A config object that will be applied only to the EventEditForm managed by this CalendarPanel. | CalendarPanel
| enableEditDetails : Boolean True to show a link on the event edit window to allow switching to the detailed edit form (the default), false to rem... True to show a link on the event edit window to allow switching to the detailed edit form (the default), false to remove the link and disable detailed event editing. | CalendarPanel
| eventStore : Ext.data.Store The store which is bound to this calendar and contains EventRecords. Note that this is an alias to the default store ... The store which is bound to this calendar and contains EventRecords. Note that this is an alias to the default store config (to differentiate that from the optional calendarStore config), and either can be used interchangeably. | CalendarPanel
| goText : String Text to use for the 'Go' navigation button. | CalendarPanel
| jumpToText : String Text to use for the 'Jump to:' navigation label. | CalendarPanel
| monthText : String Text to use for the 'Month' nav bar button. | CalendarPanel
| monthViewCfg : Object A config object that will be applied only to the MonthView managed by this CalendarPanel. | CalendarPanel
| multiDayText : String Deprecated. Please override getMultiDayText instead. Text to use for the 'X Days' nav bar button (defaults to "{0} Da... Deprecated. Please override getMultiDayText instead. Text to use for the 'X Days' nav bar button (defaults to "{0} Days" where {0} is automatically replaced by the value of the multDayViewCfg's dayCount value if available, otherwise it uses the view default of 3). | CalendarPanel
| multiDayViewCfg : Object A config object that will be applied only to the MultiDayView managed by this CalendarPanel. | CalendarPanel
| multiWeekText : String Deprecated. Please override getMultiWeekText instead. Text to use for the 'X Weeks' nav bar button (defaults to "{0} ... Deprecated. Please override getMultiWeekText instead. Text to use for the 'X Weeks' nav bar button (defaults to "{0} Weeks" where {0} is automatically replaced by the value of the multiWeekViewCfg's weekCount value if available, otherwise it uses the view default of 2). | CalendarPanel
| multiWeekViewCfg : Object A config object that will be applied only to the MultiWeekView managed by this CalendarPanel. | CalendarPanel
| readOnly : Boolean True to prevent clicks on events or calendar views from providing CRUD capabilities, false to enable CRUD (the defau... True to prevent clicks on events or calendar views from providing CRUD capabilities, false to enable CRUD (the default). This option is passed into all views managed by this CalendarPanel. | CalendarPanel
| showDayView : Boolean True to include the day view (and toolbar button), false to hide them (defaults to true). | CalendarPanel
| showMonthView : Boolean True to include the month view (and toolbar button), false to hide them (defaults to true). If all other views are hi... True to include the month view (and toolbar button), false to hide them (defaults to true). If all other views are hidden, the month view will show by default even if this config is false. | CalendarPanel
| showMultiDayView : Boolean True to include the multi-day view (and toolbar button), false to hide them (defaults to false). | CalendarPanel
| showMultiWeekView : Boolean True to include the multi-week view (and toolbar button), false to hide them (defaults to true). | CalendarPanel
| showNavBar : Boolean True to display the calendar navigation toolbar, false to hide it (defaults to true). Note that if you hide the defau... True to display the calendar navigation toolbar, false to hide it (defaults to true). Note that if you hide the default navigation toolbar you'll have to provide an alternate means of navigating the calendar. | CalendarPanel
| showNavJump : Boolean True to display the "Jump to:" label in the calendar panel's navigation header, false to not show it (defaults to tru... True to display the "Jump to:" label in the calendar panel's navigation header, false to not show it (defaults to true). | CalendarPanel
| showNavNextPrev : Boolean True to display the left/right arrow buttons in the calendar panel's navigation header, false to not show it (default... True to display the left/right arrow buttons in the calendar panel's navigation header, false to not show it (defaults to true). | CalendarPanel
| showNavToday : Boolean True to display the "Today" button in the calendar panel's navigation header, false to not show it (defaults to true)... True to display the "Today" button in the calendar panel's navigation header, false to not show it (defaults to true). | CalendarPanel
| showTime : Boolean True to display the current time next to the date in the calendar's current day box, false to not show it (defaults ... True to display the current time next to the date in the calendar's current day box, false to not show it (defaults to true). | CalendarPanel
| showTodayText : Boolean True to show the value of todayText instead of today's date in the calendar's current day box, false to display the d... True to show the value of todayText instead of today's date in the calendar's current day box, false to display the day number(defaults to true). | CalendarPanel
| showWeekView : Boolean True to include the week view (and toolbar button), false to hide them (defaults to true). | CalendarPanel
| todayText : String Text to use for the 'Today' nav bar button. | CalendarPanel
| viewConfig : Object A config object that will be applied to all views managed by this CalendarPanel. Any options on this object that do n... A config object that will be applied to all views managed by this CalendarPanel. Any options on this object that do not apply to any particular view will simply be ignored. | CalendarPanel
| weekText : String Text to use for the 'Week' nav bar button. | CalendarPanel
| weekViewCfg : Object A config object that will be applied only to the WeekView managed by this CalendarPanel. | CalendarPanel

## Public Properties

Property | Defined By
--- | ---
| activeView : Ext.ensible.cal.CalendarView A reference to the view that is currently active. | CalendarPanel

## Public Methods

Method | Defined By
--- | ---
| CalendarPanel( `Object config` ) Parameters: `config` : Object The config object Returns: void | CalendarPanel
| getActiveView() : Ext.ensible.cal.CalendarView Return the calendar view that is currently active, which will be a subclass of CalendarView. Return the calendar view that is currently active, which will be a subclass of CalendarView. Parameters: None. Returns: `Ext.ensible.cal.CalendarView` The active view | CalendarPanel
| getMultiDayText() : void Returns the text to use for the 'X Days' nav bar button (defaults to "{0} Days" where {0} is automatically replaced b... Returns the text to use for the 'X Days' nav bar button (defaults to "{0} Days" where {0} is automatically replaced by the value of the multDayViewCfg's dayCount value if available, otherwise it uses the view default of 3). Parameters: None. Returns: void | CalendarPanel
| getMultiWeekText() : void Returns the text to use for the 'X Weeks' nav bar button (defaults to "{0} Weeks" where {0} is automatically replaced... Returns the text to use for the 'X Weeks' nav bar button (defaults to "{0} Weeks" where {0} is automatically replaced by the value of the multiWeekViewCfg's weekCount value if available, otherwise it uses the view default of 2). Parameters: None. Returns: void | CalendarPanel
| hideEditForm() : Ext.ensible.cal.CalendarPanel Hides the built-in event edit form and returns to the previous calendar view. If the edit form is not currently visib... Hides the built-in event edit form and returns to the previous calendar view. If the edit form is not currently visible this method has no effect. Parameters: None. Returns: `Ext.ensible.cal.CalendarPanel` this | CalendarPanel
| setStartDate( `Date dt` ) : Ext.ensible.cal.CalendarPanel Sets the start date for the currently-active calendar view. Sets the start date for the currently-active calendar view. Parameters: `dt` : Date The new start date Returns: `Ext.ensible.cal.CalendarPanel` this | CalendarPanel
| setStore( `Ext.data.Store store` ) : void Sets the event store used by the calendar to display events. Sets the event store used by the calendar to display events. Parameters: `store` : Ext.data.Store Returns: void | CalendarPanel
| showEditForm( `Ext.ensible.cal.EventRecord record` ) : Ext.ensible.cal.CalendarPanel Shows the built-in event edit form for the passed in event record. This method automatically hides the calendar view... Shows the built-in event edit form for the passed in event record. This method automatically hides the calendar views and navigation toolbar. To return to the calendar, call hideEditForm. Parameters: `record` : Ext.ensible.cal.EventRecord The event record to edit Returns: `Ext.ensible.cal.CalendarPanel` this | CalendarPanel

## Public Events

Event | Defined By
--- | ---
| beforedatechange : ( `Ext.ensible.cal.CalendarPanel this`, `Date startDate`, `Date newStartDate`, `Date viewStart`, `Date viewEnd` ) Fires before the start date of the view changes, giving you an opportunity to save state or anything else you may nee... Fires before the start date of the view changes, giving you an opportunity to save state or anything else you may need to do prior to the UI view changing. This is a cancelable event, so returning false from a handler will cancel both the view change and the setting of the start date. Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `startDate` : Date The current start date of the view (as explained in getStartDate `newStartDate` : Date The new start date that will be set when the view changes `viewStart` : Date The first displayed date in the current view `viewEnd` : Date The last displayed date in the current view | CalendarPanel
| beforeeventdelete : ( `Ext.ensible.cal.CalendarPanel this`, `Ext.ensible.cal.EventRecord rec`, `Ext.Element el` ) Fires before an event is deleted by the user. This is a cancelable event, so returning false from a handler will can... Fires before an event is deleted by the user. This is a cancelable event, so returning false from a handler will cancel the delete operation. Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `rec` : Ext.ensible.cal.EventRecord The record for the event that was deleted `el` : Ext.Element The target element | CalendarPanel
| beforeeventmove : ( `Ext.ensible.cal.CalendarPanel this`, `Ext.ensible.cal.EventRecord rec` ) Fires before an event element is dragged by the user and dropped in a new position. This is a cancelable event, so r... Fires before an event element is dragged by the user and dropped in a new position. This is a cancelable event, so returning false from a handler will cancel the move operation. Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `rec` : Ext.ensible.cal.EventRecord The record for the event that will be moved | CalendarPanel
| beforeeventresize : ( `Ext.ensible.cal.CalendarPanel this`, `Ext.ensible.cal.EventRecord rec` ) Fires after the user drags the resize handle of an event to resize it, but before the resize operation is carried out... Fires after the user drags the resize handle of an event to resize it, but before the resize operation is carried out. This is a cancelable event, so returning false from a handler will cancel the resize operation. NOTE: This event is only fired from views that support event resizing. Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `rec` : Ext.ensible.cal.EventRecord The record for the event that was resized containing the updated start and end dates | CalendarPanel
| datechange : ( `Ext.ensible.cal.CalendarPanel this`, `Date startDate`, `Date viewStart`, `Date viewEnd` ) Fires after the start date of the view changes Fires after the start date of the view changes Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `startDate` : Date The start date of the view (as explained in getStartDate `viewStart` : Date The first displayed date in the view `viewEnd` : Date The last displayed date in the view | CalendarPanel
| dayclick : ( `Ext.ensible.cal.CalendarPanel this`, `Date dt`, `Boolean allday`, `Ext.Element el` ) Fires after the user clicks within a day/week view container and not on an event element Fires after the user clicks within a day/week view container and not on an event element Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `dt` : Date The date/time that was clicked on `allday` : Boolean True if the day clicked on represents an all-day box, else false. `el` : Ext.Element The Element that was clicked on | CalendarPanel
| dayout : ( `Ext.ensible.cal.CalendarPanel this`, `Date dt`, `Ext.Element el` ) Fires when the mouse exits a day element Fires when the mouse exits a day element Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `dt` : Date The date that is exited `el` : Ext.Element The day Element that is exited | CalendarPanel
| dayover : ( `Ext.ensible.cal.CalendarPanel this`, `Date dt`, `Ext.Element el` ) Fires while the mouse is over a day element Fires while the mouse is over a day element Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `dt` : Date The date that is being moused over `el` : Ext.Element The day Element that is being moused over | CalendarPanel
| editdetails : ( `Ext.ensible.cal.CalendarPanel this`, `Ext.ensible.cal.CalendarView view`, `Ext.ensible.cal.EventRecord rec`, `Ext.Element el` ) Fires when the user selects the option to edit the selected event in the detailed edit form (by default, an instance ... Fires when the user selects the option to edit the selected event in the detailed edit form (by default, an instance of Ext.ensible.cal.EventEditForm). Handling code should hide the active event editor and transfer the current event record to the appropriate instance of the detailed form by showing it and calling loadRecord. Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel The CalendarPanel `view` : Ext.ensible.cal.CalendarView The currently active CalendarView subclass `rec` : Ext.ensible.cal.EventRecord The record that is currently being edited `el` : Ext.Element The target element | CalendarPanel
| eventadd : ( `Ext.ensible.cal.CalendarPanel this`, `Ext.ensible.cal.EventRecord rec` ) Fires after a new event is added to the underlying store Fires after a new event is added to the underlying store Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `rec` : Ext.ensible.cal.EventRecord The new record that was added | CalendarPanel
| eventcancel : ( `Ext.ensible.cal.CalendarPanel this`, `Ext.ensible.cal.EventRecord rec` ) Fires after an event add/edit operation is canceled by the user and no store update took place Fires after an event add/edit operation is canceled by the user and no store update took place Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `rec` : Ext.ensible.cal.EventRecord The new record that was canceled | CalendarPanel
| eventclick : ( `Ext.ensible.cal.CalendarPanel this`, `Ext.ensible.cal.EventRecord rec`, `HTMLNode el` ) Fires after the user clicks on an event element. NOTE: This version of eventclick differs from the same event fired d... Fires after the user clicks on an event element. NOTE: This version of `eventclick` differs from the same event fired directly by CalendarView subclasses in that it provides a default implementation (showing the default edit window) and is also cancelable (if a handler returns `false` the edit window will not be shown). This event when fired from a view class is simply a notification that an event was clicked and has no default behavior. Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `rec` : Ext.ensible.cal.EventRecord The record for the event that was clicked on `el` : HTMLNode The DOM node that was clicked on | CalendarPanel
| eventdelete : ( `Ext.ensible.cal.CalendarPanel this`, `Ext.ensible.cal.EventRecord rec`, `Ext.Element el` ) Fires after an event is deleted by the user. Fires after an event is deleted by the user. Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `rec` : Ext.ensible.cal.EventRecord The record for the event that was deleted `el` : Ext.Element The target element | CalendarPanel
| eventmove : ( `Ext.ensible.cal.CalendarPanel this`, `Ext.ensible.cal.EventRecord rec` ) Fires after an event element is dragged by the user and dropped in a new position Fires after an event element is dragged by the user and dropped in a new position Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `rec` : Ext.ensible.cal.EventRecord The record for the event that was moved with updated start and end dates | CalendarPanel
| eventout : ( `Ext.ensible.cal.CalendarPanel this`, `Ext.ensible.cal.EventRecord rec`, `HTMLNode el` ) Fires anytime the mouse exits an event element Fires anytime the mouse exits an event element Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `rec` : Ext.ensible.cal.EventRecord The record for the event that the cursor exited `el` : HTMLNode The DOM node that was exited | CalendarPanel
| eventover : ( `Ext.ensible.cal.CalendarPanel this`, `Ext.ensible.cal.EventRecord rec`, `HTMLNode el` ) Fires anytime the mouse is over an event element Fires anytime the mouse is over an event element Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `rec` : Ext.ensible.cal.EventRecord The record for the event that the cursor is over `el` : HTMLNode The DOM node that is being moused over | CalendarPanel
| eventresize : ( `Ext.ensible.cal.CalendarPanel this`, `Ext.ensible.cal.EventRecord rec` ) Fires after the user drags the resize handle of an event and the resize operation is complete. NOTE: This event is on... Fires after the user drags the resize handle of an event and the resize operation is complete. NOTE: This event is only fired from views that support event resizing. Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `rec` : Ext.ensible.cal.EventRecord The record for the event that was resized containing the updated start and end dates | CalendarPanel
| eventsrendered : ( `Ext.ensible.cal.CalendarPanel this` ) Fires after events are finished rendering in the view Fires after events are finished rendering in the view Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel | CalendarPanel
| eventupdate : ( `Ext.ensible.cal.CalendarPanel this`, `Ext.ensible.cal.EventRecord rec` ) Fires after an existing event is updated Fires after an existing event is updated Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `rec` : Ext.ensible.cal.EventRecord The new record that was updated | CalendarPanel
| initdrag : ( `Ext.ensible.cal.CalendarPanel this` ) Fires when a drag operation is initiated in the view Fires when a drag operation is initiated in the view Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel | CalendarPanel
| rangeselect : ( `Ext.ensible.cal.CalendarPanel this`, `Object dates`, `Function callback` ) Fires after the user drags on the calendar to select a range of dates/times in which to create an event Fires after the user drags on the calendar to select a range of dates/times in which to create an event Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `dates` : Object An object containing the start (StartDate property) and end (EndDate property) dates selected `callback` : Function A callback function that MUST be called after the event handling is complete so that the view is properly cleaned up (shim elements are persisted in the view while the user is prompted to handle the range selection). The callback is already created in the proper scope, so it simply needs to be executed as a standard function call (e.g., callback()). | CalendarPanel
| viewchange : ( `Ext.ensible.cal.CalendarPanel this`, `Ext.ensible.CalendarView view`, `Object info` ) Fires after a different calendar view is activated (but not when the event edit form is activated) Fires after a different calendar view is activated (but not when the event edit form is activated) Listeners will be called with the following arguments: `this` : Ext.ensible.cal.CalendarPanel `view` : Ext.ensible.CalendarView The view being activated (any valid CalendarView subclass) `info` : Object Extra information about the newly activated view. This is a plain object with following properties: `activeDate` : The currently-selected date `viewStart` : The first date in the new view range `viewEnd` : The last date in the new view range | CalendarPanel