angular-calendar-year-view/angular-calendar-year-view.metadata.json

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

{"__symbolic":"module","version":4,"metadata":{"AngularCalendarYearViewService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"AngularCalendarYearViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"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}}"]}]}],"members":{"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":70,"character":3},"arguments":["style"]}]}],"themecolor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3}}]}],"events":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3}}]}],"viewDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":3}}]}],"nothingToshowText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"popoverEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":3}}]}],"customTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3}}]}],"eventClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":93,"character":3}}]}],"actionClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":96,"character":3}}]}],"dayClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":99,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":109,"character":31}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"initCalendar":[{"__symbolic":"method"}],"generateCalendar":[{"__symbolic":"method"}],"getNbWeeks":[{"__symbolic":"method"}],"dayClickedFn":[{"__symbolic":"method"}],"getTodayEvents":[{"__symbolic":"method"}],"getnbevents":[{"__symbolic":"method"}],"eventClickedFn":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"actionClickedFn":[{"__symbolic":"method"}]}},"AngularCalendarYearViewModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"AngularCalendarYearViewComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-bootstrap/popover","name":"PopoverModule","line":10,"character":4},"member":"forRoot"}}],"schemas":[],"exports":[{"__symbolic":"reference","name":"AngularCalendarYearViewComponent"}]}]}],"members":{}}},"origins":{"AngularCalendarYearViewService":"./lib/angular-calendar-year-view.service","AngularCalendarYearViewComponent":"./lib/angular-calendar-year-view.component","AngularCalendarYearViewModule":"./lib/angular-calendar-year-view.module"},"importAs":"angular-calendar-year-view"}