/** * @class Ext.ensible.cal.DayView * @extends Ext.Container *

Unlike other calendar views, is not actually a subclass of {@link Ext.ensible.cal.CalendarView CalendarView}. * Instead it is a {@link Ext.Container Container} subclass that internally creates and manages the layouts of * a {@link Ext.ensible.cal.DayHeaderView DayHeaderView} and a {@link Ext.ensible.cal.DayBodyView DayBodyView}. As such * DayView accepts any config values that are valid for DayHeaderView and DayBodyView and passes those through * to the contained views. It also supports the interface required of any calendar view and in turn calls methods * on the contained views as necessary.

* @constructor * @param {Object} config The config object */ Ext.ensible.cal.DayView = Ext.extend(Ext.Container, {
/** * @cfg {String} todayText * The text to display in the current day's box in the calendar when {@link #showTodayText} is true (defaults to 'Today') */
/** * @cfg {Boolean} readOnly * True to prevent clicks on events or the view from providing CRUD capabilities, false to enable CRUD (the default). */
/** * @cfg {String} ddCreateEventText * 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) */ ddCreateEventText: Ext.ensible.cal.CalendarView.prototype.ddCreateEventText,
/** * @cfg {String} ddMoveEventText * 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) */ ddMoveEventText: Ext.ensible.cal.CalendarView.prototype.ddMoveEventText,
/** * @cfg {Boolean} showTime * True to display the current time in today's box in the calendar, false to not display it (defaults to true) */ showTime: true,
/** * @cfg {Boolean} showTodayText * True to display the {@link #todayText} string in today's box in the calendar, false to not display it (defaults to true) */ showTodayText: true,
/** * @cfg {Number} dayCount * The number of days to display in the view (defaults to 1). Only values from 1 to 7 are allowed. */ dayCount: 1,
/** * @cfg {Boolean} enableEventResize * 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 {@link #readOnly} is true event * resizing will be disabled automatically. */ enableEventResize: true,
/** * @cfg {Integer} ddIncrement *

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.

*/ ddIncrement: 30,
/** * @cfg {Integer} minEventDisplayMinutes * 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. */ minEventDisplayMinutes: 30,
/** * @cfg {Boolean} showHourSeparator * 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. */ showHourSeparator: true,
/** * @cfg {Integer} viewStartHour * 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 {@link viewEndHour}. */ viewStartHour: 0,
/** * @cfg {Integer} viewEndHour * 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 {@link viewStartHour}. */ viewEndHour: 24,
/** * @cfg {Integer} scrollStartHour * 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 {@link viewStartHour}. */ scrollStartHour: 7,
/** * @cfg {Integer} hourHeight *

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. */ hourHeight: 42, // private initComponent : function(){ // day count is only supported between 1 and 7 days this.dayCount = this.dayCount > 7 ? 7 : (this.dayCount < 1 ? 1 : this.dayCount); var cfg = Ext.apply({}, this.initialConfig); cfg.showTime = this.showTime; cfg.showTodayText = this.showTodayText; cfg.todayText = this.todayText; cfg.dayCount = this.dayCount; cfg.weekCount = 1; cfg.readOnly = this.readOnly; cfg.ddIncrement = this.ddIncrement; cfg.minEventDisplayMinutes = this.minEventDisplayMinutes; var header = Ext.applyIf({ xtype: 'extensible.dayheaderview', id: this.id+'-hd', ownerCalendarPanel: this.ownerCalendarPanel }, cfg); var body = Ext.applyIf({ xtype: 'extensible.daybodyview', enableEventResize: this.enableEventResize, showHourSeparator: this.showHourSeparator, viewStartHour: this.viewStartHour, viewEndHour: this.viewEndHour, scrollStartHour: this.scrollStartHour, hourHeight: this.hourHeight, id: this.id+'-bd', ownerCalendarPanel: this.ownerCalendarPanel }, cfg); this.items = [header, body]; this.addClass('ext-cal-dayview ext-cal-ct'); Ext.ensible.cal.DayView.superclass.initComponent.call(this); }, // private afterRender : function(){ Ext.ensible.cal.DayView.superclass.afterRender.call(this); this.header = Ext.getCmp(this.id+'-hd'); this.body = Ext.getCmp(this.id+'-bd'); this.body.on('eventsrendered', this.forceSize, this); }, // private refresh : function(){ Ext.ensible.log('refresh (DayView)'); this.header.refresh(); this.body.refresh(); }, // private forceSize: function(){ // The defer call is mainly for good ol' IE, but it doesn't hurt in // general to make sure that the window resize is good and done first // so that we can properly calculate sizes. (function(){ var ct = this.el.up('.x-panel-body'), hd = this.el.child('.ext-cal-day-header'), h = ct.getHeight() - hd.getHeight(); this.el.child('.ext-cal-body-ct').setHeight(h-1); }).defer(10, this); }, // private onResize : function(){ this.forceSize(); this.refresh.defer(1, this); //IE needs the defer }, /* * We have to "relay" this Component method so that the hidden * state will be properly reflected when the views' active state changes */ doHide: function(){ this.header.doHide.apply(this, arguments); this.body.doHide.apply(this, arguments); }, // private getViewBounds : function(){ return this.header.getViewBounds(); },

/** * Returns the start date of the view, as set by {@link #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 {@link #getViewBounds}. * @return {Date} The start date */ getStartDate : function(){ return this.header.getStartDate(); },
/** * 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. * @param {Date} dt The date used to calculate the new view boundaries */ setStartDate: function(dt){ this.header.setStartDate(dt, true); this.body.setStartDate(dt); }, // private renderItems: function(){ this.header.renderItems(); this.body.renderItems(); },
/** * Returns true if the view is currently displaying today's date, else false. * @return {Boolean} True or false */ isToday : function(){ return this.header.isToday(); },
/** * Updates the view to contain the passed date * @param {Date} dt The date to display * @return {Date} The new date */ moveTo : function(dt){ this.header.moveTo(dt); return this.body.moveTo(dt, true); },
/** * Updates the view to the next consecutive date(s) * @return {Date} The new date */ moveNext : function(){ this.header.moveNext(); return this.body.moveNext(true); },
/** * Updates the view to the previous consecutive date(s) * @return {Date} The new date */ movePrev : function(noRefresh){ this.header.movePrev(); return this.body.movePrev(true); },
/** * Shifts the view by the passed number of days relative to the currently set date * @param {Number} value The number of days (positive or negative) by which to shift the view * @return {Date} The new date */ moveDays : function(value){ this.header.moveDays(value); return this.body.moveDays(value, true); },
/** * Updates the view to show today * @return {Date} Today's date */ moveToday : function(){ this.header.moveToday(); return this.body.moveToday(true); },
/** * Show the currently configured event editor view (by default the shared instance of * {@link Ext.ensible.cal.EventEditWindow EventEditWindow}). * @param {Ext.ensible.cal.EventRecord} rec The event record * @param {Ext.Element/HTMLNode} animateTarget 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. * @return {Ext.ensible.cal.DayView} this */ showEventEditor : function(rec, animateTarget){ return Ext.ensible.cal.CalendarView.prototype.showEventEditor.apply(this, arguments); },
/** * Dismiss the currently configured event editor view (by default the shared instance of * {@link Ext.ensible.cal.EventEditWindow EventEditWindow}, which will be hidden). * @param {String} dismissMethod (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) * @return {Ext.ensible.cal.DayView} this */ dismissEventEditor : function(dismissMethod){ return Ext.ensible.cal.CalendarView.prototype.dismissEventEditor.apply(this, arguments); } }); Ext.reg('extensible.dayview', Ext.ensible.cal.DayView);