Skip to content

Commit 747460f

Browse files
eksrhaeksrha
authored
feat: added generics to Calendar Panels (CalendarExtendedDay) (#47)
1 parent eacce90 commit 747460f

File tree

4 files changed

+151
-129
lines changed

4 files changed

+151
-129
lines changed

‎projects/lib-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.ts‎

Lines changed: 49 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { Component, OnInit } from '@angular/core';
2-
import { CalendarEvent, CalendarPanels } from 'projects/ng-mat-components/src/public-api';
2+
import { CalendarEvent, CalendarExtendedDay, CalendarPanels, CalendarPanelsConfig } from 'projects/ng-mat-components/src/public-api';
3+
4+
interface CustomTestObj {
5+
id: number;
6+
name: string;
7+
}
38

49
@Component({
510
selector: 'app-showcase-calendar-panels',
@@ -26,47 +31,54 @@ export class ShowcaseCalendarPanelsComponent implements OnInit {
2631
// monthsBefore = new FormControl(1);
2732
// monthsAfter = new FormControl(1);
2833

29-
dataSource: CalendarPanels = {
30-
config: {
31-
renderMode: 'monthly', // 'annual' | 'monthly'
32-
selectMode: 'range', // 'click' | 'range'
33-
displayYear: true,
34-
firstDayOfWeekMonday: true,
35-
calendarWeek: true,
36-
switches: true,
37-
panelWidth: '300px',
38-
bluredDays: false, // default: false
39-
markWeekend: true, // default: true
34+
calendarConfig: CalendarPanelsConfig = {
35+
renderMode: 'monthly', // 'annual' | 'monthly'
36+
selectMode: 'range', // 'click' | 'range'
37+
displayYear: true,
38+
firstDayOfWeekMonday: true,
39+
calendarWeek: true,
40+
switches: true,
41+
panelWidth: '300px',
42+
bluredDays: false, // default: false
43+
markWeekend: true, // default: true
44+
};
45+
46+
calendarData: CalendarExtendedDay<CustomTestObj>[] = [
47+
{
48+
date: new Date(this.today.getFullYear(), this.today.getMonth(), 3),
49+
colors: {
50+
backgroundColor: '#0167c7',
51+
},
52+
toolTip: 'Test ToolTip First',
4053
},
41-
data: [
42-
{
43-
date: new Date(this.today.getFullYear(), this.today.getMonth(), 3),
44-
colors: {
45-
backgroundColor: '#0167c7',
46-
},
47-
toolTip: 'Test ToolTip First',
54+
{
55+
date: new Date(this.today.getFullYear(), this.today.getMonth(), 3),
56+
colors: {
57+
backgroundColor: 'rgb(6, 182, 0)',
4858
},
49-
{
50-
date: new Date(this.today.getFullYear(), this.today.getMonth(), 3),
51-
colors: {
52-
backgroundColor: 'rgb(6, 182, 0)',
53-
},
54-
toolTip: 'Test ToolTip Second',
59+
toolTip: 'Test ToolTip Second',
60+
},
61+
{
62+
date: new Date(this.today.getFullYear(), this.today.getMonth(), 13),
63+
colors: {
64+
backgroundColor: 'rgb(6, 182, 0)',
5565
},
56-
{
57-
date: new Date(this.today.getFullYear(), this.today.getMonth(), 12),
58-
colors: {
59-
backgroundColor: 'rgb(6, 182, 0)',
60-
},
61-
toolTip: 'Test ToolTip 2',
66+
toolTip: 'Test ToolTip 2',
67+
customData: {
68+
id: 1,
69+
name: 'test',
6270
},
63-
{
64-
date: new Date(this.today.getFullYear(), this.today.getMonth(), 25),
65-
colors: {
66-
backgroundColor: 'lightblue',
67-
},
71+
},
72+
{
73+
date: new Date(this.today.getFullYear(), this.today.getMonth(), 25),
74+
colors: {
75+
backgroundColor: 'lightblue',
6876
},
69-
],
77+
},
78+
];
79+
dataSource: CalendarPanels<CustomTestObj> = {
80+
config: this.calendarConfig,
81+
data: this.calendarData,
7082
};
7183

7284
constructor() {}

‎projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { FsCalendarService } from '../services/fs-calendar.service';
1212
},
1313
})
1414
export class FsCalendarPanelsComponent implements OnInit {
15-
private _dataSource: CalendarPanels = {
15+
private _dataSource: CalendarPanels<any> = {
1616
config: {
1717
renderMode: 'monthly',
1818
selectMode: 'click',
@@ -34,17 +34,17 @@ export class FsCalendarPanelsComponent implements OnInit {
3434

3535
calendar: CalendarPanelSum | undefined;
3636
today = new Date();
37-
selectedDayStart: Date | undefined;
38-
selectedDayBetween: Date[] = [];
39-
selectedDayEnd: Date | undefined;
37+
selectedDayStart: CalendarExtendedDay<any> | undefined;
38+
selectedDayBetween: CalendarExtendedDay<any>[] = [];
39+
selectedDayEnd: CalendarExtendedDay<any> | undefined;
4040
markWeekend = this._dataSource.config.markWeekend;
4141
bluredDays = this._dataSource.config.bluredDays;
4242
isLoading = true;
4343
monthOverrride = false;
4444

4545
weekendColor = 'rgba(0, 0, 0, .25)';
4646

47-
get dataSource(): CalendarPanels {
47+
get dataSource(): CalendarPanels<any> {
4848
return this._dataSource;
4949
}
5050
get month(): number {
@@ -61,7 +61,7 @@ export class FsCalendarPanelsComponent implements OnInit {
6161
}
6262

6363
@Input()
64-
set dataSource(data: CalendarPanels) {
64+
set dataSource(data: CalendarPanels<any>) {
6565
this._dataSource = data;
6666
this.generateCal();
6767
}
@@ -105,25 +105,34 @@ export class FsCalendarPanelsComponent implements OnInit {
105105
this.isLoading = false;
106106
}
107107

108-
onClick(day: CalendarExtendedDay, type: string) {
108+
onClick(day: CalendarExtendedDay<any>, type: string) {
109109
if (type === 'date' && this._dataSource.config.selectMode === 'range') {
110110
if (this.selectedDayStart != undefined && this.selectedDayEnd != undefined) {
111111
this.selectedDayBetween = [];
112112
this.selectedDayStart = undefined;
113113
this.selectedDayEnd = undefined;
114114
}
115-
if (dateFns.isBefore(day.date, this.selectedDayStart as Date) || this.selectedDayStart === undefined) {
116-
this.selectedDayStart = day.date;
115+
if (dateFns.isBefore(day.date, this.selectedDayStart?.date as Date) || this.selectedDayStart === undefined) {
116+
this.selectedDayStart = day;
117117
} else {
118-
this.selectedDayEnd = day.date;
118+
this.selectedDayEnd = day;
119119

120-
let daysBetween: number = dateFns.differenceInDays(this.selectedDayStart, this.selectedDayEnd);
121-
let daysAffected: Date[] = [];
120+
let daysBetween: number = dateFns.differenceInDays(this.selectedDayStart.date, this.selectedDayEnd.date);
121+
let daysAffected: CalendarExtendedDay<any>[] = [];
122122

123123
daysAffected.push(this.selectedDayStart);
124124
if (daysBetween < 0) {
125+
console.log(this.dataSource.data);
125126
for (let index = 1; index < daysBetween * -1 + 1; index++) {
126-
daysAffected.push(dateFns.addDays(this.selectedDayStart, index));
127+
let newGeneratedDay = this.calendarService.generateDay(dateFns.addDays(this.selectedDayStart.date, index), []);
128+
let i = this.dataSource.data.findIndex(sd => dateFns.isSameDay(sd.date, newGeneratedDay.date));
129+
console.log('index:', i, newGeneratedDay.date);
130+
if (i != -1) {
131+
console.log('found one match');
132+
daysAffected.push(this.dataSource.data[i]);
133+
} else {
134+
daysAffected.push(newGeneratedDay);
135+
}
127136
}
128137
}
129138

@@ -137,7 +146,7 @@ export class FsCalendarPanelsComponent implements OnInit {
137146
} else {
138147
this.selection.emit({
139148
type: 'click',
140-
date: day.date,
149+
date: day,
141150
});
142151
}
143152
}
@@ -146,15 +155,15 @@ export class FsCalendarPanelsComponent implements OnInit {
146155
if (this.calendar != undefined) {
147156
if (this.selectedDayStart != undefined && this.selectedDayEnd == undefined) {
148157
this.selectedDayBetween = this.calendar.daysAbsolute.filter(date => {
149-
return dateFns.isAfter(date, this.selectedDayStart as Date) && dateFns.isBefore(date, dateComp);
158+
return dateFns.isAfter(date.date, this.selectedDayStart?.date as Date) && dateFns.isBefore(date.date, dateComp);
150159
});
151160
}
152161
}
153162
}
154163

155164
getAmIBetween(date: Date): boolean {
156165
const fIndex = this.selectedDayBetween.findIndex(selDate => {
157-
return dateFns.isSameDay(selDate, date);
166+
return dateFns.isSameDay(selDate.date, date);
158167
});
159168
if (fIndex != -1) {
160169
return true;
@@ -165,17 +174,17 @@ export class FsCalendarPanelsComponent implements OnInit {
165174

166175
isSelectedDayStart(date: Date): boolean {
167176
if (this.selectedDayStart) {
168-
return dateFns.isSameDay(this.selectedDayStart, date);
177+
return dateFns.isSameDay(this.selectedDayStart.date, date);
169178
} else {
170179
return false;
171180
}
172181
}
173182
isSelectedDayEnd(date: Date): boolean {
174183
if (this.selectedDayEnd) {
175-
return dateFns.isSameDay(this.selectedDayEnd, date);
184+
return dateFns.isSameDay(this.selectedDayEnd.date, date);
176185
} else {
177186
if (this.selectedDayBetween.length > 0) {
178-
if (dateFns.isSameDay(dateFns.addDays(this.selectedDayBetween[this.selectedDayBetween.length - 1], 1), date)) {
187+
if (dateFns.isSameDay(this.calendarService.addDays(this.selectedDayBetween[this.selectedDayBetween.length - 1], 1).date, date)) {
179188
return true;
180189
}
181190
}
@@ -190,9 +199,9 @@ export class FsCalendarPanelsComponent implements OnInit {
190199
getCanIBeHighlighted(date: Date) {
191200
if (this.selectedDayEnd) {
192201
if (
193-
(!dateFns.isSameDay(this.selectedDayStart as Date, date) && !dateFns.isSameDay(this.selectedDayEnd, date) && this.getAmIBetween(date)) ||
194-
(dateFns.isSameDay(this.selectedDayEnd, date) && this.selectedDayEnd != undefined) ||
195-
(dateFns.isSameDay(this.selectedDayStart as Date, date) && this.selectedDayStart != undefined)
202+
(!dateFns.isSameDay(this.selectedDayStart?.date as Date, date) && !dateFns.isSameDay(this.selectedDayEnd?.date, date) && this.getAmIBetween(date)) ||
203+
(dateFns.isSameDay(this.selectedDayEnd?.date, date) && this.selectedDayEnd != undefined) ||
204+
(dateFns.isSameDay(this.selectedDayStart?.date as Date, date) && this.selectedDayStart != undefined)
196205
) {
197206
return true;
198207
} else {

‎projects/ng-mat-components/src/fs-calendar/calendar.models.ts‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export interface CalendarPanelSum {
22
year: number;
33
dayNames: String[];
4-
daysAbsolute: Date[];
4+
daysAbsolute: CalendarExtendedDay[];
55
calendarPanels: CalendarPanel[];
66
}
77

@@ -26,23 +26,23 @@ export interface CalendarMonth {
2626
* @param {string} start first day of selected range
2727
* @param {string} end last day of selected range
2828
*/
29-
export interface CalendarSelectedRange {
29+
export interface CalendarSelectedRange<T = void> {
3030
type: 'range';
31-
start: Date;
32-
end: Date;
33-
affectedDays: Date[];
31+
start: CalendarExtendedDay<T>;
32+
end: CalendarExtendedDay<T>;
33+
affectedDays: CalendarExtendedDay<T>[];
3434
}
3535

3636
/**
3737
* selectedDate for Calendar Panels
3838
* @param {string} type type of event, in this case 'click'
3939
* @param {string} date selected date
4040
*/
41-
export interface CalendarSelectedDate {
41+
export interface CalendarSelectedDate<T = void> {
4242
type: 'click';
43-
date: Date;
43+
date: CalendarExtendedDay<T>;
4444
}
45-
export type CalendarEvent = CalendarSelectedRange | CalendarSelectedDate;
45+
export type CalendarEvent<T = void> = CalendarSelectedRange<T> | CalendarSelectedDate<T>;
4646

4747
export interface DayX {
4848
dayNumber: string;
@@ -64,9 +64,9 @@ export interface DayX {
6464
* @param {string} config configurate your calendar panels
6565
* @param {string} data set custom days CalendarExtendedDay[]
6666
*/
67-
export interface CalendarPanels {
67+
export interface CalendarPanels<T = void> {
6868
config: CalendarPanelsConfig;
69-
data: CalendarExtendedDay[];
69+
data: CalendarExtendedDay<T>[];
7070
}
7171

7272
/**
@@ -125,7 +125,7 @@ export interface CalendarTableEntry {
125125
* @param {string} badge.badgeIcon if badgeMode == 'icon', set Icon (Material-Icons)
126126
* @param {Object} _meta can be ignored
127127
*/
128-
export interface CalendarExtendedDay {
128+
export interface CalendarExtendedDay<T = void> {
129129
date: Date;
130130
char?: string;
131131
colors?: {
@@ -138,11 +138,15 @@ export interface CalendarExtendedDay {
138138
badgeInt?: number;
139139
badgeIcon?: string;
140140
};
141-
_meta?: {
142-
kw: number;
143-
type: 'cw' | 'plHolder' | 'day';
144-
dayNumber: string;
145-
dayOfWeek: number;
146-
isWeekendDay: boolean;
147-
};
141+
_meta?: CalendarExtendedDayMeta;
142+
customData?: T;
143+
}
144+
145+
export type CalendarExtendedDayMetaType = 'cw' | 'plHolder' | 'day';
146+
export interface CalendarExtendedDayMeta {
147+
kw: number;
148+
type: CalendarExtendedDayMetaType;
149+
dayNumber: string;
150+
dayOfWeek: number;
151+
isWeekendDay: boolean;
148152
}

0 commit comments

Comments
 (0)