Properties
Methods
Events
Config Options
Direct Link
| Package: | Ext.calendar |
| Defined In: | CalendarView.js |
| Class: | CalendarView |
| Subclasses: | DayBodyView, MonthView |
| Extends: | Object |
This is an abstract class that serves as the base for other calendar views. This class is not intended to be directly instantiated.
When extending this class to create a custom calendar view, you must provide an implementation
for the renderItems method, as there is no default implementation for rendering events
The rendering logic is totally dependent on how the UI structures its data, which
is determined by the underlying UI template (this base class does not have a template).
| 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... | 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 | |
| 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 | |
| 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 | |
| Method | Defined By | |
|---|---|---|
CalendarView( Object config )
Parameters:
| CalendarView | |
| 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:
| CalendarView | |
getEventEls( String eventId )
:
Ext.CompositeElementParameters:
| CalendarView | |
getEventIdFromEl( String/Element/HTMLElement el )
:
voidRetrieve 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:
| CalendarView | |
getEventSelectorCls( String eventId, Boolean forSelect )
:
StringParameters:
| 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:
| 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:
| CalendarView | |
highlightEvent( Ext.CompositeElement els, [Object color], [Object o] )
:
voidVisually 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:
| 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:
| CalendarView | |
moveDays( Number value )
:
voidShifts 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:
| CalendarView | |
moveMonths( Number value )
:
voidShifts 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:
| CalendarView | |
| moveNext()
:
void Updates the view to the next consecutive date(s) Updates the view to the next consecutive date(s) Parameters:
| CalendarView | |
| movePrev()
:
void Updates the view to the previous consecutive date(s) Updates the view to the previous consecutive date(s) Parameters:
| CalendarView | |
moveTo( Date dt )
:
voidUpdates the view to contain the passed date Updates the view to contain the passed date Parameters:
| CalendarView | |
| moveToday()
:
void Updates the view to show today Updates the view to show today Parameters:
| CalendarView | |
moveWeeks( Number value )
:
voidShifts 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:
| CalendarView | |
setStartDate( Date dt )
:
voidSets 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:
| CalendarView | |
setStore( Ext.data.Store store )
:
voidSets the event store used by the calendar to display events. Sets the event store used by the calendar to display events. Parameters:
| CalendarView | |
| 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:
| CalendarView | |
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:
| 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:
| 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:
| 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:
| 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:
| 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:
| 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:
| 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:
| 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:
| CalendarView | |