Properties Methods Events Config Options Direct Link

    DayView
      MultiDayView

# Class Ext.ensible.cal.MultiDayView

Package: | Ext.ensible.cal
Defined In: | MultiDayView.js
Class: | MultiDayView
Subclasses: | WeekView
Extends: | DayView

Displays a calendar view by day, more than one day at a time. This class does not usually need to be used directly as you can use a CalendarPanel to manage multiple calendar views at once.

## Config Options

Config Options | Defined By
--- | ---
| dayCount : Number The number of days to display in the view (defaults to 3). Only values from 1 to 7 are allowed. | MultiDayView
| 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:
    // Weekdays only:
        showMultiDayView: true,
        multiDayViewCfg: {
            dayCount: 5,
            startDay: 1,
            startDayIsStatic: true
        }

        // Weekends only:
        showMultiDayView: true,
        multiDayViewCfg: {
            dayCount: 2,
            startDay: 6,
            startDayIsStatic: true
        }
| 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

## Public Properties

This class has no public properties.

## Public Methods

Method | Defined By
--- | ---
| MultiDayView( `Object config` ) Parameters: `config` : Object The config object Returns: void | MultiDayView
| dismissEventEditor( [`String dismissMethod`] ) : Ext.ensible.cal.DayView Dismiss 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: `dismissMethod` : String (optional) The method name to call on the editor that will dismiss it (defaults to 'hide' which will be called on the default editor window) Returns: `Ext.ensible.cal.DayView` this | 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: None. Returns: `Date` The start date | 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: None. Returns: `Boolean` True or false | DayView
| moveDays( `Number value` ) : Date 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: `Date` The new date | DayView
| moveNext() : Date Updates the view to the next consecutive date(s) Updates the view to the next consecutive date(s) Parameters: None. Returns: `Date` The new date | DayView
| movePrev() : Date Updates the view to the previous consecutive date(s) Updates the view to the previous consecutive date(s) Parameters: None. Returns: `Date` The new date | DayView
| moveTo( `Date dt` ) : Date Updates the view to contain the passed date Updates the view to contain the passed date Parameters: `dt` : Date The date to display Returns: `Date` The new date | DayView
| moveToday() : Date Updates the view to show today Updates the view to show today Parameters: None. Returns: `Date` Today's date | DayView
| setStartDate( `Date dt` ) : void Sets 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: `dt` : Date The date used to calculate the new view boundaries Returns: void | DayView
| showEventEditor( `Ext.ensible.cal.EventRecord rec`, `Ext.Element/HTMLNode animateTarget` ) : Ext.ensible.cal.DayView Show 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: `rec` : Ext.ensible.cal.EventRecord The event record `animateTarget` : Ext.Element/HTMLNode The reference element that is being edited. By default this is used as the target for animating the editor window opening and closing. If this method is being overridden to supply a custom editor this parameter can be ignored if it does not apply. Returns: `Ext.ensible.cal.DayView` this | DayView

## Public Events

This class has no public events.