examples/calendar/src/views/DayView.js

   1 /*!
   2  * Ext JS Library 3.3.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   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>
  16  * @constructor
  17  * @param {Object} config The config object
  18  */
  19 Ext.calendar.DayView = Ext.extend(Ext.Container, {
  20     /**
  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)
  23      */
  24     showTime: true,
  25     /**
  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)
  28      */
  29     showTodayText: true,
  30     /**
  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')
  33      */
  34     todayText: 'Today',
  35     /**
  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)
  39      */
  40     ddCreateEventText: 'Create event for {0}',
  41     /**
  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)
  45      */
  46     ddMoveEventText: 'Move event to {0}',
  47     /**
  48      * @cfg {Number} dayCount
  49      * The number of days to display in the view (defaults to 1)
  50      */
  51     dayCount: 1,
  52
  53     // private
  54     initComponent : function(){
  55         // rendering more than 7 days per view is not supported
  56         this.dayCount = this.dayCount > 7 ? 7 : this.dayCount;
  57
  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;
  63         cfg.wekkCount = 1;
  64
  65         var header = Ext.applyIf({
  66             xtype: 'dayheaderview',
  67             id: this.id+'-hd'
  68         }, cfg);
  69
  70         var body = Ext.applyIf({
  71             xtype: 'daybodyview',
  72             id: this.id+'-bd'
  73         }, cfg);
  74
  75         this.items = [header, body];
  76         this.addClass('ext-cal-dayview ext-cal-ct');
  77
  78         Ext.calendar.DayView.superclass.initComponent.call(this);
  79     },
  80
  81     // private
  82     afterRender : function(){
  83         Ext.calendar.DayView.superclass.afterRender.call(this);
  84
  85         this.header = Ext.getCmp(this.id+'-hd');
  86         this.body = Ext.getCmp(this.id+'-bd');
  87         this.body.on('eventsrendered', this.forceSize, this);
  88     },
  89
  90     // private
  91     refresh : function(){
  92         this.header.refresh();
  93         this.body.refresh();
  94     },
  95
  96     // private
  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.
 101         (function(){
 102             var ct = this.el.up('.x-panel-body'),
 103                 hd = this.el.child('.ext-cal-day-header'),
 104                 h = ct.getHeight() - hd.getHeight();
 105
 106             this.el.child('.ext-cal-body-ct').setHeight(h);
 107         }).defer(10, this);
 108     },
 109
 110     // private
 111     onResize : function(){
 112         this.forceSize();
 113     },
 114
 115     // private
 116     getViewBounds : function(){
 117         return this.header.getViewBounds();
 118     },
 119
 120     /**
 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
 125      */
 126     getStartDate : function(){
 127         return this.header.getStartDate();
 128     },
 129
 130     /**
 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
 134      */
 135     setStartDate: function(dt){
 136         this.header.setStartDate(dt, true);
 137         this.body.setStartDate(dt, true);
 138     },
 139
 140     // private
 141     renderItems: function(){
 142         this.header.renderItems();
 143         this.body.renderItems();
 144     },
 145
 146     /**
 147      * Returns true if the view is currently displaying today's date, else false.
 148      * @return {Boolean} True or false
 149      */
 150     isToday : function(){
 151         return this.header.isToday();
 152     },
 153
 154     /**
 155      * Updates the view to contain the passed date
 156      * @param {Date} dt The date to display
 157      */
 158     moveTo : function(dt, noRefresh){
 159         this.header.moveTo(dt, noRefresh);
 160         this.body.moveTo(dt, noRefresh);
 161     },
 162
 163     /**
 164      * Updates the view to the next consecutive date(s)
 165      */
 166     moveNext : function(noRefresh){
 167         this.header.moveNext(noRefresh);
 168         this.body.moveNext(noRefresh);
 169     },
 170
 171     /**
 172      * Updates the view to the previous consecutive date(s)
 173      */
 174     movePrev : function(noRefresh){
 175         this.header.movePrev(noRefresh);
 176         this.body.movePrev(noRefresh);
 177     },
 178
 179     /**
 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
 182      */
 183     moveDays : function(value, noRefresh){
 184         this.header.moveDays(value, noRefresh);
 185         this.body.moveDays(value, noRefresh);
 186     },
 187
 188     /**
 189      * Updates the view to show today
 190      */
 191     moveToday : function(noRefresh){
 192         this.header.moveToday(noRefresh);
 193         this.body.moveToday(noRefresh);
 194     }
 195 });
 196
 197 Ext.reg('dayview', Ext.calendar.DayView);