UNPKG

angular-calendar-week-hours-view

Version:

This project aims to provide an alternative view to those already provided on [Angular Calendar](https://github.com/mattlewis92/angular-calendar).

3 lines (2 loc) 24.2 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs/Subject"),require("date-fns"),require("angular-calendar"),require("angular-calendar/modules/common/util"),require("angular-calendar/modules/common/calendar-resize-helper.provider"),require("angular-calendar/modules/common/calendar-drag-helper.provider"),require("@angular/common"),require("angular-resizable-element"),require("angular-draggable-droppable")):"function"==typeof define&&define.amd?define("angular-calendar-week-hours-view",["exports","@angular/core","rxjs/Subject","date-fns","angular-calendar","angular-calendar/modules/common/util","angular-calendar/modules/common/calendar-resize-helper.provider","angular-calendar/modules/common/calendar-drag-helper.provider","@angular/common","angular-resizable-element","angular-draggable-droppable"],t):t(e["angular-calendar-week-hours-view"]={},e.ng.core,e.Rx,e.dateFns,e.angularCalendar,e.util,e.calendarResizeHelper_provider,e.calendarDragHelper_provider,e.ng.common,e.angularResizableElement,e.angularDraggableDroppable)}(this,function(e,a,t,s,n,r,i,o,d,l,p){"use strict";var u=function(){function e(e,t,n){this.cdr=e,this.utils=t,this.events=[],this.excludeDays=[],this.tooltipPlacement="bottom",this.tooltipAppendToBody=!0,this.precision="days",this.dayStartHour=0,this.dayStartMinute=0,this.dayEndHour=23,this.dayEndMinute=59,this.hourSegments=2,this.hourSegmentHeight=30,this.dayHeaderClicked=new a.EventEmitter,this.eventClicked=new a.EventEmitter,this.hourSegmentClicked=new a.EventEmitter,this.eventTimesChanged=new a.EventEmitter,this.beforeViewRender=new a.EventEmitter,this.hours=[],this.eventRows=[],this.currentResizes=new Map,this.locale=n}return e.prototype.ngOnInit=function(){var e=this;this.refresh&&(this.refreshSubscription=this.refresh.subscribe(function(){e.refreshAll(),e.cdr.markForCheck()}))},e.prototype.ngOnChanges=function(e){(e.viewDate||e.excludeDays||e.weekendDays)&&this.refreshHeader(),e.events&&r.validateEvents(this.events),(e.events||e.viewDate||e.excludeDays)&&this.refreshBody(),(e.viewDate||e.dayStartHour||e.dayStartMinute||e.dayEndHour||e.dayEndMinute)&&this.refreshHourGrid()},e.prototype.ngOnDestroy=function(){this.refreshSubscription&&this.refreshSubscription.unsubscribe()},e.prototype.resizeStarted=function(e,t,n){this.currentResizes.set(t,{originalOffset:t.offset,originalSpan:t.span,edge:"undefined"!=typeof n.edges.left?"left":"right"}),this.dayColumnWidth=this.getDayColumnWidth(e);var a=new i.CalendarResizeHelper(e,this.dayColumnWidth);this.validateResize=function(e){var t=e.rectangle;return a.validateResize({rectangle:t})},this.cdr.markForCheck()},e.prototype.resizing=function(e,t,n){var a=this.currentResizes.get(e);if(t.edges.left){var r=Math.round(+t.edges.left/n);e.offset=a.originalOffset+r,e.span=a.originalSpan-r}else if(t.edges.right){r=Math.round(+t.edges.right/n);e.span=a.originalSpan+r}},e.prototype.resizeEnded=function(e){var t,n=this.currentResizes.get(e);t="left"===n.edge?e.offset-n.originalOffset:e.span-n.originalSpan,e.offset=n.originalOffset,e.span=n.originalSpan;var a=e.event.start,r=e.event.end;"left"===n.edge?a=s.addDays(a,t):r&&(r=s.addDays(r,t)),this.eventTimesChanged.emit({newStart:a,newEnd:r,event:e.event}),this.currentResizes["delete"](e)},e.prototype.eventDragged=function(e,t,n){var a=t/n;if(0!==a){var r=s.addDays(e.event.start,a),i=void 0;e.event.end&&(i=s.addDays(e.event.end,a)),this.eventTimesChanged.emit({newStart:r,newEnd:i,event:e.event})}},e.prototype.getDayColumnWidth=function(e){return Math.floor(e.offsetWidth/this.days.length)},e.prototype.dragStart=function(e,t){var a=this;this.dayColumnWidth=this.getDayColumnWidth(e);var r=new o.CalendarDragHelper(e,t);this.validateDrag=function(e){var t=e.x,n=e.y;return 0===a.currentResizes.size&&r.validateDrag({x:t,y:n})},this.cdr.markForCheck()},e.prototype.refreshHeader=function(){this.days=this.utils.getWeekViewHeader({viewDate:this.viewDate,weekStartsOn:this.weekStartsOn,excluded:this.excludeDays,weekendDays:this.weekendDays}),this.beforeViewRender.emit({header:this.days})},e.prototype.refreshBody=function(){this.eventRows=this.utils.getWeekView({events:this.events,viewDate:this.viewDate,weekStartsOn:this.weekStartsOn,excluded:this.excludeDays,precision:this.precision,absolutePositionedEvents:!0}).eventRows},e.prototype.refreshHourGrid=function(){this.hours=this.utils.getDayViewHourGrid({viewDate:this.viewDate,hourSegments:this.hourSegments,dayStart:{hour:this.dayStartHour,minute:this.dayStartMinute},dayEnd:{hour:this.dayEndHour,minute:this.dayEndMinute}})},e.prototype.refreshAll=function(){this.refreshHeader(),this.refreshBody(),this.refreshHourGrid()},e.prototype.eventDropped=function(e,t){e.dropData&&e.dropData.event&&this.eventTimesChanged.emit({event:e.dropData.event,newStart:t.date})},e}();u.decorators=[{type:a.Component,args:[{selector:"iq-calendar-week-hours-view",template:'\n <div class="cal-week-hours-view" #weekViewContainer>\n <iq-calendar-week-hours-view-header\n [days]="days"\n [locale]="locale"\n [customTemplate]="headerTemplate"\n (dayHeaderClicked)="dayHeaderClicked.emit($event)"\n (eventDropped)="eventTimesChanged.emit($event)">\n </iq-calendar-week-hours-view-header>\n <div class="cal-days-container">\n <div class="cal-day-container">\n <div class="cal-day-view">\n <div class="cal-hour-rows">\n <div class="cal-events">\n <div class="cal-hour"\n [class.cal-week-hour-even]="i % 2 === 0"\n [class.cal-week-hour-odd]="i % 2 === 1"\n *ngFor="let hour of hours; let i = index">\n <iq-calendar-week-hours-day-view-hour-segment\n *ngFor="let segment of hour.segments"\n [style.height.px]="hourSegmentHeight"\n [segment]="segment"\n [segmentHeight]="hourSegmentHeight"\n [locale]="locale"\n [customTemplate]="hourSegmentTemplate"\n [class.cal-drag-over]="segment.dragOver"\n mwlDroppable\n (dragEnter)="segment.dragOver = true"\n (dragLeave)="segment.dragOver = false"\n (drop)="segment.dragOver = false; eventDropped($event, segment)">\n </iq-calendar-week-hours-day-view-hour-segment>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class="cal-day-container"\n [class.cal-past]="day.isPast"\n [class.cal-today]="day.isToday"\n [class.cal-future]="day.isFuture"\n *ngFor="let day of days">\n <iq-calendar-week-hours-day-view [dayStartHour]="dayStartHour"\n [dayStartMinute]="dayStartMinute"\n [dayEndHour]="dayEndHour"\n [dayEndMinute]="dayEndMinute"\n [events]="events"\n [viewDate]="day.date"\n [hourSegments]="hourSegments"\n [hourSegmentHeight]="hourSegmentHeight"\n [eventWidth]="(weekViewContainer.offsetWidth / 8)"\n (eventClicked)="eventClicked.emit($event)"\n (hourSegmentClicked)="hourSegmentClicked.emit($event)"\n (eventTimesChanged)="eventTimesChanged.emit($event)"\n [eventTitleTemplate]="eventTitleTemplate"\n [eventTemplate]="eventTemplate">\n </iq-calendar-week-hours-day-view>\n </div>\n </div>\n </div>\n '}]}],u.ctorParameters=function(){return[{type:a.ChangeDetectorRef},{type:n.CalendarUtils},{type:undefined,decorators:[{type:a.Inject,args:[a.LOCALE_ID]}]}]},u.propDecorators={viewDate:[{type:a.Input}],events:[{type:a.Input}],excludeDays:[{type:a.Input}],refresh:[{type:a.Input}],locale:[{type:a.Input}],tooltipPlacement:[{type:a.Input}],tooltipTemplate:[{type:a.Input}],tooltipAppendToBody:[{type:a.Input}],weekStartsOn:[{type:a.Input}],headerTemplate:[{type:a.Input}],eventTemplate:[{type:a.Input}],eventTitleTemplate:[{type:a.Input}],precision:[{type:a.Input}],weekendDays:[{type:a.Input}],dayStartHour:[{type:a.Input}],dayStartMinute:[{type:a.Input}],dayEndHour:[{type:a.Input}],dayEndMinute:[{type:a.Input}],hourSegments:[{type:a.Input}],hourSegmentHeight:[{type:a.Input}],hourSegmentTemplate:[{type:a.Input}],dayHeaderClicked:[{type:a.Output}],eventClicked:[{type:a.Output}],hourSegmentClicked:[{type:a.Output}],eventTimesChanged:[{type:a.Output}],beforeViewRender:[{type:a.Output}]};var h=function(){this.eventClicked=new a.EventEmitter};h.decorators=[{type:a.Component,args:[{selector:"iq-calendar-week-hours-view-event",template:'\n <ng-template\n #defaultTemplate\n let-weekEvent="weekEvent"\n let-tooltipPlacement="tooltipPlacement"\n let-eventClicked="eventClicked"\n let-tooltipTemplate="tooltipTemplate"\n let-tooltipAppendToBody="tooltipAppendToBody">\n <div\n class="cal-event"\n [style.backgroundColor]="weekEvent.event.color.secondary"\n [mwlCalendarTooltip]="weekEvent.event.title | calendarEventTitle:\'weekTooltip\':weekEvent.event"\n [tooltipPlacement]="tooltipPlacement"\n [tooltipEvent]="weekEvent.event"\n [tooltipTemplate]="tooltipTemplate"\n [tooltipAppendToBody]="tooltipAppendToBody">\n <mwl-calendar-event-actions [event]="weekEvent.event"></mwl-calendar-event-actions>\n <mwl-calendar-event-title\n [event]="weekEvent.event"\n [customTemplate]="eventTitleTemplate"\n view="week"\n (mwlClick)="eventClicked.emit()">\n </mwl-calendar-event-title>\n </div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]="customTemplate || defaultTemplate"\n [ngTemplateOutletContext]="{\n weekEvent: weekEvent,\n tooltipPlacement: tooltipPlacement,\n eventClicked: eventClicked,\n tooltipTemplate: tooltipTemplate,\n tooltipAppendToBody: tooltipAppendToBody\n }">\n </ng-template>\n '}]}],h.ctorParameters=function(){return[]},h.propDecorators={weekEvent:[{type:a.Input}],tooltipPlacement:[{type:a.Input}],tooltipAppendToBody:[{type:a.Input}],customTemplate:[{type:a.Input}],eventTitleTemplate:[{type:a.Input}],tooltipTemplate:[{type:a.Input}],eventClicked:[{type:a.Output}]};var v=function(){function e(e,t,n){this.cdr=e,this.utils=t,this.events=[],this.hourSegments=2,this.hourSegmentHeight=30,this.dayStartHour=0,this.dayStartMinute=0,this.dayEndHour=23,this.dayEndMinute=59,this.eventWidth=150,this.eventSnapSize=this.hourSegmentHeight,this.tooltipPlacement="top",this.tooltipAppendToBody=!0,this.eventClicked=new a.EventEmitter,this.hourSegmentClicked=new a.EventEmitter,this.eventTimesChanged=new a.EventEmitter,this.beforeViewRender=new a.EventEmitter,this.hours=[],this.width=0,this.currentResizes=new Map,this.locale=n}return e.prototype.ngOnInit=function(){var e=this;this.refresh&&(this.refreshSubscription=this.refresh.subscribe(function(){e.refreshAll(),e.cdr.markForCheck()}))},e.prototype.ngOnDestroy=function(){this.refreshSubscription&&this.refreshSubscription.unsubscribe()},e.prototype.ngOnChanges=function(e){(e.viewDate||e.dayStartHour||e.dayStartMinute||e.dayEndHour||e.dayEndMinute)&&this.refreshHourGrid(),e.events&&r.validateEvents(this.events),(e.viewDate||e.events||e.dayStartHour||e.dayStartMinute||e.dayEndHour||e.dayEndMinute||e.eventWidth)&&this.refreshView()},e.prototype.eventDropped=function(e,t){e.dropData&&e.dropData.event&&this.eventTimesChanged.emit({event:e.dropData.event,newStart:t.date})},e.prototype.resizeStarted=function(e,t,n){this.currentResizes.set(e,{originalTop:e.top,originalHeight:e.height,edge:"undefined"!=typeof t.edges.top?"top":"bottom"});var a=new i.CalendarResizeHelper(n);this.validateResize=function(e){var t=e.rectangle;return a.validateResize({rectangle:t})},this.cdr.markForCheck()},e.prototype.resizing=function(e,t){var n=this.currentResizes.get(e);t.edges.top?(e.top=n.originalTop+ +t.edges.top,e.height=n.originalHeight-+t.edges.top):t.edges.bottom&&(e.height=n.originalHeight+ +t.edges.bottom)},e.prototype.resizeEnded=function(e){var t,n=this.currentResizes.get(e);t="top"===n.edge?e.top-n.originalTop:e.height-n.originalHeight,e.top=n.originalTop,e.height=n.originalHeight;var a=t*(60/(this.hourSegments*this.hourSegmentHeight)),r=e.event.start,i=e.event.end;"top"===n.edge?r=s.addMinutes(r,a):i&&(i=s.addMinutes(i,a)),this.eventTimesChanged.emit({newStart:r,newEnd:i,event:e.event}),this.currentResizes["delete"](e)},e.prototype.dragStart=function(e,t){var a=this,r=new o.CalendarDragHelper(t,e);this.validateDrag=function(e){var t=e.x,n=e.y;return 0===a.currentResizes.size&&r.validateDrag({x:t,y:n})},this.cdr.markForCheck()},e.prototype.eventDragged=function(e,t){var n=t*(60/(this.hourSegments*this.hourSegmentHeight));if(0!==n){var a=s.addMinutes(e.event.start,n),r=void 0;e.event.end&&(r=s.addMinutes(e.event.end,n)),this.eventTimesChanged.emit({newStart:a,newEnd:r,event:e.event})}},e.prototype.refreshHourGrid=function(){this.hours=this.utils.getDayViewHourGrid({viewDate:this.viewDate,hourSegments:this.hourSegments,dayStart:{hour:this.dayStartHour,minute:this.dayStartMinute},dayEnd:{hour:this.dayEndHour,minute:this.dayEndMinute}}),this.beforeViewRender.emit({body:this.hours})},e.prototype.refreshView=function(){var t=this,n=this.utils.getDayView({events:this.events,viewDate:this.viewDate,hourSegments:this.hourSegments,dayStart:{hour:this.dayStartHour,minute:this.dayStartMinute},dayEnd:{hour:this.dayEndHour,minute:this.dayEndMinute},eventWidth:this.eventWidth,segmentHeight:this.hourSegmentHeight});n.events.forEach(function(e){e.isProcessed||t.scaleOverlappingEvents(e.event.start,e.event.end,n.events)}),this.view=n},e.prototype.scaleOverlappingEvents=function(t,n,e){var a=t,r=n,i=[],s=0;if(e.forEach(function(e){if(!e.isProcessed){if(e.event.start<t&&e.event.end>t)a=e.event.start;else if(e.event.end>n&&e.event.start<n)r=e.event.end;else if(!(e.event.end<=n&&e.event.start>=t))return;e.left>s&&(s=e.left),i.push(e)}}),t===a&&n===r){var o=Math.floor(s/this.eventWidth)+1;i.forEach(function(e){e.isProcessed=!0,e.left/=o,e.width/=o})}else this.scaleOverlappingEvents(a,r,e)},e.prototype.refreshAll=function(){this.refreshHourGrid(),this.refreshView()},e}();v.decorators=[{type:a.Component,args:[{selector:"iq-calendar-week-hours-day-view",template:'\n <div class="cal-day-view" #dayViewContainer>\n <mwl-calendar-all-day-event\n *ngFor="let event of view.allDayEvents"\n [event]="event"\n [customTemplate]="allDayEventTemplate"\n [eventTitleTemplate]="eventTitleTemplate"\n (eventClicked)="eventClicked.emit({event: event})">\n </mwl-calendar-all-day-event>\n <div class="cal-hour-rows">\n <div class="cal-events">\n <div\n #event\n *ngFor="let dayEvent of view?.events"\n class="cal-event-container"\n [class.cal-draggable]="dayEvent.event.draggable"\n [class.cal-starts-within-day]="!dayEvent.startsBeforeDay"\n [class.cal-ends-within-day]="!dayEvent.endsAfterDay"\n [ngClass]="dayEvent.event.cssClass"\n mwlResizable\n [resizeEdges]="{top: dayEvent.event?.resizable?.beforeStart, bottom: dayEvent.event?.resizable?.afterEnd}"\n [resizeSnapGrid]="{top: eventSnapSize, bottom: eventSnapSize}"\n [validateResize]="validateResize"\n (resizeStart)="resizeStarted(dayEvent, $event, dayViewContainer)"\n (resizing)="resizing(dayEvent, $event)"\n (resizeEnd)="resizeEnded(dayEvent)"\n mwlDraggable\n [dragAxis]="{x: false, y: dayEvent.event.draggable && currentResizes.size === 0}"\n [dragSnapGrid]="{y: eventSnapSize}"\n [validateDrag]="validateDrag"\n (dragStart)="dragStart(event, dayViewContainer)"\n (dragEnd)="eventDragged(dayEvent, $event.y)"\n [style.marginTop.px]="dayEvent.top"\n [style.height.px]="dayEvent.height"\n [style.marginLeft.px]="dayEvent.left"\n [style.width.px]="dayEvent.width - 1">\n <mwl-calendar-day-view-event\n [dayEvent]="dayEvent"\n [tooltipPlacement]="tooltipPlacement"\n [tooltipTemplate]="tooltipTemplate"\n [tooltipAppendToBody]="tooltipAppendToBody"\n [customTemplate]="eventTemplate"\n [eventTitleTemplate]="eventTitleTemplate"\n (eventClicked)="eventClicked.emit({event: dayEvent.event})">\n </mwl-calendar-day-view-event>\n </div>\n <div class="cal-hour"\n [class.cal-week-hour-even]="i % 2 === 0"\n [class.cal-week-hour-odd]="i % 2 === 1"\n *ngFor="let hour of hours; let i = index">\n <iq-calendar-week-hours-day-view-hour-segment\n *ngFor="let segment of hour.segments"\n [hourVisible]="false"\n [style.height.px]="hourSegmentHeight"\n [segment]="segment"\n [segmentHeight]="hourSegmentHeight"\n [locale]="locale"\n [customTemplate]="hourSegmentTemplate"\n (mwlClick)="hourSegmentClicked.emit({date: segment.date})"\n [class.cal-drag-over]="segment.dragOver"\n mwlDroppable\n (dragEnter)="segment.dragOver = true"\n (dragLeave)="segment.dragOver = false"\n (drop)="segment.dragOver = false; eventDropped($event, segment)">\n </iq-calendar-week-hours-day-view-hour-segment>\n </div>\n </div>\n\n </div>\n </div>\n '}]}],v.ctorParameters=function(){return[{type:a.ChangeDetectorRef},{type:n.CalendarUtils},{type:undefined,decorators:[{type:a.Inject,args:[a.LOCALE_ID]}]}]},v.propDecorators={viewDate:[{type:a.Input}],events:[{type:a.Input}],hourSegments:[{type:a.Input}],hourSegmentHeight:[{type:a.Input}],dayStartHour:[{type:a.Input}],dayStartMinute:[{type:a.Input}],dayEndHour:[{type:a.Input}],dayEndMinute:[{type:a.Input}],eventWidth:[{type:a.Input}],refresh:[{type:a.Input}],locale:[{type:a.Input}],eventSnapSize:[{type:a.Input}],tooltipPlacement:[{type:a.Input}],tooltipTemplate:[{type:a.Input}],tooltipAppendToBody:[{type:a.Input}],hourSegmentTemplate:[{type:a.Input}],allDayEventTemplate:[{type:a.Input}],eventTemplate:[{type:a.Input}],eventTitleTemplate:[{type:a.Input}],eventClicked:[{type:a.Output}],hourSegmentClicked:[{type:a.Output}],eventTimesChanged:[{type:a.Output}],beforeViewRender:[{type:a.Output}]};var c=function(){this.hourVisible=!0};c.decorators=[{type:a.Component,args:[{selector:"iq-calendar-week-hours-day-view-hour-segment",template:'\n <ng-template\n #defaultTemplate\n let-segment="segment"\n let-locale="locale">\n <div\n class="cal-hour-segment"\n [style.height.px]="segmentHeight"\n [class.cal-hour-start]="segment.isStart"\n [class.cal-after-hour-start]="!segment.isStart"\n [ngClass]="segment.cssClass">\n <div class="cal-time" *ngIf="hourVisible">\n {{ segment.date | calendarDate:\'dayViewHour\':locale }}\n </div>\n </div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]="customTemplate || defaultTemplate"\n [ngTemplateOutletContext]="{\n segment: segment,\n locale: locale\n }">\n </ng-template>\n '}]}],c.ctorParameters=function(){return[]},c.propDecorators={segment:[{type:a.Input}],segmentHeight:[{type:a.Input}],locale:[{type:a.Input}],customTemplate:[{type:a.Input}],hourVisible:[{type:a.Input}]};var g=function(){this.dayHeaderClicked=new a.EventEmitter,this.eventDropped=new a.EventEmitter};g.decorators=[{type:a.Component,args:[{selector:"iq-calendar-week-hours-view-header",template:'\n <ng-template\n #defaultTemplate\n let-days="days"\n let-locale="locale"\n let-dayHeaderClicked="dayHeaderClicked"\n let-eventDropped="eventDropped">\n <div class="cal-day-headers">\n <div class="cal-header">\n </div>\n <div\n class="cal-header"\n *ngFor="let day of days"\n [class.cal-past]="day.isPast"\n [class.cal-today]="day.isToday"\n [class.cal-future]="day.isFuture"\n [class.cal-weekend]="day.isWeekend"\n [class.cal-drag-over]="day.dragOver"\n [ngClass]="day.cssClass"\n (mwlClick)="dayHeaderClicked.emit({day: day})"\n mwlDroppable\n (dragEnter)="day.dragOver = true"\n (dragLeave)="day.dragOver = false"\n (drop)="day.dragOver = false; eventDropped.emit({event: $event.dropData.event, newStart: day.date})">\n <b>{{ day.date | calendarDate:\'weekViewColumnHeader\':locale }}</b><br>\n <span>{{ day.date | calendarDate:\'weekViewColumnSubHeader\':locale }}</span>\n </div>\n </div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]="customTemplate || defaultTemplate"\n [ngTemplateOutletContext]="{days: days, locale: locale, dayHeaderClicked: dayHeaderClicked, eventDropped: eventDropped}">\n </ng-template>\n '}]}],g.ctorParameters=function(){return[]},g.propDecorators={days:[{type:a.Input}],locale:[{type:a.Input}],customTemplate:[{type:a.Input}],dayHeaderClicked:[{type:a.Output}],eventDropped:[{type:a.Output}]};var y=function(){};y.decorators=[{type:a.NgModule,args:[{imports:[d.CommonModule,n.CalendarModule,l.ResizableModule,p.DragAndDropModule],declarations:[u,g,h,v,c],exports:[u,g,h,v,c]}]}],y.ctorParameters=function(){return[]},e.CalendarWeekHoursViewModule=y,e.ɵe=c,e.ɵd=v,e.ɵc=h,e.ɵb=g,e.ɵa=u,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=angular-calendar-week-hours-view.umd.min.js.map