Skip to content
This repository was archived by the owner on Mar 4, 2023. It is now read-only.

Commit e7a4938

Browse files
author
evombau
committed
add calender-panel <- single and bug fixes
1 parent 785d2ec commit e7a4938

16 files changed

+464
-91
lines changed

‎projects/material-calendar/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "material-calendar",
3-
"version": "0.0.7",
3+
"version": "0.0.8",
44
"license": "MIT",
55
"peerDependencies": {
66
"@angular/common": "^9.1.9",
@@ -17,16 +17,16 @@
1717
},
1818
"repository": {
1919
"type": "git",
20-
"url": "git+https://gitlab.e-netsupport.de/e-netsupport/material-calendar.git"
20+
"url": "https://github.com/E-NetSupport/material-calendar.git"
2121
},
22-
"homepage": "https://gitlab.e-netsupport.de/e-netsupport/material-calendar.git",
22+
"homepage": "https://github.com/E-NetSupport/material-calendar",
2323
"description": "CLI tool for Angular",
2424
"engines": {
2525
"node": ">= 10.13.0",
2626
"npm": ">= 6.11.0",
2727
"yarn": ">= 1.13.0"
2828
},
2929
"bugs": {
30-
"url": "https://gitlab.e-netsupport.de/e-netsupport/material-calendar/issues"
30+
"url": "https://github.com/E-NetSupport/material-calendar/issues"
3131
}
3232
}

‎projects/material-calendar/src/lib/calendar-panel/calendar-panel.component.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<div class="month mat-elevation-z8" *ngFor="let monat of calendar.months">
2+
<mat-grid-list cols="{{config.calendarWeek? 8 : 7}}" rowHeight="1:1">
3+
<mat-grid-tile colspan="{{config.calendarWeek? 8 : 7}}" rowspan="1">
4+
<button mat-icon-button (click)="onMonthBackward()">
5+
<span class="material-icons">
6+
keyboard_arrow_left
7+
</span>
8+
</button>
9+
10+
<h3 class="displayMonthName" *ngIf="!config.displayYear">{{monat.name}}</h3>
11+
<h3 class="displayMonthName" *ngIf="config.displayYear">{{monat.name}} {{monat.year}}</h3>
12+
13+
<button mat-icon-button (click)="onMonthForward()">
14+
<span class="material-icons">
15+
keyboard_arrow_right
16+
</span>
17+
</button>
18+
</mat-grid-tile>
19+
<mat-grid-tile *ngIf="config.calendarWeek" colspan="1" rowspan="1"></mat-grid-tile>
20+
<mat-grid-tile class="weekdayPlaceholder" *ngFor="let dayNames of calendar.dayNames" colspan="1" rowspan="1">
21+
{{dayNames}}
22+
</mat-grid-tile>
23+
24+
<ng-container *ngFor="let day of monat.render">
25+
<mat-grid-tile *ngIf="day.type === 'kw'" colspan="1" rowspan="1" class="KW">
26+
{{day.kw}}
27+
</mat-grid-tile>
28+
29+
<mat-grid-tile *ngIf="day.type === 'placeholderDay'" colspan="1" rowspan="1" class="date"
30+
[ngClass]="[day.isWeekendDay? 'Weekend' : '', placeholderDay ? 'weekdayPlaceholder':'placeholderFalse', day.isHoliday && config.useHolidays? 'Holiday' : '']">
31+
<a>{{day.day}}</a>
32+
</mat-grid-tile>
33+
34+
<mat-grid-tile *ngIf="day.type === 'date'" colspan="1" rowspan="1" matTooltip="test" class="date"
35+
[ngClass]="[day.isWeekendDay? 'Weekend' : '', day.isHoliday && config.useHolidays ? 'Holiday' : '']">
36+
<div [ngClass]="day.date.setHours(0, 0, 0, 0) == today? 'today': ''">
37+
<a>{{day.day}}</a>
38+
</div>
39+
</mat-grid-tile>
40+
41+
</ng-container>
42+
43+
</mat-grid-list>
44+
</div>

‎projects/material-calendar/src/lib/calendar-panel/calendar-panel.component.scss‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
2+
@import "../service/style.scss";
3+
4+
.month {
5+
background-color: var(--panel-color);
6+
display: flex;
7+
margin: 6px;
8+
padding: 13px;
9+
border-radius: 5px;
10+
}
11+
12+
.displayMonthName {
13+
width: 100%;
14+
}
15+
16+
mat-grid-list {
17+
display: block;
18+
width: 100%;
19+
}
20+
21+
mat-grid-tile {
22+
text-align: center;
23+
color: var(--text-color);
24+
}
25+
26+
.date {
27+
border-radius: 4px;
28+
}
29+
30+
.today {
31+
box-sizing: border-box;
32+
width: 100%;
33+
height: 100%;
34+
border: 2px solid var(--today-color);
35+
border-radius: 5px;
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
}
40+
41+
.Weekend {
42+
background-color: var(--panel-color-darker);
43+
}
44+
45+
.Holiday {
46+
background-color: var(--panel-color-holiday);
47+
color: var(--text-color-holiday);
48+
}
49+
50+
.KW {
51+
color: var(--text-color);
52+
border-right: 1px solid var(--text-color);
53+
opacity: 0.4;
54+
}
55+
56+
.weekdayPlaceholder {
57+
color: var(--text-color);
58+
opacity: 0.6;
59+
}
60+
.placeholderFalse {
61+
background: none;
62+
}
63+
.placeholderFalse a {
64+
display: none;
65+
}
66+
67+
.slideButton {
68+
padding: 0;
69+
}
70+
71+
.slideButton span {
72+
font-size: 60px;
73+
}

‎projects/material-calendar/src/lib/calendar-panel/calendar-panel.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { CalendarPanelComponent } from './calendar-panel.component';
4+
5+
describe('CalendarPanelComponent', () => {
6+
let component: CalendarPanelComponent;
7+
let fixture: ComponentFixture<CalendarPanelComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [CalendarPanelComponent]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(CalendarPanelComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎projects/material-calendar/src/lib/calendar-panel/calendar-panel.component.ts‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import { Component, OnInit, HostBinding, Input, Output } from '@angular/core';
2+
import { CalendarService } from '../service/calendar.service';
3+
import * as pSBC from '../service/pSBC';
4+
import { CalendarConfig } from '../service/models';
5+
import { SharedFunctions } from '../service/shared-functions';
6+
7+
@Component({
8+
selector: 'calendar-panel',
9+
templateUrl: './calendar-panel.component.html',
10+
styleUrls: ['./calendar-panel.component.scss']
11+
})
12+
export class CalendarPanelComponent implements OnInit {
13+
14+
private _config: CalendarConfig = {
15+
panelBgColor: '#00677f', // 00677f 006105
16+
autoTextColor: true,
17+
textColor: '#fff',
18+
useHolidays: false,
19+
holidayColor: 'rgb(253, 173, 0)',
20+
holidayTextColor: 'rgb(253, 173, 0)',
21+
displayYear: true,
22+
firstDayOfWeekMonday: true,
23+
todayColor: '#fff',
24+
panelWidth: '100%',
25+
calendarWeek: true,
26+
switches: false,
27+
};
28+
private _data = null;
29+
private _month = new Date().getUTCMonth();
30+
private _year: number = new Date().getFullYear()
31+
32+
calendar = null
33+
today = new Date().setHours(0, 0, 0, 0)
34+
35+
get config(): CalendarConfig {
36+
return this._config;
37+
}
38+
get dataSource(): any {
39+
return this._data;
40+
}
41+
get month(): number {
42+
return this._month;
43+
}
44+
get year(): number {
45+
return this._year;
46+
}
47+
48+
@Input()
49+
set dataSource(data: any) {
50+
this._data = data;
51+
this.generateX()
52+
}
53+
@Input()
54+
set month(data: number) {
55+
this._month = data;
56+
this.monthOverrride = false
57+
this.generateX()
58+
}
59+
@Input()
60+
set config(data: CalendarConfig) {
61+
this._config = data;
62+
console.log(data)
63+
this.generateX()
64+
}
65+
@Input()
66+
set year(data: number) {
67+
this._year = data;
68+
this.generateX()
69+
}
70+
@Input() placeholderDay: boolean = false;
71+
72+
isLoading = true
73+
monthOverrride = false
74+
75+
// Styling
76+
@HostBinding("style.--panel-color")
77+
panelBgColor;
78+
@HostBinding("style.--panel-color-darker")
79+
panelBgColorDarker;
80+
@HostBinding("style.--panel-color-lighter")
81+
panelBgColorLighter;
82+
@HostBinding("style.--text-color")
83+
panelColor;
84+
@HostBinding("style.--panel-color-holiday")
85+
panelBgColorHoliday;
86+
@HostBinding("style.--text-color-holiday")
87+
panelColorHoliday;
88+
@HostBinding("style.--today-color")
89+
todayColor;
90+
panelWidth = '100%';
91+
92+
constructor(private calendarService: CalendarService,
93+
private sharedFunctions: SharedFunctions) { }
94+
95+
ngOnInit() {
96+
this.isLoading = false
97+
}
98+
99+
onMonthForward() {
100+
this.monthOverrride = true
101+
if (this.month >= 11 || this._month >= 11) {
102+
this._year = parseInt(this.year.toString(), 10) + 1
103+
this._month = 0
104+
} else {
105+
this._month = parseInt(this._month.toString(), 10) + 1
106+
}
107+
this.generateX()
108+
}
109+
110+
onMonthBackward() {
111+
this.monthOverrride = true
112+
if (this.month <= 0 || this._month <= 0) {
113+
this._year = parseInt(this.year.toString(), 10) - 1
114+
this._month = 11
115+
} else {
116+
this._month = parseInt(this._month.toString(), 10) - 1
117+
}
118+
this.generateX()
119+
}
120+
121+
setCssVars() {
122+
this.panelBgColor = this.config.panelBgColor;
123+
this.panelBgColorDarker = pSBC.pSBC(-0.4, this.panelBgColor);
124+
this.panelBgColorLighter = pSBC.pSBC(0.3, this.sharedFunctions.lightOrDarkTextColor(this.panelBgColor));
125+
this.panelBgColorHoliday = this.config.holidayColor;
126+
this.todayColor = this.config.todayColor;
127+
this.panelWidth = '100%';
128+
129+
if (this.config.autoTextColor) {
130+
this.panelColor = this.sharedFunctions.lightOrDarkTextColor(this.panelBgColor);
131+
this.panelColorHoliday = this.sharedFunctions.lightOrDarkTextColor(this.config.holidayColor);
132+
} else {
133+
this.panelColor = this.config.textColor;
134+
this.panelColorHoliday = this.config.holidayTextColor;
135+
}
136+
137+
if (this.config.panelWidth != '' || this.config.panelWidth != null || this.config.panelWidth != undefined) {
138+
this.panelWidth = this.config.panelWidth;
139+
} else {
140+
this.panelWidth = '100%';
141+
}
142+
}
143+
144+
generateX() {
145+
this.setCssVars()
146+
const usedYear = this.monthOverrride ? this._year : this.year
147+
const usedMonth = this.monthOverrride ? this._month : this.month
148+
this.calendar = this.calendarService.generateMatrix('monthly', this.config.calendarWeek, null, usedYear, usedMonth, 0, 0)
149+
}
150+
151+
}

‎projects/material-calendar/src/lib/calendar-panels/calendar-panels.component.html‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
keyboard_arrow_left
77
</span>
88
</button>
9-
<div class="month mat-elevation-z8" *ngFor="let monat of calendar.months">
10-
<mat-grid-list cols="{{config.calendarWeek? 8 : 7}}" rowHeight="30px">
9+
<div class="month mat-elevation-z8" *ngFor="let monat of calendar.months" [style.width]="panelWidth">
10+
<mat-grid-list cols="{{config.calendarWeek? 8 : 7}}" rowHeight="1:1">
1111
<mat-grid-tile colspan="{{config.calendarWeek? 8 : 7}}" rowspan="1">
1212
<button mat-icon-button
1313
*ngIf="config.switches && mode == 'monthly' && (monthsBefore == 0 && monthsAfter == 0)"
@@ -16,12 +16,10 @@
1616
keyboard_arrow_left
1717
</span>
1818
</button>
19-
<span style="flex: 1 1 auto;"></span>
20-
<div>
21-
<a>{{monat.name}}</a>
22-
<a style="margin-left: 5px;" *ngIf="config.displayYear">{{monat.year}}</a>
23-
</div>
24-
<span style="flex: 1 1 auto;"></span>
19+
20+
<h3 class="displayMonthName" *ngIf="!config.displayYear">{{monat.name}}</h3>
21+
<h3 class="displayMonthName" *ngIf="config.displayYear">{{monat.name}} {{monat.year}}</h3>
22+
2523
<button mat-icon-button
2624
*ngIf="config.switches && mode == 'monthly' && (monthsBefore == 0 && monthsAfter == 0)"
2725
(click)="onMonthForward()">
@@ -41,16 +39,16 @@
4139
{{day.kw}}
4240
</mat-grid-tile>
4341

44-
<mat-grid-tile *ngIf="day.type === 'leer'" colspan="1" rowspan="1"></mat-grid-tile>
45-
46-
<mat-grid-tile *ngIf="day.type === 'placeholderDay'" colspan="1" rowspan="1"
42+
<mat-grid-tile *ngIf="day.type === 'placeholderDay'" colspan="1" rowspan="1" class="date"
4743
[ngClass]="[day.isWeekendDay? 'Weekend' : '', placeholderDay ? 'weekdayPlaceholder':'placeholderFalse', day.isHoliday && config.useHolidays? 'Holiday' : '']">
4844
<a>{{day.day}}</a>
4945
</mat-grid-tile>
5046

51-
<mat-grid-tile *ngIf="day.type === 'date'" colspan="1" rowspan="1" matTooltip="test"
52-
[ngClass]="[day.isWeekendDay? 'Weekend' : '', day.isHoliday && config.useHolidays ? 'Holiday' : '', day.date.setHours(0, 0, 0, 0) == today? 'today': '']">
53-
{{day.day}}
47+
<mat-grid-tile *ngIf="day.type === 'date'" colspan="1" rowspan="1" matTooltip="test" class="date"
48+
[ngClass]="[day.isWeekendDay? 'Weekend' : '', day.isHoliday && config.useHolidays ? 'Holiday' : '']">
49+
<div [ngClass]="day.date.setHours(0, 0, 0, 0) == today? 'today': ''">
50+
<a>{{day.day}}</a>
51+
</div>
5452
</mat-grid-tile>
5553

5654
</ng-container>

0 commit comments

Comments
 (0)