angular-calendar
Version:
A calendar component that can display events on a month, week or day view
204 lines • 9.07 kB
JavaScript
import { Component, Input, Output, EventEmitter, ChangeDetectorRef, LOCALE_ID, Inject } from '@angular/core';
import { getWeekViewHeader, getWeekView } from 'calendar-utils';
import addDays from 'date-fns/add_days';
import { CalendarDragHelper } from '../../providers/calendarDragHelper.provider';
import { CalendarResizeHelper } from '../../providers/calendarResizeHelper.provider';
/**
* Shows all events on a given week. Example usage:
*
* ```
* <mwl-calendar-week-view
* [viewDate]="viewDate"
* [events]="events">
* </mwl-calendar-week-view>
* ```
*/
export var CalendarWeekViewComponent = (function () {
/**
* @hidden
*/
function CalendarWeekViewComponent(cdr, locale) {
this.cdr = cdr;
/**
* An array of events to display on view
*/
this.events = [];
/**
* The placement of the event tooltip
*/
this.tooltipPlacement = 'bottom';
/**
* Called when a header week day is clicked
*/
this.dayClicked = new EventEmitter();
/**
* Called when the event title is clicked
*/
this.eventClicked = new EventEmitter();
/**
* Called when an event is resized or dragged and dropped
*/
this.eventTimesChanged = new EventEmitter();
/**
* @hidden
*/
this.eventRows = [];
this.locale = locale;
}
/**
* @hidden
*/
CalendarWeekViewComponent.prototype.ngOnInit = function () {
var _this = this;
if (this.refresh) {
this.refreshSubscription = this.refresh.subscribe(function () {
_this.refreshAll();
_this.cdr.markForCheck();
});
}
};
/**
* @hidden
*/
CalendarWeekViewComponent.prototype.ngOnChanges = function (changes) {
if (changes.viewDate) {
this.refreshHeader();
}
if (changes.events || changes.viewDate) {
this.refreshBody();
}
};
/**
* @hidden
*/
CalendarWeekViewComponent.prototype.ngOnDestroy = function () {
if (this.refreshSubscription) {
this.refreshSubscription.unsubscribe();
}
};
/**
* @hidden
*/
CalendarWeekViewComponent.prototype.resizeStarted = function (weekViewContainer, weekEvent, resizeEvent) {
this.currentResize = {
originalOffset: weekEvent.offset,
originalSpan: weekEvent.span,
edge: typeof resizeEvent.edges.left !== 'undefined' ? 'left' : 'right'
};
var resizeHelper = new CalendarResizeHelper(weekViewContainer, this.getDayColumnWidth(weekViewContainer));
this.validateResize = function (_a) {
var rectangle = _a.rectangle;
return resizeHelper.validateResize({ rectangle: rectangle });
};
this.cdr.markForCheck();
};
/**
* @hidden
*/
CalendarWeekViewComponent.prototype.resizing = function (weekEvent, resizeEvent, dayWidth) {
if (resizeEvent.edges.left) {
var diff = Math.round(+resizeEvent.edges.left / dayWidth);
weekEvent.offset = this.currentResize.originalOffset + diff;
weekEvent.span = this.currentResize.originalSpan - diff;
}
else if (resizeEvent.edges.right) {
var diff = Math.round(+resizeEvent.edges.right / dayWidth);
weekEvent.span = this.currentResize.originalSpan + diff;
}
};
/**
* @hidden
*/
CalendarWeekViewComponent.prototype.resizeEnded = function (weekEvent) {
var daysDiff;
if (this.currentResize.edge === 'left') {
daysDiff = weekEvent.offset - this.currentResize.originalOffset;
}
else {
daysDiff = weekEvent.span - this.currentResize.originalSpan;
}
weekEvent.offset = this.currentResize.originalOffset;
weekEvent.span = this.currentResize.originalSpan;
var newStart = weekEvent.event.start;
var newEnd = weekEvent.event.end;
if (this.currentResize.edge === 'left') {
newStart = addDays(newStart, daysDiff);
}
else if (newEnd) {
newEnd = addDays(newEnd, daysDiff);
}
this.eventTimesChanged.emit({ newStart: newStart, newEnd: newEnd, event: weekEvent.event });
this.currentResize = null;
};
/**
* @hidden
*/
CalendarWeekViewComponent.prototype.eventDragged = function (weekEvent, draggedByPx, dayWidth) {
var daysDragged = draggedByPx / dayWidth;
var newStart = addDays(weekEvent.event.start, daysDragged);
var newEnd;
if (weekEvent.event.end) {
newEnd = addDays(weekEvent.event.end, daysDragged);
}
this.eventTimesChanged.emit({ newStart: newStart, newEnd: newEnd, event: weekEvent.event });
};
/**
* @hidden
*/
CalendarWeekViewComponent.prototype.getDayColumnWidth = function (eventRowContainer) {
return Math.floor(eventRowContainer.offsetWidth / 7);
};
/**
* @hidden
*/
CalendarWeekViewComponent.prototype.dragStart = function (weekViewContainer, event) {
var _this = this;
var dragHelper = new CalendarDragHelper(weekViewContainer, event);
this.validateDrag = function (_a) {
var x = _a.x, y = _a.y;
return !_this.currentResize && dragHelper.validateDrag({ x: x, y: y });
};
this.cdr.markForCheck();
};
CalendarWeekViewComponent.prototype.refreshHeader = function () {
this.days = getWeekViewHeader({
viewDate: this.viewDate,
weekStartsOn: this.weekStartsOn
});
};
CalendarWeekViewComponent.prototype.refreshBody = function () {
this.eventRows = getWeekView({
events: this.events,
viewDate: this.viewDate,
weekStartsOn: this.weekStartsOn
});
};
CalendarWeekViewComponent.prototype.refreshAll = function () {
this.refreshHeader();
this.refreshBody();
};
CalendarWeekViewComponent.decorators = [
{ type: Component, args: [{
selector: 'mwl-calendar-week-view',
template: "\n <div class=\"cal-week-view\" #weekViewContainer>\n <div class=\"cal-day-headers\">\n <mwl-calendar-week-view-header\n *ngFor=\"let day of days\"\n [day]=\"day\"\n [locale]=\"locale\"\n (click)=\"dayClicked.emit({date: day.date})\">\n </mwl-calendar-week-view-header>\n </div>\n <div *ngFor=\"let eventRow of eventRows\" #eventRowContainer>\n <div\n class=\"cal-event-container\"\n #event\n [class.cal-draggable]=\"weekEvent.event.draggable\"\n *ngFor=\"let weekEvent of eventRow.row\"\n [style.width]=\"((100 / 7) * weekEvent.span) + '%'\"\n [style.marginLeft]=\"((100 / 7) * weekEvent.offset) + '%'\"\n mwlResizable\n [resizeEdges]=\"{left: weekEvent.event?.resizable?.beforeStart, right: weekEvent.event?.resizable?.afterEnd}\"\n [resizeSnapGrid]=\"{left: getDayColumnWidth(eventRowContainer), right: getDayColumnWidth(eventRowContainer)}\"\n [validateResize]=\"validateResize\"\n (resizeStart)=\"resizeStarted(weekViewContainer, weekEvent, $event)\"\n (resizing)=\"resizing(weekEvent, $event, getDayColumnWidth(eventRowContainer))\"\n (resizeEnd)=\"resizeEnded(weekEvent)\"\n mwlDraggable\n [dragAxis]=\"{x: weekEvent.event.draggable && !currentResize, y: false}\"\n [dragSnapGrid]=\"{x: getDayColumnWidth(eventRowContainer)}\"\n [validateDrag]=\"validateDrag\"\n (dragStart)=\"dragStart(weekViewContainer, event)\"\n (dragEnd)=\"eventDragged(weekEvent, $event.x, getDayColumnWidth(eventRowContainer))\">\n <mwl-calendar-week-view-event\n [weekEvent]=\"weekEvent\"\n [tooltipPlacement]=\"tooltipPlacement\"\n (eventClicked)=\"eventClicked.emit({event: weekEvent.event})\">\n </mwl-calendar-week-view-event>\n </div>\n </div>\n </div>\n "
},] },
];
/** @nocollapse */
CalendarWeekViewComponent.ctorParameters = function () { return [
{ type: ChangeDetectorRef, },
{ type: undefined, decorators: [{ type: Inject, args: [LOCALE_ID,] },] },
]; };
CalendarWeekViewComponent.propDecorators = {
'viewDate': [{ type: Input },],
'events': [{ type: Input },],
'refresh': [{ type: Input },],
'locale': [{ type: Input },],
'tooltipPlacement': [{ type: Input },],
'weekStartsOn': [{ type: Input },],
'dayClicked': [{ type: Output },],
'eventClicked': [{ type: Output },],
'eventTimesChanged': [{ type: Output },],
};
return CalendarWeekViewComponent;
}());
//# sourceMappingURL=calendarWeekView.component.js.map