Skip to content

feat: added generics to Calendar Panels (CalendarExtendedDay) #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 2, 2023
Merged

feat: added generics to Calendar Panels (CalendarExtendedDay) #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 49 additions & 37 deletions ...-workspace/src/app/content/showcase-calendar-panels/showcase-calendar-panels.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { CalendarEvent, CalendarPanels } from 'projects/ng-mat-components/src/public-api';
import { CalendarEvent, CalendarExtendedDay, CalendarPanels, CalendarPanelsConfig } from 'projects/ng-mat-components/src/public-api';

interface CustomTestObj {
id: number;
name: string;
}

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

dataSource: CalendarPanels = {
config: {
renderMode: 'monthly', // 'annual' | 'monthly'
selectMode: 'range', // 'click' | 'range'
displayYear: true,
firstDayOfWeekMonday: true,
calendarWeek: true,
switches: true,
panelWidth: '300px',
bluredDays: false, // default: false
markWeekend: true, // default: true
calendarConfig: CalendarPanelsConfig = {
renderMode: 'monthly', // 'annual' | 'monthly'
selectMode: 'range', // 'click' | 'range'
displayYear: true,
firstDayOfWeekMonday: true,
calendarWeek: true,
switches: true,
panelWidth: '300px',
bluredDays: false, // default: false
markWeekend: true, // default: true
};

calendarData: CalendarExtendedDay<CustomTestObj>[] = [
{
date: new Date(this.today.getFullYear(), this.today.getMonth(), 3),
colors: {
backgroundColor: '#0167c7',
},
toolTip: 'Test ToolTip First',
},
data: [
{
date: new Date(this.today.getFullYear(), this.today.getMonth(), 3),
colors: {
backgroundColor: '#0167c7',
},
toolTip: 'Test ToolTip First',
{
date: new Date(this.today.getFullYear(), this.today.getMonth(), 3),
colors: {
backgroundColor: 'rgb(6, 182, 0)',
},
{
date: new Date(this.today.getFullYear(), this.today.getMonth(), 3),
colors: {
backgroundColor: 'rgb(6, 182, 0)',
},
toolTip: 'Test ToolTip Second',
toolTip: 'Test ToolTip Second',
},
{
date: new Date(this.today.getFullYear(), this.today.getMonth(), 13),
colors: {
backgroundColor: 'rgb(6, 182, 0)',
},
{
date: new Date(this.today.getFullYear(), this.today.getMonth(), 12),
colors: {
backgroundColor: 'rgb(6, 182, 0)',
},
toolTip: 'Test ToolTip 2',
toolTip: 'Test ToolTip 2',
customData: {
id: 1,
name: 'test',
},
{
date: new Date(this.today.getFullYear(), this.today.getMonth(), 25),
colors: {
backgroundColor: 'lightblue',
},
},
{
date: new Date(this.today.getFullYear(), this.today.getMonth(), 25),
colors: {
backgroundColor: 'lightblue',
},
],
},
];
dataSource: CalendarPanels<CustomTestObj> = {
config: this.calendarConfig,
data: this.calendarData,
};

constructor() {}
Expand Down
53 changes: 31 additions & 22 deletions projects/ng-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { FsCalendarService } from '../services/fs-calendar.service';
},
})
export class FsCalendarPanelsComponent implements OnInit {
private _dataSource: CalendarPanels = {
private _dataSource: CalendarPanels<any> = {
config: {
renderMode: 'monthly',
selectMode: 'click',
Expand All @@ -34,17 +34,17 @@ export class FsCalendarPanelsComponent implements OnInit {

calendar: CalendarPanelSum | undefined;
today = new Date();
selectedDayStart: Date | undefined;
selectedDayBetween: Date[] = [];
selectedDayEnd: Date | undefined;
selectedDayStart: CalendarExtendedDay<any> | undefined;
selectedDayBetween: CalendarExtendedDay<any>[] = [];
selectedDayEnd: CalendarExtendedDay<any> | undefined;
markWeekend = this._dataSource.config.markWeekend;
bluredDays = this._dataSource.config.bluredDays;
isLoading = true;
monthOverrride = false;

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

get dataSource(): CalendarPanels {
get dataSource(): CalendarPanels<any> {
return this._dataSource;
}
get month(): number {
Expand All @@ -61,7 +61,7 @@ export class FsCalendarPanelsComponent implements OnInit {
}

@Input()
set dataSource(data: CalendarPanels) {
set dataSource(data: CalendarPanels<any>) {
this._dataSource = data;
this.generateCal();
}
Expand Down Expand Up @@ -105,25 +105,34 @@ export class FsCalendarPanelsComponent implements OnInit {
this.isLoading = false;
}

onClick(day: CalendarExtendedDay, type: string) {
onClick(day: CalendarExtendedDay<any>, type: string) {
if (type === 'date' && this._dataSource.config.selectMode === 'range') {
if (this.selectedDayStart != undefined && this.selectedDayEnd != undefined) {
this.selectedDayBetween = [];
this.selectedDayStart = undefined;
this.selectedDayEnd = undefined;
}
if (dateFns.isBefore(day.date, this.selectedDayStart as Date) || this.selectedDayStart === undefined) {
this.selectedDayStart = day.date;
if (dateFns.isBefore(day.date, this.selectedDayStart?.date as Date) || this.selectedDayStart === undefined) {
this.selectedDayStart = day;
} else {
this.selectedDayEnd = day.date;
this.selectedDayEnd = day;

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

daysAffected.push(this.selectedDayStart);
if (daysBetween < 0) {
console.log(this.dataSource.data);
for (let index = 1; index < daysBetween * -1 + 1; index++) {
daysAffected.push(dateFns.addDays(this.selectedDayStart, index));
let newGeneratedDay = this.calendarService.generateDay(dateFns.addDays(this.selectedDayStart.date, index), []);
let i = this.dataSource.data.findIndex(sd => dateFns.isSameDay(sd.date, newGeneratedDay.date));
console.log('index:', i, newGeneratedDay.date);
if (i != -1) {
console.log('found one match');
daysAffected.push(this.dataSource.data[i]);
} else {
daysAffected.push(newGeneratedDay);
}
}
}

Expand All @@ -137,7 +146,7 @@ export class FsCalendarPanelsComponent implements OnInit {
} else {
this.selection.emit({
type: 'click',
date: day.date,
date: day,
});
}
}
Expand All @@ -146,15 +155,15 @@ export class FsCalendarPanelsComponent implements OnInit {
if (this.calendar != undefined) {
if (this.selectedDayStart != undefined && this.selectedDayEnd == undefined) {
this.selectedDayBetween = this.calendar.daysAbsolute.filter(date => {
return dateFns.isAfter(date, this.selectedDayStart as Date) && dateFns.isBefore(date, dateComp);
return dateFns.isAfter(date.date, this.selectedDayStart?.date as Date) && dateFns.isBefore(date.date, dateComp);
});
}
}
}

getAmIBetween(date: Date): boolean {
const fIndex = this.selectedDayBetween.findIndex(selDate => {
return dateFns.isSameDay(selDate, date);
return dateFns.isSameDay(selDate.date, date);
});
if (fIndex != -1) {
return true;
Expand All @@ -165,17 +174,17 @@ export class FsCalendarPanelsComponent implements OnInit {

isSelectedDayStart(date: Date): boolean {
if (this.selectedDayStart) {
return dateFns.isSameDay(this.selectedDayStart, date);
return dateFns.isSameDay(this.selectedDayStart.date, date);
} else {
return false;
}
}
isSelectedDayEnd(date: Date): boolean {
if (this.selectedDayEnd) {
return dateFns.isSameDay(this.selectedDayEnd, date);
return dateFns.isSameDay(this.selectedDayEnd.date, date);
} else {
if (this.selectedDayBetween.length > 0) {
if (dateFns.isSameDay(dateFns.addDays(this.selectedDayBetween[this.selectedDayBetween.length - 1], 1), date)) {
if (dateFns.isSameDay(this.calendarService.addDays(this.selectedDayBetween[this.selectedDayBetween.length - 1], 1).date, date)) {
return true;
}
}
Expand All @@ -190,9 +199,9 @@ export class FsCalendarPanelsComponent implements OnInit {
getCanIBeHighlighted(date: Date) {
if (this.selectedDayEnd) {
if (
(!dateFns.isSameDay(this.selectedDayStart as Date, date) && !dateFns.isSameDay(this.selectedDayEnd, date) && this.getAmIBetween(date)) ||
(dateFns.isSameDay(this.selectedDayEnd, date) && this.selectedDayEnd != undefined) ||
(dateFns.isSameDay(this.selectedDayStart as Date, date) && this.selectedDayStart != undefined)
(!dateFns.isSameDay(this.selectedDayStart?.date as Date, date) && !dateFns.isSameDay(this.selectedDayEnd?.date, date) && this.getAmIBetween(date)) ||
(dateFns.isSameDay(this.selectedDayEnd?.date, date) && this.selectedDayEnd != undefined) ||
(dateFns.isSameDay(this.selectedDayStart?.date as Date, date) && this.selectedDayStart != undefined)
) {
return true;
} else {
Expand Down
40 changes: 22 additions & 18 deletions projects/ng-mat-components/src/fs-calendar/calendar.models.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export interface CalendarPanelSum {
year: number;
dayNames: String[];
daysAbsolute: Date[];
daysAbsolute: CalendarExtendedDay[];
calendarPanels: CalendarPanel[];
}

Expand All @@ -26,23 +26,23 @@ export interface CalendarMonth {
* @param {string} start first day of selected range
* @param {string} end last day of selected range
*/
export interface CalendarSelectedRange {
export interface CalendarSelectedRange<T = void> {
type: 'range';
start: Date;
end: Date;
affectedDays: Date[];
start: CalendarExtendedDay<T>;
end: CalendarExtendedDay<T>;
affectedDays: CalendarExtendedDay<T>[];
}

/**
* selectedDate for Calendar Panels
* @param {string} type type of event, in this case 'click'
* @param {string} date selected date
*/
export interface CalendarSelectedDate {
export interface CalendarSelectedDate<T = void> {
type: 'click';
date: Date;
date: CalendarExtendedDay<T>;
}
export type CalendarEvent = CalendarSelectedRange | CalendarSelectedDate;
export type CalendarEvent<T = void> = CalendarSelectedRange<T> | CalendarSelectedDate<T>;

export interface DayX {
dayNumber: string;
Expand All @@ -64,9 +64,9 @@ export interface DayX {
* @param {string} config configurate your calendar panels
* @param {string} data set custom days CalendarExtendedDay[]
*/
export interface CalendarPanels {
export interface CalendarPanels<T = void> {
config: CalendarPanelsConfig;
data: CalendarExtendedDay[];
data: CalendarExtendedDay<T>[];
}

/**
Expand Down Expand Up @@ -125,7 +125,7 @@ export interface CalendarTableEntry {
* @param {string} badge.badgeIcon if badgeMode == 'icon', set Icon (Material-Icons)
* @param {Object} _meta can be ignored
*/
export interface CalendarExtendedDay {
export interface CalendarExtendedDay<T = void> {
date: Date;
char?: string;
colors?: {
Expand All @@ -138,11 +138,15 @@ export interface CalendarExtendedDay {
badgeInt?: number;
badgeIcon?: string;
};
_meta?: {
kw: number;
type: 'cw' | 'plHolder' | 'day';
dayNumber: string;
dayOfWeek: number;
isWeekendDay: boolean;
};
_meta?: CalendarExtendedDayMeta;
customData?: T;
}

export type CalendarExtendedDayMetaType = 'cw' | 'plHolder' | 'day';
export interface CalendarExtendedDayMeta {
kw: number;
type: CalendarExtendedDayMetaType;
dayNumber: string;
dayOfWeek: number;
isWeekendDay: boolean;
}
Loading