english.lproj/calendar.css english.lproj/images/next.png english.lproj/images/previous.png @@ -12,19 +12,154 @@ require('core'); @author AuthorName @version 0.1 */ -SCal.CalendarView = SC.View.extend( +SCal.CalendarView = SC.View.extend(SC.Control, /** @scope Goar.CalendarView.prototype */ { //Calendar property - content: new Date(), - canSelectDateInThePast: true, - canSelectDateInTheFuture: true, - canNavigate: true, + selection: [], //TODOD + selectionDateRange: [null, null], //TODO + canNavigate: true, rows: 1, - column: 1, + columns: 1, + daySize: 26, + headSize: 36, - emptyView: '<div></div>', + emptyElement: '<div class="calendar"></div>', + //private - + init : function(){ + sc_super(); + this._monthViewPool = []; + this._prevButton = null; + this._nextButton = null; + }, + + _render : function(){ + rows = this.get('rows'); + columns = this.get('columns'); + isHorizontal = rows >= columns ? true : false; + + var runningDate = new Date(this.get('content')); + + //render the months + var i = 0; + for(var i = (rows * columns) - 1; i >= 0 ; i-- ){ + view = (this._monthViewPool.length > i) + ? this._monthViewPool[i] + : this.invokeDelegateMethod(this.displayDelegate, "createMonthViewDelegate"); + this.appendChild(view); + + view.set('headSize', this.get('headSize')); + view.set('daySize', this.get('daySize')); + view.set('content', new Date(runningDate)); + view._updateWeeks(); + + //queue that view into the pool + if( this._monthViewPool.length >= i){ + this._monthViewPool.push(view); + } + + //update the running date for the next month + if(runningDate.getMonth() == 11){ + //year change + runningDate.setYear(runningDate.getYear() + 1); + runningDate.setMonth(0); + }else{ + runningDate.setMonth(runningDate.getMonth() + 1); + } + } + + //remove unused months. (if rows or columns changed) + while((rows * columns) < this._monthViewPool.length){ + view = this._monthViewPool.pop(); + this.removeChild(view); + } + + //create the previous and next button if needed + if(this.get('canNavigate')){ + if(!this._prevButton){ + this._prevButton = SC.ButtonView.create({target: this, action: "previousCalendar"}); + this._prevButton.set('innerHTML', '<img src="' + static_url('image/previous.png') + '"/>'); + this._prevButton.setClassName('prev-button', true); + this.appendChild(this._prevButton); + } + if(!this._nextButton){ + this._nextButton = SC.ButtonView.create({target: this, action: "previousCalendar"}); + this._nextButton.set('innerHTML', '<img src="' + static_url('image/next.png') + '"/>'); + this._nextButton.setClassName('next-button', true); + this.appendChild(this._nextButton); + } + } + + //reframe all this + this._reframe(); + + }.observes('content', 'rows', 'columns', 'canNavigate', 'selectionDateRange'), + + _reframe: function(){ + rows = this.get('rows'); + columns = this.get('columns'); + + var f = null; + delta_y = 0; + for(var y = 0; y < rows; y++){ + delta_x = 0; + for(var x = 0; x < columns; x++){ + var month = this._monthViewPool[x * y]; + + f = month.get('frame'); + f.x = delta_x; + f.y = delta_y; + delta_x += f.width; + + month.viewFrameWillChange() ; + month.set('frame', f); + month.viewFrameDidChange() ; + } + delta_y += (f.height - 1); + } + + f = this.get('frame'); + + if(this.get('canNavigate')){ + this._prevButton.set('frame', {x:0, y:0, width: 20, height: 20}); + this._nextButton.set('frame', {x:0, y:(f.width - 20), width: 20, height: 20}); + } + + }, + + previousCalendar: function(){ + var date = new Date(this.get('content')); + nbMonths = this.get('rows') * this.get('columns'); + + diffMonth = date.getMonth() - nbMonths; + if(diffMonth < 0){ + //change year + date.setYear(date.getYear() - (1 + nbMonths/12) ); + date.setMonth(date.getMonth() + diffMonth); + }else{ + date.setMonth(diffMonth); + } + this.set('content', date); + }, + + nextCalendar: function(){ + var date = new Date(this.get('content')); + nbMonths = this.get('rows') * this.get('columns'); + + diffMonth = date.getMonth() + nbMonths; + if(diffMonth > 11){ + //change year + date.setYear(date.getYear() + (1 + nbMonths/12) ); + date.setMonth(diffMonth - 11); + }else{ + date.setMonth(diffMonth); + } + this.set('content', date); + }, + + createMonthViewDelegate: function(){ + return SCal.CalendarMonthView.create({owner: this, displayDelegate: this.displayDelegate}); + } }) ; calendar.js @@ -15,7 +15,7 @@ require('core'); SCal.ONE_DAY = 86400000; //in millisecond -SCal.CalendarDayView = SC.View.extend( SC.Control, +SCal.CalendarDayView = SC.View.extend( SC.Control, SC.DelegateSupport, /** @scope SCal.CalendarDayView.prototype */ { emptyElement: '<a class="calendar-day" href="javascript:;"></a>', @@ -56,7 +56,21 @@ SCal.CalendarDayView = SC.View.extend( SC.Control, }, _render: function(){ + this.invokeDelegateMethod(this.displayDelegate, "willRenderDay"); this.set('innerHTML', this.get('content').getDate()); - }.observes('content') + this.invokeDelegateMethod(this.displayDelegate, "didRenderDay"); + }.observes('content'), + + + //Delegate support + /* + Can be used to change the class names based on date + */ + willRenderDay : function(dayView, date){ + //do nothing + }, + didRenderDay : function(dayView, date){ + //do nothing + } }) ; calendar/day.js @@ -15,7 +15,7 @@ require('core'); SCal.ONE_MONTH_WEEKS = 5; -SCal.CalendarMonthView = SC.View.extend( SC.Control, +SCal.CalendarMonthView = SC.View.extend( SC.Control, SC.DelegateSupport, /** @scope SCal.CalendarMonthView.prototype */ { emptyElement: '<div class="calendar-month"></div>', @@ -30,16 +30,6 @@ SCal.CalendarMonthView = SC.View.extend( SC.Control, */ headSize: 36, - /* - Default view used for the week, much like exampleView in the ListView - */ - weekView: SCal.CalendarWeekView, - - /* - Default view used for the day, much like exampleView in the ListView - */ - dayView: SCal.CalendarDayView, - monthStart : function(){ return this._setDateOnMonthStart(new Date(this.get('content'))); }.property('content'), @@ -82,6 +72,7 @@ SCal.CalendarMonthView = SC.View.extend( SC.Control, Used to reframe when daySize changed */ reframe: function(){ + size = this.get('daySize'); headSize = this.get('headSize'); var f; @@ -102,7 +93,7 @@ SCal.CalendarMonthView = SC.View.extend( SC.Control, for(i = 0; i < this._weekViewPool.length; i++){ //reframe the days var week = this._weekViewPool[i]; - f = { x: 1, y: headSize + size * i, width: size * SCal.ONE_WEEK_DAYS, height: size }; + f = { x: 0, y: headSize + size * i, width: size * SCal.ONE_WEEK_DAYS, height: size }; week.viewFrameWillChange() ; week.set('frame', f); week.viewFrameDidChange() ; @@ -113,7 +104,7 @@ SCal.CalendarMonthView = SC.View.extend( SC.Control, f = this.get('frame'); f.width = size * SCal.ONE_WEEK_DAYS + 2; - f.height = size * (this._weekViewPool.length) + headSize + 1; + f.height = size * (this._weekViewPool.length) + headSize + 2; this.set('frame', f); this.viewFrameDidChange() ; @@ -125,9 +116,7 @@ SCal.CalendarMonthView = SC.View.extend( SC.Control, var runningDate = new Date(monthStart); var checkDate = new Date(monthStart); - var view; - var weekView = this.get('weekView') ? this.get('weekView') : SCal.CalendarWeekView; - + var view; //update month name this._monthNameView.set('value', monthStart.format("MMM yyyy")); @@ -135,7 +124,7 @@ SCal.CalendarMonthView = SC.View.extend( SC.Control, while( true ){ view = (this._weekViewPool.length > i) ? this._weekViewPool[i] - : weekView.create({owner: this, displayDelegate: this }); + : this.invokeDelegateMethod(this.displayDelegate, "createWeekViewDelegate"); //check if we should continue building views if(i == 0){ @@ -150,7 +139,6 @@ SCal.CalendarMonthView = SC.View.extend( SC.Control, view.set('monthWeek', i); view.set('daySize', this.get('daySize')); - view.set('dayView', this.get('dayView')); view.set('content', new Date(runningDate)); if( this._weekViewPool.length == i){ @@ -166,6 +154,10 @@ SCal.CalendarMonthView = SC.View.extend( SC.Control, } this.reframe(); - }.observes('content') + }.observes('content'), + //Delegate support + createWeekViewDelegate : function(){ + return SCal.CalendarWeekView.create({owner: this, displayDelegate: this.displayDelegate }); + } }) ; calendar/month.js @@ -26,11 +26,6 @@ SCal.CalendarWeekView = SC.View.extend( SC.Control, */ daySize: 26, - /* - Default view used for the day, much like exampleView in the ListView - */ - dayView: SCal.CalendarDayView, - monthWeek: -1, /* The current month showing @@ -89,11 +84,10 @@ SCal.CalendarWeekView = SC.View.extend( SC.Control, _updateDays : function() { var view; var weekStart = this.get('weekStart'); - var dayView = this.get('dayView') ? this.get('dayView') : SCal.CalendarDayView; for(var i = 0; i < SCal.ONE_WEEK_DAYS; i++){ view = (this._dayViewPool.length > i) ? this._dayViewPool[i] - : dayView.create({owner: this, displayDelegate: this }); + : this.invokeDelegateMethod(this.displayDelegate, "createDayViewDelegate"); this.appendChild(view); view.set('currentMonth', this.get('currentMonth')); @@ -103,6 +97,11 @@ SCal.CalendarWeekView = SC.View.extend( SC.Control, } this.reframe(); - }.observes('content') + }.observes('content'), + + //Delegate support + createDayViewDelegate : function(){ + return SCal.CalendarDayView.create({owner: this, displayDelegate: this.displayDelegate }); + } }) ; calendar/week.js @@ -1,5 +1,6 @@ .calendar-month{ border: 1px solid #999; + position:absolute; } .calendar-head{ english.lproj/month.css 82af2e6f7868595e6ee64c62851cfac9948cd05f Julien Guimont julien.guimont@gmail.com http://github.com/juggy/sprout-calendar/commit/238b211714504131907b3144b996b9934bb877fe 238b211714504131907b3144b996b9934bb877fe 2008-09-06T23:13:33-07:00 2008-09-06T23:13:33-07:00 Finished the calendar view. The navigation is still unfinished. fa56938e845b1e9442351dbe7c959ab58019322d Julien Guimont julien.guimont@gmail.com