Properties Methods Events Config Options Direct Link

# Class Ext.calendar.CalendarPanel

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

This is the default container for Ext calendar views. It supports day, 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 calendarStore config containing records of type EventRecord. In order to make the calendar interactive (enable editing, drag/drop, etc.) you can handle any of the various events fired by the underlying views and exposed through the CalendarPanel.

layoutConfig option if needed.

## Config Options

Config Options | Defined By
--- | ---
| dayText : String Alternate text to use for the 'Day' nav bar button. | CalendarPanel
| monthText : String Alternate text to use for the 'Month' nav bar button. | 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 the day and week views... True to include the month view (and toolbar button), false to hide them (defaults to true). If the day and week views are both hidden, the month view will show by default even if this config is false. | 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
| 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 Alternate text to use for the 'Today' nav bar button. | CalendarPanel
| weekText : String Alternate text to use for the 'Week' nav bar button. | CalendarPanel

## Public Properties

This class has no public properties.

## Public Methods

Method | Defined By
--- | ---
| CalendarPanel( `Object config` ) Parameters: `config` : Object The config object Returns: void | CalendarPanel
| getActiveView() : Ext.calendar.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.calendar.CalendarView` The active view | CalendarPanel
| hideEditForm() : Ext.calendar.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.calendar.CalendarPanel` this | CalendarPanel
| setStartDate( `Date dt` ) : void Sets the start date for the currently-active calendar view. Sets the start date for the currently-active calendar view. Parameters: `dt` : Date Returns: void | CalendarPanel
| showEditForm( `Ext.calendar.EventRecord record` ) : Ext.calendar.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.calendar.EventRecord The event record to edit Returns: `Ext.calendar.CalendarPanel` this | CalendarPanel

## Public Events

Event | Defined By
--- | ---
| datechange : ( `Ext.calendar.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.calendar.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.calendar.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.calendar.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
| eventadd : ( `Ext.calendar.CalendarPanel this`, `Ext.calendar.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.calendar.CalendarPanel `rec` : Ext.calendar.EventRecord The new record that was added | CalendarPanel
| eventcancel : ( `Ext.calendar.CalendarPanel this`, `Ext.calendar.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.calendar.CalendarPanel `rec` : Ext.calendar.EventRecord The new record that was canceled | CalendarPanel
| eventclick : ( `Ext.calendar.CalendarPanel this`, `Ext.calendar.EventRecord rec`, `HTMLNode el` ) Fires after the user clicks on an event element Fires after the user clicks on an event element Listeners will be called with the following arguments: `this` : Ext.calendar.CalendarPanel `rec` : Ext.calendar.EventRecord The record for the event that was clicked on `el` : HTMLNode The DOM node that was clicked on | CalendarPanel
| eventdelete : ( `Ext.calendar.CalendarPanel this`, `Ext.calendar.EventRecord rec` ) Fires after an event is removed from the underlying store Fires after an event is removed from the underlying store Listeners will be called with the following arguments: `this` : Ext.calendar.CalendarPanel `rec` : Ext.calendar.EventRecord The new record that was removed | CalendarPanel
| eventmove : ( `Ext.calendar.CalendarPanel this`, `Ext.calendar.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.calendar.CalendarPanel `rec` : Ext.calendar.EventRecord The record for the event that was moved with updated start and end dates | CalendarPanel
| eventout : ( `Ext.calendar.CalendarPanel this`, `Ext.calendar.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.calendar.CalendarPanel `rec` : Ext.calendar.EventRecord The record for the event that the cursor exited `el` : HTMLNode The DOM node that was exited | CalendarPanel
| eventover : ( `Ext.calendar.CalendarPanel this`, `Ext.calendar.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.calendar.CalendarPanel `rec` : Ext.calendar.EventRecord The record for the event that the cursor is over `el` : HTMLNode The DOM node that is being moused over | CalendarPanel
| eventresize : ( `Ext.calendar.CalendarPanel this`, `Ext.calendar.EventRecord rec` ) Fires after the user drags the resize handle of an event to resize it Fires after the user drags the resize handle of an event to resize it Listeners will be called with the following arguments: `this` : Ext.calendar.CalendarPanel `rec` : Ext.calendar.EventRecord The record for the event that was resized containing the updated start and end dates | CalendarPanel
| eventsrendered : ( `Ext.calendar.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.calendar.CalendarPanel | CalendarPanel
| eventupdate : ( `Ext.calendar.CalendarPanel this`, `Ext.calendar.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.calendar.CalendarPanel `rec` : Ext.calendar.EventRecord The new record that was updated | CalendarPanel
| initdrag : ( `Ext.calendar.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.calendar.CalendarPanel | CalendarPanel
| rangeselect : ( `Ext.calendar.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.calendar.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.calendar.CalendarPanel this`, `Ext.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.calendar.CalendarPanel `view` : Ext.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