angular-material-calendar.js 9.0 KB

1
  1. app.config(["app.config","$logProvider","$compileProvider",function(t,e,a){t.debug&&(e.debugEnabled(!1),a.debugInfoEnabled(!1))}]),app.service("app.Calendar",[function(){function t(t,e,a){var n=new Date;this.setWeekStartsOn=function(t){var e=parseInt(t||0,10);return!isNaN(e)&&e>=0&&e<=6?this.weekStartsOn=e:this.weekStartsOn=0,this.weekStartsOn},this.options=angular.isObject(a)?a:{},this.year=n.getFullYear(),this.month=n.getMonth(),this.weeks=[],this.weekStartsOn=this.setWeekStartsOn(this.options.weekStartsOn),this.next=function(){if(this.start.getMonth()<11)return void this.init(this.start.getFullYear(),this.start.getMonth()+1);this.init(this.start.getFullYear()+1,0)},this.prev=function(){if(this.month)return void this.init(this.start.getFullYear(),this.start.getMonth()-1);this.init(this.start.getFullYear()-1,11)},this.init=function(t,e){var a=new Date;this.year=angular.isDefined(t)?t:a.getFullYear(),this.month=angular.isDefined(e)?e:a.getMonth();var n=[31,28,31,30,31,30,31,31,30,31,30,31],o=n[this.month];1===this.month&&(this.year%4==0&&this.year%100!=0||this.year%400==0)&&(o=29),this.start=new Date(this.year,this.month,1);for(var r=angular.copy(this.start);r.getDay()!==this.weekStartsOn;)r.setDate(r.getDate()-1),o++;for(;o%7!=0;)o++;this.weeks=[];for(var i=0;i<o;++i)i%7==0&&this.weeks.push([]),this.weeks[this.weeks.length-1].push(angular.copy(r)),r.setDate(r.getDate()+1)},this.init(t,e)}return t}]),app.service("MaterialCalendarData",[function(){function t(){this.data={},this.getDayKey=function(t){return[t.getFullYear(),t.getMonth()+1,t.getDate()].join("-")},this.setDayContent=function(t,e){this.data[this.getDayKey(t)]=e||this.data[this.getDayKey(t)]||""}}return new t}]),app.directive("calendarMd",["$compile","$parse","$http","$q","app.Calendar","MaterialCalendarData",function(t,e,a,n,o,r){var i=function(){if(!document.getElementById("calendarMdCss")){var t=document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css",e.id="calendarMdCss",e.innerHTML="calendar-md md-content>md-content.agenda>*>* :not(:first-child),calendar-md md-content>md-content.calendar>:not(:first-child)>* :last-child{overflow:hidden;text-overflow:ellipsis}calendar-md{display:block;max-height:100%}calendar-md .md-toolbar-tools h2{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}calendar-md md-content>md-content{border:1px solid rgba(0,0,0,.12)}calendar-md md-content>md-content.agenda>*>*{border-bottom:1px solid rgba(0,0,0,.12)}calendar-md md-content>md-content.agenda>*>.disabled{color:rgba(0,0,0,.3);pointer-events:none;cursor:auto}calendar-md md-content>md-content.agenda>*>* :first-child{padding:12px;width:200px;text-align:right;color:rgba(0,0,0,.75);font-weight:100;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}calendar-md md-content>md-content>*>*{min-width:48px}calendar-md md-content>md-content.calendar>:first-child{background:rgba(0,0,0,.02);border-bottom:1px solid rgba(0,0,0,.12);margin-right:0;min-height:36px}calendar-md md-content>md-content.calendar>:not(:first-child)>*{border-bottom:1px solid rgba(0,0,0,.12);border-right:1px solid rgba(0,0,0,.12);cursor:pointer}calendar-md md-content>md-content.calendar>:not(:first-child)>:hover{background:rgba(0,0,0,.04)}calendar-md md-content>md-content.calendar>:not(:first-child)>.disabled{color:rgba(0,0,0,.3);pointer-events:none;cursor:auto}calendar-md md-content>md-content.calendar>:not(:first-child)>.active{box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);background:rgba(0,0,0,.02)}calendar-md md-content>md-content.calendar>:not(:first-child)>* :first-child{padding:0}",t.insertBefore(e,t.firstChild)}};return{restrict:"E",scope:{ngModel:"=?",template:"&",templateUrl:"=?",onDayClick:"=?",onPrevMonth:"=?",onNextMonth:"=?",calendarDirection:"=?",dayContent:"&?",timezone:"=?",titleFormat:"=?",dayFormat:"=?",dayLabelFormat:"=?",dayLabelTooltipFormat:"=?",dayTooltipFormat:"=?",weekStartsOn:"=?",tooltips:"&?",clearDataCacheOnLoad:"=?",disableFutureSelection:"=?"},link:function(d,l,c){i();var s=new Date,u=parseInt(c.startMonth||s.getMonth()),m=parseInt(c.startYear||s.getFullYear());d.columnWeekLayout="column",d.weekLayout="row",d.timezone=d.timezone||null,d.noCache=c.clearDataCacheOnLoad||!1,c.ngModel?(d.active=d.$parent.$eval(c.ngModel),c.ngModel&&d.$watch("$parent."+c.ngModel,function(t){d.active=t})):d.active=null,d.titleFormat=d.titleFormat||"MMMM yyyy",d.dayLabelFormat=d.dayLabelFormat||"EEE",d.dayLabelTooltipFormat=d.dayLabelTooltipFormat||"EEEE",d.dayFormat=d.dayFormat||"d",d.dayTooltipFormat=d.dayTooltipFormat||"fullDate",d.disableFutureSelection=d.disableFutureSelection||!1,d.sameMonth=function(t){var e=angular.copy(t);return e.getFullYear()===d.calendar.year&&e.getMonth()===d.calendar.month},d.isDisabled=function(t){return!!(d.disableFutureSelection&&t>new Date)||!d.sameMonth(t)},d.calendarDirection=d.calendarDirection||"horizontal",d.$watch("calendarDirection",function(t){d.weekLayout="horizontal"===t?"row":"column"}),d.$watch("weekLayout",function(){m=d.calendar.year,u=d.calendar.month,w()});var h=function(t,e){(t||angular.noop)(e)},g=function(t,e){var a=-1;return angular.forEach(t,function(t,n){a<0&&angular.equals(e,t)&&(a=n)}),a};d.isActive=function(t){var e=angular.copy(d.active);return angular.isArray(e)?g(e,t)>-1:angular.equals(t,e)},d.prev=function(){d.calendar.prev();var t={year:d.calendar.year,month:d.calendar.month+1};b(),h(d.onPrevMonth,t)},d.next=function(){d.calendar.next();var t={year:d.calendar.year,month:d.calendar.month+1};b(),h(d.onNextMonth,t)},d.handleDayClick=function(t){if(!(d.disableFutureSelection&&t>new Date)){var a=angular.copy(d.active);if(angular.isArray(a)){var n=g(a,t);n>-1?a.splice(n,1):a.push(t)}else a=angular.equals(a,t)?null:t;d.active=a,c.ngModel&&e(c.ngModel).assign(d.$parent,angular.copy(d.active)),h(d.onDayClick,angular.copy(t))}};var p=function(e){l.html(e),t(l.contents())(d)},y=function(){d.calendar=new o(m,u,{weekStartsOn:d.weekStartsOn||0});var t=n.defer();return d.templateUrl?a.get(d.templateUrl).success(t.resolve).error(t.reject):t.resolve(d.template()||"<md-content layout='column' layout-fill md-swipe-left='next()' md-swipe-right='prev()'><md-toolbar class='text-center'><div class='md-toolbar-tools' ><md-button class='md-icon-button btn btn-weekbutton weekbutton' ng-click='prev()' aria-label='Previous month'><md-tooltip ng-if='::tooltips()'>Previous month</md-tooltip>&laquo;</md-button><div flex></div><h2 class='calendar-md-title'><span>{{ calendar.start | date:titleFormat:timezone }}</span></h2><div flex></div><md-button class='md-icon-button btn btn-weekbutton weekbutton' ng-click='next()' aria-label='Next month'><md-tooltip ng-if='::tooltips()'>Next month</md-tooltip>&raquo;</md-button></div></md-toolbar>\x3c!-- agenda view --\x3e<md-content ng-if='weekLayout === columnWeekLayout' class='agenda'><div ng-repeat='week in calendar.weeks track by $index'><div ng-if='sameMonth(day)' ng-model='day' ng-class='{&quot;disabled&quot; : isDisabled(day), active: active === day }' ng-click='handleDayClick(day)' ng-repeat='day in week' layout><md-tooltip ng-if='::tooltips()'>{{ day | date:dayTooltipFormat:timezone }}</md-tooltip><div>{{ day | date:dayFormat:timezone }}</div><div flex ng-bind-html='dataService.data[dayKey(day)]'></div></div></div></md-content>\x3c!-- calendar view --\x3e<md-content ng-if='weekLayout !== columnWeekLayout' flex layout='column' class='calendar'><div layout='row' class='subheader'><div layout-padding class='subheader-day' flex ng-repeat='day in calendar.weeks[0]'><md-tooltip ng-if='::tooltips()'>{{ day | date:dayLabelTooltipFormat }}</md-tooltip>{{ day | date:dayLabelFormat }}</div></div><div ng-if='week.length' ng-repeat='week in calendar.weeks track by $index' flex layout='row'><div tabindex='{{ sameMonth(day) ? (day | date:dayFormat:timezone) : 0 }}' ng-repeat='day in week track by $index' ng-click='handleDayClick(day)' flex layout layout-padding ng-class='{&quot;disabled&quot; : isDisabled(day), &quot;active&quot;: isActive(day), &quot;md-whiteframe-12dp&quot;: hover || focus }' ng-focus='focus = true;' ng-blur='focus = false;' ng-mouseleave='hover = false' ng-mouseenter='hover = true'><md-tooltip ng-if='::tooltips()'>{{ day | date:dayTooltipFormat }}</md-tooltip><div>{{ day | date:dayFormat }}</div><div flex ng-bind-html='dataService.data[dayKey(day)]'></div></div></div></md-content></md-content>"),t.promise};d.dataService=r;var v=function(t){return d.dataService.getDayKey(t)};d.dayKey=v;var f=function(t){d.noCache?d.dataService.setDayContent(t,""):d.dataService.setDayContent(t,d.dataService.data[v(t)]||"");var e=(d.dayContent||angular.noop)(),a=(e||angular.noop)(t);angular.isObject(a)&&"function"==typeof a.success?a.success(function(e){d.dataService.setDayContent(t,e)}):angular.isObject(a)&&"function"==typeof a.then?a.then(function(e){d.dataService.setDayContent(t,e)}):d.dataService.setDayContent(t,a)},b=function(){angular.forEach(d.calendar.weeks,function(t){angular.forEach(t,f)})};window.data=d.data;var w=function(){y().then(function(t){p(t),b()})};d.$watch("weekStartsOn",y),w(),d._$$init=y,d._$$setTemplate=p,d._$$bootstrap=w}}}]);