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