Properties Methods Events Config Options Direct Link

    CalendarView
      MonthView

# Class Ext.calendar.MonthView

Package: | Ext.calendar
Defined In: | MonthView.js
Class: | MonthView
Subclasses: | DayHeaderView
Extends: | CalendarView

Displays a calendar view by month. This class does not usually need ot be used directly as you can use a CalendarPanel to manage multiple calendar views at once including the month view.

## Config Options

Config Options | Defined By
--- | ---
| ddCreateEventText : String The text to display inside the drag proxy while dragging over the calendar to create a new event (defaults to 'Crea... The text to display inside the drag proxy while dragging over the calendar to create a new event (defaults to 'Create event for {0}' where {0} is a date range supplied by the view) | CalendarView
| ddMoveEventText : String The text to display inside the drag proxy while dragging an event to reposition it (defaults to 'Move event to {0}'... The text to display inside the drag proxy while dragging an event to reposition it (defaults to 'Move event to {0}' where {0} is the updated event start date/time supplied by the view) | CalendarView

ddResizeEventText : String
The string displayed to the user in the drag proxy while dragging the resize handle of an event (defaults to 'Updat...
The string displayed to the user in the drag proxy while dragging the resize handle of an event (defaults to 'Update event to {0}' where {0} is the updated event start-end range supplied by the view). Note that this text is only used in views that allow resizing of events.

CalendarView

| enableAddFx : Boolean True to enable a visual effect on adding a new event (the default), false to disable it. Note that if enableFx is f... True to enable a visual effect on adding a new event (the default), false to disable it. Note that if enableFx is false it will override this value. The specific effect that runs is defined in the doAddFx method. | CalendarView
| enableDD : Boolean True to enable drag and drop in the calendar view (the default), false to disable it | CalendarView
| enableFx : Boolean Determines whether or not visual effects for CRUD actions are enabled (defaults to true). If this is false it will o... Determines whether or not visual effects for CRUD actions are enabled (defaults to true). If this is false it will override any values for enableAddFx, enableUpdateFx or enableRemoveFx and all animations will be disabled. | CalendarView
| enableRemoveFx : Boolean True to enable a visual effect on removing an event (the default), false to disable it. Note that if enableFx is fa... True to enable a visual effect on removing an event (the default), false to disable it. Note that if enableFx is false it will override this value. The specific effect that runs is defined in the doRemoveFx method. | CalendarView
| enableUpdateFx : Boolean True to enable a visual effect on updating an event, false to disable it (the default). Note that if enableFx is fa... True to enable a visual effect on updating an event, false to disable it (the default). Note that if enableFx is false it will override this value. The specific effect that runs is defined in the doUpdateFx method. | CalendarView

monitorResize : Boolean
True to monitor the browser's resize event (the default), false to ignore it. If the calendar view is rendered into ...
True to monitor the browser's resize event (the default), false to ignore it. If the calendar view is rendered into a fixed-size container this can be set to false. However, if the view can change dimensions (e.g., it's in fit layout in a viewport or some other resizable container) it is very important that this config is true so that any resize event propagates properly to all subcomponents and layouts get recalculated properly.

CalendarView

| showHeader : Boolean True to display a header beneath the navigation bar containing the week names above each week's column, false not to ... True to display a header beneath the navigation bar containing the week names above each week's column, false not to show it and instead display the week names in the first row of days in the calendar (defaults to false). | MonthView
| showTime : Boolean True to display the current time in today's box in the calendar, false to not display it (defautls to true) | MonthView
| showTodayText : Boolean True to display the todayText string in today's box in the calendar, false to not display it (defautls to true) | MonthView

showWeekLinks : Boolean
True to display an extra column before the first day in the calendar that links to the view for each individual week...
True to display an extra column before the first day in the calendar that links to the view for each individual week, false to not show it (defaults to false). If true, the week links can also contain the week number depending on the value of showWeekNumbers.

MonthView

| showWeekNumbers : Boolean True to show the week number for each week in the calendar in the week link column, false to show nothing (defaults t... True to show the week number for each week in the calendar in the week link column, false to show nothing (defaults to false). Note that if showWeekLinks is false this config will have no affect even if true. | MonthView

spansHavePriority : Boolean
Allows switching between two different modes of rendering events that span multiple days. When true, span events are...
Allows switching between two different modes of rendering events that span multiple days. When true, span events are always sorted first, possibly at the expense of start dates being out of order (e.g., a span event that starts at 11am one day and spans into the next day would display before a non-spanning event that starts at 10am, even though they would not be in date order). This can lead to more compact layouts when there are many overlapping events. If false (the default), events will always sort by start date first which can result in a less compact, but chronologically consistent layout.

CalendarView

| startDay : Number The 0-based index for the day on which the calendar week begins (0=Sunday, which is the default) | CalendarView
| todayText : String The text to display in the current day's box in the calendar when showTodayText is true (defaults to 'Today') | MonthView
| trackMouseOver : Boolean Whether or not the view tracks and responds to the browser mouseover event on contained elements (defaults to true).... Whether or not the view tracks and responds to the browser mouseover event on contained elements (defaults to true). If you don't need mouseover event highlighting you can disable this. | CalendarView
| weekLinkOverClass : String The CSS class name applied when the mouse moves over a week link element (only applies when showWeekLinks is true, d... The CSS class name applied when the mouse moves over a week link element (only applies when showWeekLinks is true, defaults to 'ext-week-link-over'). | MonthView

## Public Properties

This class has no public properties.

## Public Methods

Method | Defined By
--- | ---

MonthView( `Object config` )
Parameters:

- `config` : Object
  The config object

Returns:

- void

MonthView

getEventBodyMarkup() : String
Returns a string of HTML template markup to be used as the body portion of the event template created by getEventTem...
Returns a string of HTML template markup to be used as the body portion of the event template created by getEventTemplate. This provdes the flexibility to customize what's in the body without having to override the entire XTemplate. This string can include any valid Ext.Template code, and any data tokens accessible to the containing event template can be referenced in this string.
Parameters:

- None.

Returns:

- `String`
  The body template string

CalendarView

getEventEls( `String eventId` ) : Ext.CompositeElement
Parameters:

- `eventId` : String

Returns:

- `Ext.CompositeElement`
  The matching CompositeElement of nodes that comprise the rendered event. Any event that spans across a view boundary will contain more than one internal Element.

CalendarView

getEventIdFromEl( `String/Element/HTMLElement el` ) : void
Retrieve an Event object's id from its corresponding node in the DOM.
Retrieve an Event object's id from its corresponding node in the DOM.
Parameters:

- `el` : String/Element/HTMLElement
  An Ext.Element, DOM node or id

Returns:

- void

CalendarView

getEventSelectorCls( `String eventId`, `Boolean forSelect` ) : String
Parameters:

- `eventId` : String
- `forSelect` : Boolean

Returns:

- `String`
  The selector class

CalendarView

getEventTemplate() : Ext.XTemplate
Returns the XTemplate that is bound to the calendar's event store (it expects records of type Ext.calendar.EventReco...

Returns the XTemplate that is bound to the calendar's event store (it expects records of type Ext.calendar.EventRecord) to populate the calendar views with events. Internally this method by default generates different markup for browsers that support CSS border radius and those that don't. This method can be overridden as needed to customize the markup generated.

Note that this method calls getEventBodyMarkup to retrieve the body markup for events separately from the surrounding container markup. This provdes the flexibility to customize what's in the body without having to override the entire XTemplate. If you do override this method, you should make sure that your overridden version also does the same.

Parameters:

- None.

Returns:

- `Ext.XTemplate`
  The event XTemplate

CalendarView

getStartDate() : Date
Returns the start date of the view, as set by setStartDate. Note that this may not be the first date displayed in t...
Returns the start date of the view, as set by setStartDate. Note that this may not be the first date displayed in the rendered calendar -- to get the start and end dates displayed to the user use getViewBounds.
Parameters:

- None.

Returns:

- `Date`
  The start date

CalendarView

highlightEvent( `Ext.CompositeElement els`, [`Object color`], [`Object o`] ) : void
Visually highlights an event using Ext.Fx.highlight config options. If highlightEventActions is false this method wi...
Visually highlights an event using Ext.Fx.highlight config options. If highlightEventActions is false this method will have no effect.
Parameters:

- `els` : Ext.CompositeElement
  The element(s) to highlight
- `color` : Object
  (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
- `o` : Object
  (optional) Object literal with any of the Ext.Fx config options. See Ext.Fx.highlight for usage examples.

Returns:

- void

CalendarView

isToday() : Boolean
Returns true if the view is currently displaying today's date, else false.
Returns true if the view is currently displaying today's date, else false.
Parameters:

- None.

Returns:

- `Boolean`
  True or false

CalendarView

moveDays( `Number value` ) : void
Shifts the view by the passed number of days relative to the currently set date
Shifts the view by the passed number of days relative to the currently set date
Parameters:

- `value` : Number
  The number of days (positive or negative) by which to shift the view

Returns:

- void

CalendarView

moveMonths( `Number value` ) : void
Shifts the view by the passed number of months relative to the currently set date
Shifts the view by the passed number of months relative to the currently set date
Parameters:

- `value` : Number
  The number of months (positive or negative) by which to shift the view

Returns:

- void

CalendarView

moveNext() : void
Updates the view to the next consecutive date(s)
Updates the view to the next consecutive date(s)
Parameters:

- None.

Returns:

- void

CalendarView

movePrev() : void
Updates the view to the previous consecutive date(s)
Updates the view to the previous consecutive date(s)
Parameters:

- None.

Returns:

- void

CalendarView

moveTo( `Date dt` ) : void
Updates the view to contain the passed date
Updates the view to contain the passed date
Parameters:

- `dt` : Date
  The date to display

Returns:

- void

CalendarView

moveToday() : void
Updates the view to show today
Updates the view to show today
Parameters:

- None.

Returns:

- void

CalendarView

moveWeeks( `Number value` ) : void
Shifts the view by the passed number of weeks relative to the currently set date
Shifts the view by the passed number of weeks relative to the currently set date
Parameters:

- `value` : Number
  The number of weeks (positive or negative) by which to shift the view

Returns:

- void

CalendarView

setStartDate( `Date dt` ) : void
Sets the start date used to calculate the view boundaries to display. The displayed view will be the earliest and l...
Sets the start date used to calculate the view boundaries to display. The displayed view will be the earliest and latest dates that match the view requirements and contain the date passed to this function.
Parameters:

- `dt` : Date
  The date used to calculate the new view boundaries

Returns:

- void

CalendarView

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

CalendarView

## Public Events

Event | Defined By
--- | ---

datechange : ( `Ext.calendar.CalendarView 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.CalendarView
- `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

CalendarView

dayclick : ( `Ext.calendar.MonthView this`, `Date dt`, `Boolean allday`, `Ext.Element el` )
Fires after the user clicks within the view container and not on an event element
Fires after the user clicks within the view container and not on an event element
Listeners will be called with the following arguments:

- `this` : Ext.calendar.MonthView
- `dt` : Date
  The date/time that was clicked on
- `allday` : Boolean
  True if the day clicked on represents an all-day box, else false. Clicks within the MonthView always return true for this param.
- `el` : Ext.Element
  The Element that was clicked on

MonthView

dayout : ( `Ext.calendar.CalendarView 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.calendar.CalendarView
- `dt` : Date
  The date that is exited
- `el` : Ext.Element
  The day Element that is exited

CalendarView

dayover : ( `Ext.calendar.CalendarView 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.calendar.CalendarView
- `dt` : Date
  The date that is being moused over
- `el` : Ext.Element
  The day Element that is being moused over

CalendarView

eventclick : ( `Ext.calendar.CalendarView 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.CalendarView
- `rec` : Ext.calendar.EventRecord
  The record for the event that was clicked on
- `el` : HTMLNode
  The DOM node that was clicked on

CalendarView

eventmove : ( `Ext.calendar.CalendarView 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.CalendarView
- `rec` : Ext.calendar.EventRecord
  The record for the event that was moved with updated start and end dates

CalendarView

eventout : ( `Ext.calendar.CalendarView 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.CalendarView
- `rec` : Ext.calendar.EventRecord
  The record for the event that the cursor exited
- `el` : HTMLNode
  The DOM node that was exited

CalendarView

eventover : ( `Ext.calendar.CalendarView 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.CalendarView
- `rec` : Ext.calendar.EventRecord
  The record for the event that the cursor is over
- `el` : HTMLNode
  The DOM node that is being moused over

CalendarView

eventsrendered : ( `Ext.calendar.CalendarView 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.CalendarView

CalendarView

initdrag : ( `Ext.calendar.CalendarView 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.CalendarView

CalendarView

rangeselect : ( `Ext.calendar.CalendarView 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.CalendarView
- `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()).

CalendarView

weekclick : ( `Ext.calendar.MonthView this`, `Date dt` )
Fires after the user clicks within a week link (when #showWeekLinks is true)
Fires after the user clicks within a week link (when #showWeekLinks is true)
Listeners will be called with the following arguments:

- `this` : Ext.calendar.MonthView
- `dt` : Date
  The start date of the week that was clicked on

MonthView