3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
8 * @class Ext.calendar.DayView
9 * @extends Ext.Container
10 * <p>Unlike other calendar views, is not actually a subclass of {@link Ext.calendar.CalendarView CalendarView}.
11 * Instead it is a {@link Ext.Container Container} subclass that internally creates and manages the layouts of
12 * a {@link Ext.calendar.DayHeaderView DayHeaderView} and a {@link Ext.calendar.DayBodyView DayBodyView}. As such
13 * DayView accepts any config values that are valid for DayHeaderView and DayBodyView and passes those through
14 * to the contained views. It also supports the interface required of any calendar view and in turn calls methods
15 * on the contained views as necessary.</p>
17 * @param {Object} config The config object
19 Ext.calendar.DayView = Ext.extend(Ext.Container, {
21 * @cfg {Boolean} showTime
22 * True to display the current time in today's box in the calendar, false to not display it (defautls to true)
26 * @cfg {Boolean} showTodayText
27 * True to display the {@link #todayText} string in today's box in the calendar, false to not display it (defautls to true)
31 * @cfg {String} todayText
32 * The text to display in the current day's box in the calendar when {@link #showTodayText} is true (defaults to 'Today')
36 * @cfg {String} ddCreateEventText
37 * The text to display inside the drag proxy while dragging over the calendar to create a new event (defaults to
38 * 'Create event for {0}' where {0} is a date range supplied by the view)
40 ddCreateEventText: 'Create event for {0}',
42 * @cfg {String} ddMoveEventText
43 * The text to display inside the drag proxy while dragging an event to reposition it (defaults to
44 * 'Move event to {0}' where {0} is the updated event start date/time supplied by the view)
46 ddMoveEventText: 'Move event to {0}',
48 * @cfg {Number} dayCount
49 * The number of days to display in the view (defaults to 1)
54 initComponent : function(){
55 // rendering more than 7 days per view is not supported
56 this.dayCount = this.dayCount > 7 ? 7 : this.dayCount;
58 var cfg = Ext.apply({}, this.initialConfig);
59 cfg.showTime = this.showTime;
60 cfg.showTodatText = this.showTodayText;
61 cfg.todayText = this.todayText;
62 cfg.dayCount = this.dayCount;
65 var header = Ext.applyIf({
66 xtype: 'dayheaderview',
70 var body = Ext.applyIf({
75 this.items = [header, body];
76 this.addClass('ext-cal-dayview ext-cal-ct');
78 Ext.calendar.DayView.superclass.initComponent.call(this);
82 afterRender : function(){
83 Ext.calendar.DayView.superclass.afterRender.call(this);
85 this.header = Ext.getCmp(this.id+'-hd');
86 this.body = Ext.getCmp(this.id+'-bd');
87 this.body.on('eventsrendered', this.forceSize, this);
92 this.header.refresh();
97 forceSize: function(){
98 // The defer call is mainly for good ol' IE, but it doesn't hurt in
99 // general to make sure that the window resize is good and done first
100 // so that we can properly calculate sizes.
102 var ct = this.el.up('.x-panel-body'),
103 hd = this.el.child('.ext-cal-day-header'),
104 h = ct.getHeight() - hd.getHeight();
106 this.el.child('.ext-cal-body-ct').setHeight(h);
111 onResize : function(){
116 getViewBounds : function(){
117 return this.header.getViewBounds();
121 * Returns the start date of the view, as set by {@link #setStartDate}. Note that this may not
122 * be the first date displayed in the rendered calendar -- to get the start and end dates displayed
123 * to the user use {@link #getViewBounds}.
124 * @return {Date} The start date
126 getStartDate : function(){
127 return this.header.getStartDate();
131 * Sets the start date used to calculate the view boundaries to display. The displayed view will be the
132 * earliest and latest dates that match the view requirements and contain the date passed to this function.
133 * @param {Date} dt The date used to calculate the new view boundaries
135 setStartDate: function(dt){
136 this.header.setStartDate(dt, true);
137 this.body.setStartDate(dt, true);
141 renderItems: function(){
142 this.header.renderItems();
143 this.body.renderItems();
147 * Returns true if the view is currently displaying today's date, else false.
148 * @return {Boolean} True or false
150 isToday : function(){
151 return this.header.isToday();
155 * Updates the view to contain the passed date
156 * @param {Date} dt The date to display
158 moveTo : function(dt, noRefresh){
159 this.header.moveTo(dt, noRefresh);
160 this.body.moveTo(dt, noRefresh);
164 * Updates the view to the next consecutive date(s)
166 moveNext : function(noRefresh){
167 this.header.moveNext(noRefresh);
168 this.body.moveNext(noRefresh);
172 * Updates the view to the previous consecutive date(s)
174 movePrev : function(noRefresh){
175 this.header.movePrev(noRefresh);
176 this.body.movePrev(noRefresh);
180 * Shifts the view by the passed number of days relative to the currently set date
181 * @param {Number} value The number of days (positive or negative) by which to shift the view
183 moveDays : function(value, noRefresh){
184 this.header.moveDays(value, noRefresh);
185 this.body.moveDays(value, noRefresh);
189 * Updates the view to show today
191 moveToday : function(noRefresh){
192 this.header.moveToday(noRefresh);
193 this.body.moveToday(noRefresh);
197 Ext.reg('dayview', Ext.calendar.DayView);