@smart-solutions-tech/smart-angular-calendar 0.0.9 → 0.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/smart-calendar/smart-calendar.component.mjs +110 -25
- package/esm2020/lib/components/week/week.component.mjs +133 -0
- package/esm2020/lib/smart-angular-calendar.module.mjs +6 -3
- package/fesm2015/smart-solutions-tech-smart-angular-calendar.mjs +237 -24
- package/fesm2015/smart-solutions-tech-smart-angular-calendar.mjs.map +1 -1
- package/fesm2020/smart-solutions-tech-smart-angular-calendar.mjs +237 -24
- package/fesm2020/smart-solutions-tech-smart-angular-calendar.mjs.map +1 -1
- package/lib/components/smart-calendar/smart-calendar.component.d.ts +11 -2
- package/lib/components/week/week.component.d.ts +34 -0
- package/lib/smart-angular-calendar.module.d.ts +3 -2
- package/package.json +1 -1
|
@@ -9,6 +9,7 @@ import { TranslateMonthPipe } from './pipes/translate-month.pipe';
|
|
|
9
9
|
import { MonthSelectorComponent } from './components/month-selector/month-selector.component';
|
|
10
10
|
import { DayComponent } from './components/day/day.component';
|
|
11
11
|
import { DurationEventComponent } from './components/duration-event/duration-event.component';
|
|
12
|
+
import { WeekComponent } from './components/week/week.component';
|
|
12
13
|
import * as i0 from "@angular/core";
|
|
13
14
|
export class SmartAngularCalendarModule {
|
|
14
15
|
}
|
|
@@ -21,7 +22,8 @@ SmartAngularCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
|
|
|
21
22
|
TranslateMonthPipe,
|
|
22
23
|
MonthSelectorComponent,
|
|
23
24
|
DayComponent,
|
|
24
|
-
DurationEventComponent
|
|
25
|
+
DurationEventComponent,
|
|
26
|
+
WeekComponent], imports: [CommonModule], exports: [SmartCalendarComponent] });
|
|
25
27
|
SmartAngularCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule, imports: [CommonModule] });
|
|
26
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule, decorators: [{
|
|
27
29
|
type: NgModule,
|
|
@@ -35,7 +37,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
35
37
|
TranslateMonthPipe,
|
|
36
38
|
MonthSelectorComponent,
|
|
37
39
|
DayComponent,
|
|
38
|
-
DurationEventComponent
|
|
40
|
+
DurationEventComponent,
|
|
41
|
+
WeekComponent
|
|
39
42
|
],
|
|
40
43
|
imports: [
|
|
41
44
|
CommonModule
|
|
@@ -45,4 +48,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
45
48
|
]
|
|
46
49
|
}]
|
|
47
50
|
}] });
|
|
48
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
51
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic21hcnQtYW5ndWxhci1jYWxlbmRhci5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9zbWFydC1hbmd1bGFyLWNhbGVuZGFyL3NyYy9saWIvc21hcnQtYW5ndWxhci1jYWxlbmRhci5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sc0RBQXNELENBQUM7QUFDOUYsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDN0UsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHNEQUFzRCxDQUFDO0FBQzlGLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDREQUE0RCxDQUFDO0FBQ3RHLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHNEQUFzRCxDQUFDO0FBQzlGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUM5RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxzREFBc0QsQ0FBQztBQUM5RixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7O0FBc0JqRSxNQUFNLE9BQU8sMEJBQTBCOzt1SEFBMUIsMEJBQTBCO3dIQUExQiwwQkFBMEIsaUJBbEJuQyxzQkFBc0I7UUFDdEIsaUJBQWlCO1FBQ2pCLGFBQWE7UUFDYixzQkFBc0I7UUFDdEIsd0JBQXdCO1FBQ3hCLGtCQUFrQjtRQUNsQixzQkFBc0I7UUFDdEIsWUFBWTtRQUNaLHNCQUFzQjtRQUN0QixhQUFhLGFBR2IsWUFBWSxhQUdaLHNCQUFzQjt3SEFHYiwwQkFBMEIsWUFObkMsWUFBWTsyRkFNSCwwQkFBMEI7a0JBcEJ0QyxRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWixzQkFBc0I7d0JBQ3RCLGlCQUFpQjt3QkFDakIsYUFBYTt3QkFDYixzQkFBc0I7d0JBQ3RCLHdCQUF3Qjt3QkFDeEIsa0JBQWtCO3dCQUNsQixzQkFBc0I7d0JBQ3RCLFlBQVk7d0JBQ1osc0JBQXNCO3dCQUN0QixhQUFhO3FCQUNkO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3FCQUNiO29CQUNELE9BQU8sRUFBRTt3QkFDUCxzQkFBc0I7cUJBQ3ZCO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgU21hcnRDYWxlbmRhckNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9zbWFydC1jYWxlbmRhci9zbWFydC1jYWxlbmRhci5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBDYWxlbmRhckNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9jYWxlbmRhci9jYWxlbmRhci5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBUcmFuc2xhdGVQaXBlIH0gZnJvbSAnLi9waXBlcy90cmFuc2xhdGUucGlwZSc7XHJcbmltcG9ydCB7IENhbGVuZGFyRXZlbnRDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvY2FsZW5kYXItZXZlbnQvY2FsZW5kYXItZXZlbnQuY29tcG9uZW50JztcbmltcG9ydCB7IE1vcmVFdmVudHNNb2RhbENvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9tb3JlLWV2ZW50cy1tb2RhbC9tb3JlLWV2ZW50cy1tb2RhbC5jb21wb25lbnQnO1xuaW1wb3J0IHsgVHJhbnNsYXRlTW9udGhQaXBlIH0gZnJvbSAnLi9waXBlcy90cmFuc2xhdGUtbW9udGgucGlwZSc7XG5pbXBvcnQgeyBNb250aFNlbGVjdG9yQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL21vbnRoLXNlbGVjdG9yL21vbnRoLXNlbGVjdG9yLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEYXlDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvZGF5L2RheS5jb21wb25lbnQnO1xuaW1wb3J0IHsgRHVyYXRpb25FdmVudENvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9kdXJhdGlvbi1ldmVudC9kdXJhdGlvbi1ldmVudC5jb21wb25lbnQnO1xuaW1wb3J0IHsgV2Vla0NvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy93ZWVrL3dlZWsuY29tcG9uZW50JztcclxuXHJcbkBOZ01vZHVsZSh7XHJcbiAgZGVjbGFyYXRpb25zOiBbXHJcbiAgICBTbWFydENhbGVuZGFyQ29tcG9uZW50LFxyXG4gICAgQ2FsZW5kYXJDb21wb25lbnQsXHJcbiAgICBUcmFuc2xhdGVQaXBlLFxyXG4gICAgQ2FsZW5kYXJFdmVudENvbXBvbmVudCxcclxuICAgIE1vcmVFdmVudHNNb2RhbENvbXBvbmVudCxcclxuICAgIFRyYW5zbGF0ZU1vbnRoUGlwZSxcclxuICAgIE1vbnRoU2VsZWN0b3JDb21wb25lbnQsXHJcbiAgICBEYXlDb21wb25lbnQsXHJcbiAgICBEdXJhdGlvbkV2ZW50Q29tcG9uZW50LFxyXG4gICAgV2Vla0NvbXBvbmVudFxyXG4gIF0sXHJcbiAgaW1wb3J0czogW1xyXG4gICAgQ29tbW9uTW9kdWxlXHJcbiAgXSxcclxuICBleHBvcnRzOiBbXHJcbiAgICBTbWFydENhbGVuZGFyQ29tcG9uZW50XHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgU21hcnRBbmd1bGFyQ2FsZW5kYXJNb2R1bGUgeyB9XHJcbiJdfQ==
|
|
@@ -593,9 +593,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
593
593
|
type: Output
|
|
594
594
|
}] } });
|
|
595
595
|
|
|
596
|
+
class WeekComponent {
|
|
597
|
+
constructor() {
|
|
598
|
+
this.startAt = 'sunday';
|
|
599
|
+
this.events = [];
|
|
600
|
+
this.eventClick = new EventEmitter();
|
|
601
|
+
this.weekDays = [
|
|
602
|
+
{ tag: 'sun' },
|
|
603
|
+
{ tag: 'mon' },
|
|
604
|
+
{ tag: 'tue' },
|
|
605
|
+
{ tag: 'wed' },
|
|
606
|
+
{ tag: 'thu' },
|
|
607
|
+
{ tag: 'fri' },
|
|
608
|
+
{ tag: 'sat' },
|
|
609
|
+
];
|
|
610
|
+
this.hourBlocks = Array.from({ length: 24 }, (_, i) => i);
|
|
611
|
+
this.allDayHeight = 60;
|
|
612
|
+
this.weekDayCols = [];
|
|
613
|
+
this.resizing = false;
|
|
614
|
+
this.startY = 0;
|
|
615
|
+
this.startHeight = 0;
|
|
616
|
+
this.onResizeMouseMove = (event) => {
|
|
617
|
+
if (!this.resizing)
|
|
618
|
+
return;
|
|
619
|
+
const delta = event.clientY - this.startY;
|
|
620
|
+
const newHeight = this.startHeight + delta;
|
|
621
|
+
this.allDayHeight = Math.max(60, newHeight); // mínimo 80px
|
|
622
|
+
};
|
|
623
|
+
this.onResizeMouseUp = () => {
|
|
624
|
+
this.resizing = false;
|
|
625
|
+
document.removeEventListener('mousemove', this.onResizeMouseMove);
|
|
626
|
+
document.removeEventListener('mouseup', this.onResizeMouseUp);
|
|
627
|
+
};
|
|
628
|
+
}
|
|
629
|
+
ngOnInit() {
|
|
630
|
+
if (this.startAt === 'monday') {
|
|
631
|
+
this.weekDays = [
|
|
632
|
+
{ tag: 'mon' },
|
|
633
|
+
{ tag: 'tue' },
|
|
634
|
+
{ tag: 'wed' },
|
|
635
|
+
{ tag: 'thu' },
|
|
636
|
+
{ tag: 'fri' },
|
|
637
|
+
{ tag: 'sat' },
|
|
638
|
+
{ tag: 'sun' },
|
|
639
|
+
];
|
|
640
|
+
}
|
|
641
|
+
this.initWeekDayCols();
|
|
642
|
+
}
|
|
643
|
+
initWeekDayCols() {
|
|
644
|
+
this.weekDayCols = [];
|
|
645
|
+
for (let i = 0; i < 7; i++) {
|
|
646
|
+
const currentDate = new Date(this.startDate.getTime() + i * 24 * 60 * 60 * 1000);
|
|
647
|
+
this.weekDayCols.push({
|
|
648
|
+
date: currentDate,
|
|
649
|
+
eventCols: [],
|
|
650
|
+
allDayEvents: []
|
|
651
|
+
});
|
|
652
|
+
}
|
|
653
|
+
this.events.forEach(event => this.addEvent(event));
|
|
654
|
+
}
|
|
655
|
+
addEvent(event) {
|
|
656
|
+
const index = this.weekDayCols.findIndex(col => col.date.getFullYear() === event.start.getFullYear() &&
|
|
657
|
+
col.date.getMonth() === event.start.getMonth() &&
|
|
658
|
+
col.date.getDate() === event.start.getDate());
|
|
659
|
+
if (index === -1)
|
|
660
|
+
return;
|
|
661
|
+
const eventCols = this.weekDayCols[index].eventCols;
|
|
662
|
+
if (event.allDay) {
|
|
663
|
+
this.weekDayCols[index].allDayEvents.push(event);
|
|
664
|
+
}
|
|
665
|
+
else {
|
|
666
|
+
const colIndex = this.findAvalailableColumn(event, index);
|
|
667
|
+
if (colIndex === eventCols.length) {
|
|
668
|
+
eventCols.push({ events: [event] });
|
|
669
|
+
}
|
|
670
|
+
else {
|
|
671
|
+
eventCols[colIndex].events.push(event);
|
|
672
|
+
}
|
|
673
|
+
}
|
|
674
|
+
}
|
|
675
|
+
findAvalailableColumn(event, dayIndex) {
|
|
676
|
+
const eventCols = this.weekDayCols[dayIndex].eventCols;
|
|
677
|
+
for (let colIndex = 0; colIndex < eventCols.length; colIndex++) {
|
|
678
|
+
const col = eventCols[colIndex];
|
|
679
|
+
// conflict if event overlaps with any existing event in the column
|
|
680
|
+
const hasConflict = col.events.some(existingEvent => {
|
|
681
|
+
const startsDuringExisting = event.start < existingEvent.end && event.start >= existingEvent.start;
|
|
682
|
+
const endsDuringExisting = event.end > existingEvent.start && event.end <= existingEvent.end;
|
|
683
|
+
const spansExisting = event.start <= existingEvent.start && event.end >= existingEvent.end;
|
|
684
|
+
return startsDuringExisting || endsDuringExisting || spansExisting;
|
|
685
|
+
});
|
|
686
|
+
if (!hasConflict) {
|
|
687
|
+
return colIndex;
|
|
688
|
+
}
|
|
689
|
+
}
|
|
690
|
+
return eventCols.length;
|
|
691
|
+
}
|
|
692
|
+
ngOnChanges(changes) {
|
|
693
|
+
if (changes['events'] || changes['startDate']) {
|
|
694
|
+
this.initWeekDayCols();
|
|
695
|
+
}
|
|
696
|
+
}
|
|
697
|
+
onResizeMouseDown(event) {
|
|
698
|
+
this.resizing = true;
|
|
699
|
+
this.startY = event.clientY;
|
|
700
|
+
this.startHeight = this.allDayHeight;
|
|
701
|
+
document.addEventListener('mousemove', this.onResizeMouseMove);
|
|
702
|
+
document.addEventListener('mouseup', this.onResizeMouseUp);
|
|
703
|
+
}
|
|
704
|
+
onEventClick(event) {
|
|
705
|
+
this.eventClick.emit(event);
|
|
706
|
+
}
|
|
707
|
+
}
|
|
708
|
+
WeekComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WeekComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
709
|
+
WeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WeekComponent, selector: "lib-week", inputs: { startAt: "startAt", events: "events", startDate: "startDate" }, outputs: { eventClick: "eventClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"week-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols; let i = index\">\n <div class=\"week-day\">\n {{ weekDays[i].tag | translate | slice:0:3 }}\n </div>\n\n <lib-calendar-event *ngFor=\"let event of day.allDayEvents\" [event]=\"event\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"day-block\" *ngFor=\"let day of weekDayCols\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols\"\n [style.gridTemplateColumns]=\"'repeat(' + day.eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of day.eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"day.date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.week-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow-y:scroll}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .days-container{display:grid;grid-template-columns:repeat(7,1fr);height:100%;padding-left:45px}section.all-day-events .events-container{display:flex;flex-direction:column;gap:1px;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{position:sticky;top:0;left:0;z-index:2;width:100%;font-size:12px;text-align:center;-webkit-user-select:none;user-select:none}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(7,1fr)}section.duration-events .events-wrapper .time-blocks .day-block{display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.12)}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .days-container{display:grid;grid-template-columns:repeat(7,1fr);column-gap:1px}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event"], outputs: ["eventClick"] }, { kind: "component", type: DurationEventComponent, selector: "lib-duration-event", inputs: ["event", "date"], outputs: ["eventClick"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WeekComponent, decorators: [{
|
|
711
|
+
type: Component,
|
|
712
|
+
args: [{ selector: 'lib-week', template: "<div class=\"week-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols; let i = index\">\n <div class=\"week-day\">\n {{ weekDays[i].tag | translate | slice:0:3 }}\n </div>\n\n <lib-calendar-event *ngFor=\"let event of day.allDayEvents\" [event]=\"event\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"day-block\" *ngFor=\"let day of weekDayCols\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols\"\n [style.gridTemplateColumns]=\"'repeat(' + day.eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of day.eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"day.date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.week-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow-y:scroll}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .days-container{display:grid;grid-template-columns:repeat(7,1fr);height:100%;padding-left:45px}section.all-day-events .events-container{display:flex;flex-direction:column;gap:1px;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{position:sticky;top:0;left:0;z-index:2;width:100%;font-size:12px;text-align:center;-webkit-user-select:none;user-select:none}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(7,1fr)}section.duration-events .events-wrapper .time-blocks .day-block{display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.12)}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .days-container{display:grid;grid-template-columns:repeat(7,1fr);column-gap:1px}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"] }]
|
|
713
|
+
}], ctorParameters: function () { return []; }, propDecorators: { startAt: [{
|
|
714
|
+
type: Input
|
|
715
|
+
}], events: [{
|
|
716
|
+
type: Input
|
|
717
|
+
}], startDate: [{
|
|
718
|
+
type: Input
|
|
719
|
+
}], eventClick: [{
|
|
720
|
+
type: Output
|
|
721
|
+
}] } });
|
|
722
|
+
|
|
596
723
|
class SmartCalendarComponent {
|
|
597
724
|
constructor() {
|
|
598
725
|
this.mode = 'month';
|
|
726
|
+
this.startAt = 'sunday';
|
|
599
727
|
this.currentMonth = {
|
|
600
728
|
year: new Date().getFullYear(),
|
|
601
729
|
month: new Date().getMonth() + 1
|
|
@@ -607,6 +735,9 @@ class SmartCalendarComponent {
|
|
|
607
735
|
this.showDateSelector = false;
|
|
608
736
|
this.selectedDate = new Date();
|
|
609
737
|
this.selectedDateEvents = [];
|
|
738
|
+
this.weekStartDate = new Date();
|
|
739
|
+
this.weekEndDate = new Date(this.weekStartDate.getTime() + 6 * 24 * 60 * 60 * 1000);
|
|
740
|
+
this.weekEvents = [];
|
|
610
741
|
}
|
|
611
742
|
onDocumentClick(event) {
|
|
612
743
|
var _a;
|
|
@@ -677,24 +808,25 @@ class SmartCalendarComponent {
|
|
|
677
808
|
oldMonth
|
|
678
809
|
});
|
|
679
810
|
}
|
|
680
|
-
|
|
681
|
-
const today = new Date();
|
|
811
|
+
nextDay() {
|
|
682
812
|
const oldMonth = Object.assign({}, this.currentMonth);
|
|
813
|
+
const newDate = new Date(this.selectedDate);
|
|
814
|
+
newDate.setDate(newDate.getDate() + 1);
|
|
815
|
+
this.selectDate(newDate);
|
|
683
816
|
this.currentMonth = {
|
|
684
|
-
year:
|
|
685
|
-
month:
|
|
817
|
+
year: newDate.getFullYear(),
|
|
818
|
+
month: newDate.getMonth() + 1
|
|
686
819
|
};
|
|
687
|
-
this.selectDate(today);
|
|
688
820
|
if (this.currentMonth.month !== oldMonth.month || this.currentMonth.year !== oldMonth.year)
|
|
689
821
|
this.monthChange.emit({
|
|
690
822
|
newMonth: this.currentMonth,
|
|
691
823
|
oldMonth
|
|
692
824
|
});
|
|
693
825
|
}
|
|
694
|
-
|
|
826
|
+
prevDay() {
|
|
695
827
|
const oldMonth = Object.assign({}, this.currentMonth);
|
|
696
828
|
const newDate = new Date(this.selectedDate);
|
|
697
|
-
newDate.setDate(newDate.getDate()
|
|
829
|
+
newDate.setDate(newDate.getDate() - 1);
|
|
698
830
|
this.selectDate(newDate);
|
|
699
831
|
this.currentMonth = {
|
|
700
832
|
year: newDate.getFullYear(),
|
|
@@ -706,11 +838,26 @@ class SmartCalendarComponent {
|
|
|
706
838
|
oldMonth
|
|
707
839
|
});
|
|
708
840
|
}
|
|
709
|
-
|
|
841
|
+
nextWeek() {
|
|
710
842
|
const oldMonth = Object.assign({}, this.currentMonth);
|
|
711
|
-
const newDate = new Date(this.
|
|
712
|
-
newDate.setDate(newDate.getDate()
|
|
713
|
-
this.
|
|
843
|
+
const newDate = new Date(this.weekStartDate);
|
|
844
|
+
newDate.setDate(newDate.getDate() + 7);
|
|
845
|
+
this.selectWeekByDate(newDate);
|
|
846
|
+
this.currentMonth = {
|
|
847
|
+
year: newDate.getFullYear(),
|
|
848
|
+
month: newDate.getMonth() + 1
|
|
849
|
+
};
|
|
850
|
+
if (this.currentMonth.month !== oldMonth.month || this.currentMonth.year !== oldMonth.year)
|
|
851
|
+
this.monthChange.emit({
|
|
852
|
+
newMonth: this.currentMonth,
|
|
853
|
+
oldMonth
|
|
854
|
+
});
|
|
855
|
+
}
|
|
856
|
+
prevWeek() {
|
|
857
|
+
const oldMonth = Object.assign({}, this.currentMonth);
|
|
858
|
+
const newDate = new Date(this.weekStartDate);
|
|
859
|
+
newDate.setDate(newDate.getDate() - 7);
|
|
860
|
+
this.selectWeekByDate(newDate);
|
|
714
861
|
this.currentMonth = {
|
|
715
862
|
year: newDate.getFullYear(),
|
|
716
863
|
month: newDate.getMonth() + 1
|
|
@@ -724,29 +871,51 @@ class SmartCalendarComponent {
|
|
|
724
871
|
onNext() {
|
|
725
872
|
if (this.mode === 'month')
|
|
726
873
|
this.nextMonth();
|
|
874
|
+
else if (this.mode === 'week')
|
|
875
|
+
this.nextWeek();
|
|
727
876
|
else if (this.mode === 'day')
|
|
728
877
|
this.nextDay();
|
|
729
878
|
}
|
|
730
879
|
onPrev() {
|
|
731
880
|
if (this.mode === 'month')
|
|
732
881
|
this.prevMonth();
|
|
882
|
+
else if (this.mode === 'week')
|
|
883
|
+
this.prevWeek();
|
|
733
884
|
else if (this.mode === 'day')
|
|
734
885
|
this.prevDay();
|
|
735
886
|
}
|
|
736
|
-
|
|
737
|
-
|
|
887
|
+
goToToday() {
|
|
888
|
+
const today = new Date();
|
|
889
|
+
const oldMonth = Object.assign({}, this.currentMonth);
|
|
890
|
+
this.currentMonth = {
|
|
891
|
+
year: today.getFullYear(),
|
|
892
|
+
month: today.getMonth() + 1
|
|
893
|
+
};
|
|
894
|
+
this.selectDate(today);
|
|
895
|
+
this.selectWeekByDate(today);
|
|
896
|
+
if (this.currentMonth.month !== oldMonth.month || this.currentMonth.year !== oldMonth.year)
|
|
897
|
+
this.monthChange.emit({
|
|
898
|
+
newMonth: this.currentMonth,
|
|
899
|
+
oldMonth
|
|
900
|
+
});
|
|
901
|
+
}
|
|
902
|
+
setSelectedDateEvents() {
|
|
738
903
|
this.selectedDateEvents = this.events.filter(event => {
|
|
739
904
|
const eventDate = new Date(event.start);
|
|
740
905
|
// return events that starts, ends or spans the selected date
|
|
741
|
-
return (eventDate.getDate() ===
|
|
742
|
-
eventDate.getMonth() ===
|
|
743
|
-
eventDate.getFullYear() ===
|
|
906
|
+
return (eventDate.getDate() === this.selectedDate.getDate() &&
|
|
907
|
+
eventDate.getMonth() === this.selectedDate.getMonth() &&
|
|
908
|
+
eventDate.getFullYear() === this.selectedDate.getFullYear()) ||
|
|
744
909
|
(event.end &&
|
|
745
|
-
event.end.getDate() ===
|
|
746
|
-
event.end.getMonth() ===
|
|
747
|
-
event.end.getFullYear() ===
|
|
748
|
-
(event.start <
|
|
910
|
+
event.end.getDate() === this.selectedDate.getDate() &&
|
|
911
|
+
event.end.getMonth() === this.selectedDate.getMonth() &&
|
|
912
|
+
event.end.getFullYear() === this.selectedDate.getFullYear()) ||
|
|
913
|
+
(event.start < this.selectedDate && event.end && event.end > this.selectedDate);
|
|
749
914
|
});
|
|
915
|
+
}
|
|
916
|
+
selectDate(date) {
|
|
917
|
+
this.selectedDate = date;
|
|
918
|
+
this.setSelectedDateEvents();
|
|
750
919
|
const oldMonth = this.currentMonth;
|
|
751
920
|
this.currentMonth = {
|
|
752
921
|
year: date.getFullYear(),
|
|
@@ -759,14 +928,56 @@ class SmartCalendarComponent {
|
|
|
759
928
|
});
|
|
760
929
|
this.dateChanged.emit(this.selectedDate);
|
|
761
930
|
}
|
|
931
|
+
selectWeekByDate(date) {
|
|
932
|
+
// Calculate the start date of the week based on startAt
|
|
933
|
+
const dayOfWeek = date.getDay(); // 0 (Sun) to 6 (Sat)
|
|
934
|
+
let diffToStart;
|
|
935
|
+
if (this.startAt === 'monday') {
|
|
936
|
+
diffToStart = (dayOfWeek === 0) ? -6 : 1 - dayOfWeek; // If Sunday, go back 6 days
|
|
937
|
+
}
|
|
938
|
+
else {
|
|
939
|
+
diffToStart = -dayOfWeek; // Sunday start
|
|
940
|
+
}
|
|
941
|
+
this.weekStartDate = new Date(date);
|
|
942
|
+
this.weekStartDate.setDate(date.getDate() + diffToStart);
|
|
943
|
+
this.weekEndDate = new Date(this.weekStartDate);
|
|
944
|
+
this.weekEndDate.setDate(this.weekStartDate.getDate() + 6);
|
|
945
|
+
// Filter events for the week
|
|
946
|
+
this.weekEvents = this.events.filter(event => {
|
|
947
|
+
const eventStart = new Date(event.start);
|
|
948
|
+
const eventEnd = event.end ? new Date(event.end) : eventStart;
|
|
949
|
+
return (eventStart <= this.weekEndDate) && (eventEnd >= this.weekStartDate);
|
|
950
|
+
});
|
|
951
|
+
const oldMonth = this.currentMonth;
|
|
952
|
+
this.currentMonth = {
|
|
953
|
+
year: this.weekStartDate.getFullYear(),
|
|
954
|
+
month: this.weekStartDate.getMonth() + 1
|
|
955
|
+
};
|
|
956
|
+
if (this.currentMonth.month !== oldMonth.month || this.currentMonth.year !== oldMonth.year)
|
|
957
|
+
this.monthChange.emit({
|
|
958
|
+
newMonth: this.currentMonth,
|
|
959
|
+
oldMonth
|
|
960
|
+
});
|
|
961
|
+
}
|
|
962
|
+
setMode(newMode) {
|
|
963
|
+
this.mode = newMode;
|
|
964
|
+
if (newMode === 'day') {
|
|
965
|
+
this.setSelectedDateEvents();
|
|
966
|
+
}
|
|
967
|
+
else if (newMode === 'week') {
|
|
968
|
+
this.selectWeekByDate(this.selectedDate);
|
|
969
|
+
}
|
|
970
|
+
}
|
|
762
971
|
}
|
|
763
972
|
SmartCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
764
|
-
SmartCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartCalendarComponent, selector: "smart-calendar", inputs: { mode: "mode", currentMonth: "currentMonth", events: "events" }, outputs: { monthChange: "monthChange", dateChanged: "dateChanged", eventClick: "eventClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dateSelectorDropdown", first: true, predicate: ["dateSelectorDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\n <button class=\"btn-prev\" (click)=\"onPrev()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n </svg>\n </button>\n\n <button class=\"btn-today\" (click)=\"goToToday()\">{{'today' | translate}}</button>\n\n <button class=\"btn-next\" (click)=\"onNext()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n </svg>\n </button>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"date-selector-container\">\n <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\n <span *ngIf=\"mode === 'month'\">{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\n <span *ngIf=\"mode === 'day'\">{{ selectedDate.toDateString() }}</span>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\" />\n </svg>\n </button>\n\n <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\n <lib-month-selector [selectedMonth]=\"currentMonth\"\n (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\n </div>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"view-selector\">\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'month'}\" (click)=\"
|
|
973
|
+
SmartCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartCalendarComponent, selector: "smart-calendar", inputs: { mode: "mode", startAt: "startAt", currentMonth: "currentMonth", events: "events" }, outputs: { monthChange: "monthChange", dateChanged: "dateChanged", eventClick: "eventClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dateSelectorDropdown", first: true, predicate: ["dateSelectorDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\n <button class=\"btn-prev\" (click)=\"onPrev()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n </svg>\n </button>\n\n <button class=\"btn-today\" (click)=\"goToToday()\">{{'today' | translate}}</button>\n\n <button class=\"btn-next\" (click)=\"onNext()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n </svg>\n </button>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"date-selector-container\">\n <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\n <span *ngIf=\"mode === 'month'\">{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\n <span *ngIf=\"mode === 'week'\">\n {{ weekStartDate.toDateString() }} - {{ weekEndDate.toDateString() }}\n </span>\n <span *ngIf=\"mode === 'day'\">{{ selectedDate.toDateString() }}</span>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\" />\n </svg>\n </button>\n\n <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\n <lib-month-selector [selectedMonth]=\"currentMonth\"\n (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\n </div>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"view-selector\">\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'month'}\" (click)=\"setMode('month')\">\n <!-- month view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'week'}\" (click)=\"setMode('week')\">\n <!-- week view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'day'}\" (click)=\"setMode('day')\">\n <!-- day view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M120-160v-80h720v80H120Zm0-560v-80h720v80H120Zm80 400q-33 0-56.5-23.5T120-400v-160q0-33 23.5-56.5T200-640h560q33 0 56.5 23.5T840-560v160q0 33-23.5 56.5T760-320H200Zm0-80h560v-160H200v160Zm0-160v160-160Z\" />\n </svg>\n </button>\n </div>\n </div>\n\n <div class=\"view-container\">\n <lib-calendar [events]=\"events\" [currentMonth]=\"currentMonth\" *ngIf=\"mode === 'month'\" [startAt]=\"startAt\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\"\n [events]=\"weekEvents\"></lib-week>\n\n <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\"\n (eventClick)=\"onEventClick($event)\"></lib-day>\n </div>\n\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.smart-calendar-component{display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff}.header{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:2px 16px}.header .spacer{flex:1 1 auto}.header .nav-controls{display:flex;align-items:center}.header .nav-controls .btn-prev,.header .nav-controls .btn-next{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:50%;cursor:pointer;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-prev:hover,.header .nav-controls .btn-next:hover{background-color:#eee}.header .nav-controls .btn-today{display:flex;align-items:center;height:30px;padding:0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-today:hover{background-color:#eee}.header .view-selector{display:flex;align-items:center}.header .view-selector .btn-view{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #cccccc;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}.header .view-selector .btn-view:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;border-right:none}.header .view-selector .btn-view:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-left:none}.header .view-selector .btn-view:hover{background-color:#eee}.header .view-selector .btn-view svg{width:22px;height:22px}.header .view-selector .btn-view.active{background-color:#0000001a}.header .date-selector-container{position:relative}.header .date-selector-container .date-selector-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#fff;border-radius:4px;box-shadow:0 2px 24px #0000004d;z-index:3}.header .date-selector-container .date-selector-dropdown:before{content:\"\";position:absolute;top:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background-color:#fff;border-radius:2px}.header .btn-date-selector{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .btn-date-selector:hover{background-color:#eee}.view-container{flex:1 1 auto;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarComponent, selector: "lib-calendar", inputs: ["currentMonth", "events", "startAt"], outputs: ["eventClick"] }, { kind: "component", type: MonthSelectorComponent, selector: "lib-month-selector", inputs: ["selectedMonth"], outputs: ["monthSelected"] }, { kind: "component", type: DayComponent, selector: "lib-day", inputs: ["events", "date"], outputs: ["eventClick"] }, { kind: "component", type: WeekComponent, selector: "lib-week", inputs: ["startAt", "events", "startDate"], outputs: ["eventClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TranslateMonthPipe, name: "translateMonth" }] });
|
|
765
974
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, decorators: [{
|
|
766
975
|
type: Component,
|
|
767
|
-
args: [{ selector: 'smart-calendar', template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\n <button class=\"btn-prev\" (click)=\"onPrev()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n </svg>\n </button>\n\n <button class=\"btn-today\" (click)=\"goToToday()\">{{'today' | translate}}</button>\n\n <button class=\"btn-next\" (click)=\"onNext()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n </svg>\n </button>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"date-selector-container\">\n <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\n <span *ngIf=\"mode === 'month'\">{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\n <span *ngIf=\"mode === 'day'\">{{ selectedDate.toDateString() }}</span>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\" />\n </svg>\n </button>\n\n <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\n <lib-month-selector [selectedMonth]=\"currentMonth\"\n (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\n </div>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"view-selector\">\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'month'}\" (click)=\"
|
|
976
|
+
args: [{ selector: 'smart-calendar', template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\n <button class=\"btn-prev\" (click)=\"onPrev()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n </svg>\n </button>\n\n <button class=\"btn-today\" (click)=\"goToToday()\">{{'today' | translate}}</button>\n\n <button class=\"btn-next\" (click)=\"onNext()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n </svg>\n </button>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"date-selector-container\">\n <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\n <span *ngIf=\"mode === 'month'\">{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\n <span *ngIf=\"mode === 'week'\">\n {{ weekStartDate.toDateString() }} - {{ weekEndDate.toDateString() }}\n </span>\n <span *ngIf=\"mode === 'day'\">{{ selectedDate.toDateString() }}</span>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\" />\n </svg>\n </button>\n\n <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\n <lib-month-selector [selectedMonth]=\"currentMonth\"\n (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\n </div>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"view-selector\">\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'month'}\" (click)=\"setMode('month')\">\n <!-- month view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'week'}\" (click)=\"setMode('week')\">\n <!-- week view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'day'}\" (click)=\"setMode('day')\">\n <!-- day view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M120-160v-80h720v80H120Zm0-560v-80h720v80H120Zm80 400q-33 0-56.5-23.5T120-400v-160q0-33 23.5-56.5T200-640h560q33 0 56.5 23.5T840-560v160q0 33-23.5 56.5T760-320H200Zm0-80h560v-160H200v160Zm0-160v160-160Z\" />\n </svg>\n </button>\n </div>\n </div>\n\n <div class=\"view-container\">\n <lib-calendar [events]=\"events\" [currentMonth]=\"currentMonth\" *ngIf=\"mode === 'month'\" [startAt]=\"startAt\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\"\n [events]=\"weekEvents\"></lib-week>\n\n <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\"\n (eventClick)=\"onEventClick($event)\"></lib-day>\n </div>\n\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.smart-calendar-component{display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff}.header{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:2px 16px}.header .spacer{flex:1 1 auto}.header .nav-controls{display:flex;align-items:center}.header .nav-controls .btn-prev,.header .nav-controls .btn-next{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:50%;cursor:pointer;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-prev:hover,.header .nav-controls .btn-next:hover{background-color:#eee}.header .nav-controls .btn-today{display:flex;align-items:center;height:30px;padding:0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-today:hover{background-color:#eee}.header .view-selector{display:flex;align-items:center}.header .view-selector .btn-view{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #cccccc;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}.header .view-selector .btn-view:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;border-right:none}.header .view-selector .btn-view:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-left:none}.header .view-selector .btn-view:hover{background-color:#eee}.header .view-selector .btn-view svg{width:22px;height:22px}.header .view-selector .btn-view.active{background-color:#0000001a}.header .date-selector-container{position:relative}.header .date-selector-container .date-selector-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#fff;border-radius:4px;box-shadow:0 2px 24px #0000004d;z-index:3}.header .date-selector-container .date-selector-dropdown:before{content:\"\";position:absolute;top:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background-color:#fff;border-radius:2px}.header .btn-date-selector{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .btn-date-selector:hover{background-color:#eee}.view-container{flex:1 1 auto;overflow:hidden}\n"] }]
|
|
768
977
|
}], ctorParameters: function () { return []; }, propDecorators: { mode: [{
|
|
769
978
|
type: Input
|
|
979
|
+
}], startAt: [{
|
|
980
|
+
type: Input
|
|
770
981
|
}], currentMonth: [{
|
|
771
982
|
type: Input
|
|
772
983
|
}], events: [{
|
|
@@ -796,7 +1007,8 @@ SmartAngularCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
|
|
|
796
1007
|
TranslateMonthPipe,
|
|
797
1008
|
MonthSelectorComponent,
|
|
798
1009
|
DayComponent,
|
|
799
|
-
DurationEventComponent
|
|
1010
|
+
DurationEventComponent,
|
|
1011
|
+
WeekComponent], imports: [CommonModule], exports: [SmartCalendarComponent] });
|
|
800
1012
|
SmartAngularCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule, imports: [CommonModule] });
|
|
801
1013
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule, decorators: [{
|
|
802
1014
|
type: NgModule,
|
|
@@ -810,7 +1022,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
810
1022
|
TranslateMonthPipe,
|
|
811
1023
|
MonthSelectorComponent,
|
|
812
1024
|
DayComponent,
|
|
813
|
-
DurationEventComponent
|
|
1025
|
+
DurationEventComponent,
|
|
1026
|
+
WeekComponent
|
|
814
1027
|
],
|
|
815
1028
|
imports: [
|
|
816
1029
|
CommonModule
|