DayViewMultiDayView
WeekView
Package: | Ext.ensible.cal |
Defined In: | WeekView.js |
Class: | WeekView |
Extends: | MultiDayView |
Displays a calendar view by week. This class does not usually need to be used directly as you can use a CalendarPanel to manage multiple calendar views at once including the week view.
Config Options | Defined By | |
---|---|---|
dayCount : Number The number of days to display in the view (defaults to 7) | WeekView | |
ddCreateEventText : String The text to display inside the drag proxy while dragging over the calendar to create a new event (defaults to
'Creat... 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) | DayView | |
ddIncrement : Integer The number of minutes between each step during various drag/drop operations in the view (defaults to 30).
This contro... The number of minutes between each step during various drag/drop operations in the view (defaults to 30). This controls the number of times the dragged object will "snap" to the view during a drag operation, and does not have to match with the time boundaries displayed in the view. E.g., the view could be displayed in 30 minute increments (the default) but you could configure ddIncrement to 10, which would snap a dragged object to the view at 10 minute increments. This config currently applies while dragging to move an event, resizing an event by its handle or dragging on the view to create a new event. | DayView | |
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) | DayView | |
enableEventResize : Boolean True to allow events in the view's scrolling body area to be updated by a resize handle at the
bottom of the event, ... True to allow events in the view's scrolling body area to be updated by a resize handle at the
bottom of the event, false to disallow it (defaults to true). If readOnly is true event
resizing will be disabled automatically. | DayView | |
hourHeight : Integer The height, in pixels, of each hour block displayed in the scrolling body area of the view (defaults to 42).
Importa... The height, in pixels, of each hour block displayed in the scrolling body area of the view (defaults to 42). Important note: While this config can be set to any reasonable integer value, note that it is also used to calculate the ratio used when assigning event heights. By default, an hour is 60 minutes and 42 pixels high, so the pixel-to-minute ratio is 42 / 60, or 0.7. This same ratio is then used when rendering events. When rendering a 30 minute event, the rendered height would be 30 minutes * 0.7 = 21 pixels (as expected). This is important to understand when changing this value because some browsers may handle pixel rounding in different ways which could lead to inconsistent visual results in some cases. If you have any problems with pixel precision in how events are laid out, you might try to stick with hourHeight values that will generate discreet ratios. This is easily done by simply multiplying 60 minutes by different discreet ratios (.6, .8, 1.1, etc.) to get the corresponding hourHeight pixel values (36, 48, 66, etc.) that will map back to those ratios. By contrast, if you chose an hourHeight of 50 for example, the resulting height ratio would be 50 / 60 = .833333... This will work just fine, just be aware that browsers may sometimes round the resulting height values inconsistently. | DayView | |
minEventDisplayMinutes : Integer This is the minimum display height, in minutes, for events shown in the view (defaults to 30). This setting
ensures t... This is the minimum display height, in minutes, for events shown in the view (defaults to 30). This setting
ensures that events with short duration are still readable (e.g., by default any event where the start and end
times were the same would have 0 height). It also applies when calculating whether multiple events should be
displayed as overlapping. In datetime terms, an event that starts and ends at 9:00 and another event that starts
and ends at 9:05 do not overlap, but visually the second event would obscure the first in the view. This setting
provides a way to ensure that such events will still be calculated as overlapping and displayed correctly. | DayView | |
readOnly : Boolean True to prevent clicks on events or the view from providing CRUD capabilities, false to enable CRUD (the default). | DayView | |
scrollStartHour : Integer The default hour of the day at which to set the body scroll position on view load (defaults to 7, which equals 7am / ... The default hour of the day at which to set the body scroll position on view load (defaults to 7, which equals 7am / 07:00).
Note that if the body is not sufficiently overflowed to allow this positioning this setting will have no effect.
This setting should be equal to or greater than viewStartHour. | DayView | |
showHourSeparator : Boolean True to display a dotted line that separates each hour block in the scrolling body area at the half-hour mark
(the d... True to display a dotted line that separates each hour block in the scrolling body area at the half-hour mark
(the default), false to hide it. | DayView | |
showTime : Boolean True to display the current time in today's box in the calendar, false to not display it (defaults to true) | DayView | |
showTodayText : Boolean True to display the todayText string in today's box in the calendar, false to not display it (defaults to true) | DayView | |
startDayIsStatic : Boolean By default, any configuration of a multi-day view that contains fewer than 7 days will have a rolling
start day. If y... By default, any configuration of a multi-day view that contains fewer than 7 days will have a rolling start day. If you view the next or previous views, the dates will be adjusted as needed so that each view is contiguous (e.g., if the last day in the current view is Wednesday and you go to the next view it will always begin with Thursday, regardless of the value of startDay. If you set startDayIsStatic to true, then the view will always begin on startDay. For any dayCount less than 7, days outside the startDay + dayCount range will not be viewable. If a date that is not in the viewable range is set into the view it will automatically advance to the first viewable date for the current range. This could be useful for creating custom views like a weekday-only or weekend-only view. Some example CalendarPanel configs:
| MultiDayView | |
todayText : String The text to display in the current day's box in the calendar when showTodayText is true (defaults to 'Today') | DayView | |
viewEndHour : Integer The hour of the day at which to end the scrolling body area's times (defaults to 24, which equals late 12am / 00:00).... The hour of the day at which to end the scrolling body area's times (defaults to 24, which equals late 12am / 00:00).
Valid values are integers from 0 to 24, but should be greater than the value of viewStartHour. | DayView | |
viewStartHour : Integer The hour of the day at which to begin the scrolling body area's times (defaults to 0, which equals early 12am / 00:00... The hour of the day at which to begin the scrolling body area's times (defaults to 0, which equals early 12am / 00:00).
Valid values are integers from 0 to 24, but should be less than the value of viewEndHour. | DayView |
Method | Defined By | |
---|---|---|
WeekView( Object config )
Parameters:
| WeekView | |
dismissEventEditor( [String dismissMethod ] )
:
Ext.ensible.cal.DayViewDismiss the currently configured event editor view (by default the shared instance of
EventEditWindow, which will be... Dismiss the currently configured event editor view (by default the shared instance of
EventEditWindow, which will be hidden). Parameters:
| DayView | |
getStartDate()
:
Date Returns the start date of the view, as set by setStartDate. Note that this may not
be the first date displayed in th... 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:
| DayView | |
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:
| DayView | |
moveDays( Number value )
:
DateShifts 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:
| DayView | |
moveNext()
:
Date Updates the view to the next consecutive date(s) Updates the view to the next consecutive date(s) Parameters:
| DayView | |
movePrev()
:
Date Updates the view to the previous consecutive date(s) Updates the view to the previous consecutive date(s) Parameters:
| DayView | |
moveTo( Date dt )
:
DateUpdates the view to contain the passed date Updates the view to contain the passed date Parameters:
| DayView | |
moveToday()
:
Date Updates the view to show today Updates the view to show today Parameters:
| DayView | |
setStartDate( Date dt )
:
voidSets the start date used to calculate the view boundaries to display. The displayed view will be the
earliest and la... 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:
| DayView | |
showEventEditor( Ext.ensible.cal.EventRecord rec , Ext.Element/HTMLNode animateTarget )
:
Ext.ensible.cal.DayViewShow the currently configured event editor view (by default the shared instance of
EventEditWindow). Show the currently configured event editor view (by default the shared instance of
EventEditWindow). Parameters:
| DayView |