X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/b37ceabb82336ee82757cd32efe353cfab8ec267..f5240829880f87e0cf581c6a296e436fdef0ef80:/examples/calendar/src/views/MonthView.js diff --git a/examples/calendar/src/views/MonthView.js b/examples/calendar/src/views/MonthView.js new file mode 100644 index 00000000..f7bedcf3 --- /dev/null +++ b/examples/calendar/src/views/MonthView.js @@ -0,0 +1,482 @@ +/*! + * Ext JS Library 3.3.0 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** + * @class Ext.calendar.MonthView + * @extends Ext.calendar.CalendarView + *
Displays a calendar view by month. This class does not usually need ot be used directly as you can + * use a {@link Ext.calendar.CalendarPanel CalendarPanel} to manage multiple calendar views at once including + * the month view.
+ * @constructor + * @param {Object} config The config object + */ +Ext.calendar.MonthView = Ext.extend(Ext.calendar.CalendarView, { + /** + * @cfg {Boolean} showTime + * True to display the current time in today's box in the calendar, false to not display it (defautls 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 (defautls to true) + */ + showTodayText: true, + /** + * @cfg {String} todayText + * The text to display in the current day's box in the calendar when {@link #showTodayText} is true (defaults to 'Today') + */ + todayText: 'Today', + /** + * @cfg {Boolean} showHeader + * True to display a header beneath the navigation bar containing the week names above each week's column, false not to + * show it and instead display the week names in the first row of days in the calendar (defaults to false). + */ + showHeader: false, + /** + * @cfg {Boolean} showWeekLinks + * True to display an extra column before the first day in the calendar that links to the {@link Ext.calendar.WeekView view} + * for each individual week, false to not show it (defaults to false). If true, the week links can also contain the week + * number depending on the value of {@link #showWeekNumbers}. + */ + showWeekLinks: false, + /** + * @cfg {Boolean} showWeekNumbers + * True to show the week number for each week in the calendar in the week link column, false to show nothing (defaults to false). + * Note that if {@link #showWeekLinks} is false this config will have no affect even if true. + */ + showWeekNumbers: false, + /** + * @cfg {String} weekLinkOverClass + * The CSS class name applied when the mouse moves over a week link element (only applies when {@link #showWeekLinks} is true, + * defaults to 'ext-week-link-over'). + */ + weekLinkOverClass: 'ext-week-link-over', + + //private properties -- do not override: + daySelector: '.ext-cal-day', + moreSelector: '.ext-cal-ev-more', + weekLinkSelector: '.ext-cal-week-link', + weekCount: -1, + // defaults to auto by month + dayCount: 7, + moreElIdDelimiter: '-more-', + weekLinkIdDelimiter: 'ext-cal-week-', + + // private + initComponent: function() { + Ext.calendar.MonthView.superclass.initComponent.call(this); + this.addEvents({ + /** + * @event dayclick + * Fires after the user clicks within the view container and not on an event element + * @param {Ext.calendar.MonthView} this + * @param {Date} dt The date/time that was clicked on + * @param {Boolean} allday True if the day clicked on represents an all-day box, else false. Clicks within the + * MonthView always return true for this param. + * @param {Ext.Element} el The Element that was clicked on + */ + dayclick: true, + /** + * @event weekclick + * Fires after the user clicks within a week link (when {@link #showWeekLinks is true) + * @param {Ext.calendar.MonthView} this + * @param {Date} dt The start date of the week that was clicked on + */ + weekclick: true, + // inherited docs + dayover: true, + // inherited docs + dayout: true + }); + }, + + // private + initDD: function() { + var cfg = { + view: this, + createText: this.ddCreateEventText, + moveText: this.ddMoveEventText, + ddGroup: 'MonthViewDD' + }; + + this.dragZone = new Ext.calendar.DragZone(this.el, cfg); + this.dropZone = new Ext.calendar.DropZone(this.el, cfg); + }, + + // private + onDestroy: function() { + Ext.destroy(this.ddSelector); + Ext.destroy(this.dragZone); + Ext.destroy(this.dropZone); + Ext.calendar.MonthView.superclass.onDestroy.call(this); + }, + + // private + afterRender: function() { + if (!this.tpl) { + this.tpl = new Ext.calendar.MonthViewTemplate({ + id: this.id, + showTodayText: this.showTodayText, + todayText: this.todayText, + showTime: this.showTime, + showHeader: this.showHeader, + showWeekLinks: this.showWeekLinks, + showWeekNumbers: this.showWeekNumbers + }); + } + this.tpl.compile(); + this.addClass('ext-cal-monthview ext-cal-ct'); + + Ext.calendar.MonthView.superclass.afterRender.call(this); + }, + + // private + onResize: function() { + if (this.monitorResize) { + this.maxEventsPerDay = this.getMaxEventsPerDay(); + this.refresh(); + } + }, + + // private + forceSize: function() { + // Compensate for the week link gutter width if visible + if (this.showWeekLinks && this.el && this.el.child) { + var hd = this.el.select('.ext-cal-hd-days-tbl'), + bgTbl = this.el.select('.ext-cal-bg-tbl'), + evTbl = this.el.select('.ext-cal-evt-tbl'), + wkLinkW = this.el.child('.ext-cal-week-link').getWidth(), + w = this.el.getWidth() - wkLinkW; + + hd.setWidth(w); + bgTbl.setWidth(w); + evTbl.setWidth(w); + } + Ext.calendar.MonthView.superclass.forceSize.call(this); + }, + + //private + initClock: function() { + if (Ext.fly(this.id + '-clock') !== null) { + this.prevClockDay = new Date().getDay(); + if (this.clockTask) { + Ext.TaskMgr.stop(this.clockTask); + } + this.clockTask = Ext.TaskMgr.start({ + run: function() { + var el = Ext.fly(this.id + '-clock'), + t = new Date(); + + if (t.getDay() == this.prevClockDay) { + if (el) { + el.update(t.format('g:i a')); + } + } + else { + this.prevClockDay = t.getDay(); + this.moveTo(t); + } + }, + scope: this, + interval: 1000 + }); + } + }, + + // inherited docs + getEventBodyMarkup: function() { + if (!this.eventBodyMarkup) { + this.eventBodyMarkup = ['{Title}', + '