angular-calendar-year-view/bundles/angular-calendar-year-view.umd.min.js

angular-calendar-year-view based on angular calendar moduel

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lodash/cloneDeep"),require("@angular/platform-browser"),require("@angular/core"),require("@angular/common"),require("ngx-bootstrap/popover")):"function"==typeof define&&define.amd?define("angular-calendar-year-view",["exports","lodash/cloneDeep","@angular/platform-browser","@angular/core","@angular/common","ngx-bootstrap/popover"],t):t(e["angular-calendar-year-view"]={},e.cloneDeep,e.ng.platformBrowser,e.ng.core,e.ng.common,e.popover)}(this,function(e,t,n,a,r,o){"use strict";var i="default"in t?t["default"]:t,s=function(){function e(){}return e.decorators=[{type:a.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[]},e.ngInjectableDef=a.defineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e}(),d=i||t,l=function(){function e(e){this.sanitizer=e,this.themecolor="#ff0000",this.events=[],this.viewDate=new Date,this.nothingToshowText="There are no events scheduled that day.",this.popoverEnabled=!0,this.eventClicked=new a.EventEmitter,this.actionClicked=new a.EventEmitter,this.dayClicked=new a.EventEmitter,this.loader=!1,this.days=[new Date(2019,1,3),new Date(2019,1,4),new Date(2019,1,5),new Date(2019,1,6),new Date(2019,1,7),new Date(2019,1,8),new Date(2019,1,9)],this.daydetails={},this.year=(new Date).getFullYear(),this.calendar=[],this.spinner=!0}return Object.defineProperty(e.prototype,"style",{get:function(){return this.sanitizer.bypassSecurityTrustStyle("--themecolor: "+this.themecolor+";")},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.initCalendar(this.viewDate)},e.prototype.ngOnChanges=function(){this.initCalendar(this.viewDate)},e.prototype.initCalendar=function(e){this.year=e.getFullYear(),this.calendar=[],this.spinner=!0;for(var t=0;t<12;t++)this.calendar.push({date:new Date(this.year,t+1,0),days:this.generateCalendar(t+1,this.year)});var n=this;setTimeout(function(){n.spinner=!1},2e3)},e.prototype.generateCalendar=function(e,t){for(var n=[],a=this.getNbWeeks(e,t),r=new Date(t,e-1,1).getDay(),o=new Date(t,e,0).getDate(),i=new Date(t,e-1,o).getDay(),s=7,d=1,l=(new Date).toDateString(),c=0;c<a;c++){n[c]=[],a==c+1&&(s=i+1),0<c&&(r=0);for(var p=r;p<s;p++){var h=new Date(t,e-1,d).toDateString()==l,y=this.getnbevents(d,e-1);n[c][p]={day:d,istoday:h,colors:y.color,events:[],nb:y.nb},d++}}return n},e.prototype.getNbWeeks=function(e,t){var n=new Date(t,e-1,1).getDay(),a=new Date(t,e,0).getDate();return(a+n+(6-new Date(t,e-1,a).getDay()))/7},e.prototype.dayClickedFn=function(e,t){var n=new Date(this.year,t,e.day);if(this.daydetails={events:[]},0<this.events.length){this.loader=!0,this.daydetails=d(e);for(var a=new Date(this.year,t,e.day).toDateString(),r=0;r<this.events.length;r++){var o=this.events[r];o.start.toDateString()==a&&this.daydetails.events.push(o)}}this.dayClicked.emit({date:n,events:this.daydetails.events})},e.prototype.getTodayEvents=function(e,t){if(this.daydetails={},0<this.events.length){this.loader=!0,this.daydetails=d(e);for(var a=new Date(this.year,t,e.day).toDateString(),n=function(e){var t=r.events[e];if(t.start.toDateString()==a&&r.daydetails.events.push(t),e==r.events.length-1){var n=r;setTimeout(function(){n.loader=!1},1e3)}},r=this,o=0;o<this.events.length;o++)n(o)}},e.prototype.getnbevents=function(e,t){var n=0,a=[];if(0<this.events.length){for(var r=new Date(this.year,t,e).toDateString(),o=0;o<this.events.length;o++){var i=this.events[o];i.start.toDateString()==r&&(n++,a.push(i.color.secondary))}return{nb:n,color:a.toString()}}return{color:"",nb:0}},e.prototype.eventClickedFn=function(e){this.eventClicked.emit(e)},e.prototype.refresh=function(e){this.initCalendar(e)},e.prototype.actionClickedFn=function(e,t){this.actionClicked.emit({action:e,event:t})},e.decorators=[{type:a.Component,args:[{selector:"angular-calendar-year-view",template:'\n  <div class="calendarcontainer flexmonths">\n  <div class="responsivecontainer" *ngFor="let Month of calendar;let m =index">\n      <div  class="monthcontainer ">\n        <p class="monthname">{{Month.date | date:\'MMMM\'}}</p>\n        <div class="flexdays">\n          <div class="day" *ngFor="let label of days">\n            {{label | date:\'EEEEEE\'}}\n          </div>\n        </div>\n        <div *ngFor="let week of Month.days" class="flexdays">\n          <div *ngFor="let day of week;let i=index" [ngClass]="day?( day.istoday?\'todayclass\':(day.nb>0?\'haveevents\':\'\')):   \'void_day\'"\n            [style.background-image]="day? (\'linear-gradient(120deg, \'+day.colors+\',#fff)\'):\'\'" class="day" \n            [outsideClick]="true"\n            [popover]="popoverEnabled?(customTemplate?customTemplate:yearcalendarpoptemplate):\'\'" \n            placement="right" \n            (onShown)="dayindex=i;getTodayEvents(day,m)"\n            (click)="dayClickedFn(day,m)">\n            {{day?.day}}\n          </div>\n        </div>\n      </div>\n  </div>\n</div>\n<div *ngIf="spinner" class="calendar-loading">\n  <svg class="spinner" viewBox="25 25 50 50">\n    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />\n  </svg>\n</div>\n<ng-template #yearcalendarpoptemplate>\n  <div class="col-md-12 col-calendar">\n    <p [ngClass]="daydetails.istoday?\'todaytext\':\'\'" class="pop_year_day">{{days[dayindex]| date:\'EEEEEE\'}}.</p>\n    <p [ngClass]="daydetails.istoday?\'todaytext\':\'\'" class="pop_year_day_number">{{daydetails?.day}} </p>\n    <div *ngIf="!loader">\n      <div *ngFor="let event of daydetails.events">\n          <a   [style.color]="event.color.primary+\'!importants\'" \n               class="icon-action-calendar" \n               *ngFor=\'let action of event.actions\' \n                [innerHTML]=\'action.label\' \n                (click)="actionClickedFn(action.name,event)"\n                >\n            \n          </a>\n        <div class="circle_day_color" [style.background]="event.color.secondary" [style.border-color]="event.color.primary"></div>\n        <p class="pop_year_event_title" (click)="eventClickedFn(event)">\n          <span>\n            {{event.start| date:\'HH:mm\'}}\n          </span>\n          {{event.title}}\n        </p>\n        \n      </div>\n    </div>\n    <div class="progressbar_popyear" *ngIf="!daydetails.events||(daydetails.events.length==0)&&!loader">\n     {{nothingToshowText}} \n    </div>\n    <div [hidden]="!loader" class="loader_popover_calendar"></div>\n  </div>\n</ng-template>\n  ',styles:['.flexdays{display:flex}.flexmonths{display:flex;flex-wrap:wrap}.calendarcontainer{margin:auto;padding:15px}.col-calendar{min-width:250px}.monthcontainer{width:245px;margin:auto auto 25px;background:#fff;padding:10px;min-height:293px}.haveevents{background:linear-gradient(120deg,var(--primary),#fff);color:var(--textcolor)}.flexdays .day{padding:2px;width:28px!important;height:28px!important;border-radius:50%;margin:2px;text-align:center}.flexdays .day:hover,.yeardayactive{background:#eee;cursor:pointer}.monthname{text-align:center;font-size:18px;color:var(--themecolor);text-transform:capitalize}.title-calendar-year{margin-bottom:25px}.todayclass{background:var(--themecolor)!important;color:#fff}.eventclass{background:#4ab3cc!important;color:#fff}.todaytext{color:var(--themecolor)!important}.eventtext{color:#4ab3cc!important}.void_day{pointer-events:none}.pop_year_day{color:#6c6c6c;font-size:16px}.pop_year_day_number{font-size:38px;color:#b3b3b3;margin-left:6px;margin-top:-15px}.circle_day_color{width:10px;height:10px;border-radius:50%;float:left;margin-right:6px;margin-top:5px;border:1px solid}.pop_year_event_title{width:200px;color:#b7b7b6;margin-top:-8px}.progressbar_popyear{width:200px;padding:13px 0}.pop_year_event_title:hover{text-decoration:underline;cursor:pointer}.icon-action-calendar{float:right;color:#8a8989!important;cursor:pointer}.icon-action-calendar:hover{opacity:.4}.calendar-loading .spinner{height:200px;width:200px;-webkit-animation:2s linear infinite rotate;animation:2s linear infinite rotate;-webkit-transform-origin:center center;transform-origin:center center;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}.calendar-loading .spinner .path{stroke-dasharray:1,200;stroke-dashoffset:0;-webkit-animation:1.5s ease-in-out infinite dash;animation:1.5s ease-in-out infinite dash;stroke-linecap:round;stroke:var(--themecolor)}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.loader_popover_calendar{height:6px;width:90%;margin-bottom:10px;overflow:hidden;background-color:#ffdede00;position:absolute}.loader_popover_calendar:before{display:block;position:absolute;content:"";left:-20px;width:20px;height:4px;background-color:var(--themecolor);-webkit-animation:1s linear infinite loading;animation:1s linear infinite loading}@-webkit-keyframes loading{from{left:-20px;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}@keyframes loading{from{left:-20px;width:30%}50%{width:30%}70%{width:70%}80%{left:50%}95%{left:120%}to{left:100%}}.titles_calendar{font-weight:700;text-transform:capitalize}.responsivecontainer{width:25%}@media screen and (max-width:499px){.responsivecontainer{width:100%!important}}@media screen and (min-width:500px) and (max-width:749px){.responsivecontainer{width:50%!important}}@media screen and (min-width:750px) and (max-width:999px){.responsivecontainer{width:33%!important}}@media screen and (min-width:1000px){.responsivecontainer{width:25%!important}}']}]}],e.ctorParameters=function(){return[{type:n.DomSanitizer}]},e.propDecorators={style:[{type:a.HostBinding,args:["style"]}],themecolor:[{type:a.Input}],events:[{type:a.Input}],viewDate:[{type:a.Input}],nothingToshowText:[{type:a.Input}],popoverEnabled:[{type:a.Input}],customTemplate:[{type:a.Input}],eventClicked:[{type:a.Output}],actionClicked:[{type:a.Output}],dayClicked:[{type:a.Output}]},e}(),c=function(){function e(){}return e.decorators=[{type:a.NgModule,args:[{declarations:[l],imports:[r.CommonModule,o.PopoverModule.forRoot()],schemas:[],exports:[l]}]}],e}();e.AngularCalendarYearViewService=s,e.AngularCalendarYearViewComponent=l,e.AngularCalendarYearViewModule=c,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=angular-calendar-year-view.umd.min.js.map