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

Commit 21000b9

Browse files
eksrhaeksrha
committed
added theaming
1 parent 8af2a8b commit 21000b9

File tree

6 files changed

+253
-215
lines changed

6 files changed

+253
-215
lines changed

‎projects/lib-workspace/src/styles.scss‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
body {
2-
margin: 0;
3-
}
4-
51
@import '~@angular/material/theming';
62
@include mat-core();
73

4+
.test{
5+
color: steelblue;
6+
}
87
$mat-primary-scheme: (
98
100: #c5cae9,
109
500: #3f51b5,
@@ -30,11 +29,25 @@ $mat-accent-palette: mat-palette($mat-accent-scheme);
3029

3130
$app-light-theme: mat-light-theme($mat-primary-palette, $mat-accent-palette);
3231

32+
@import "../../material-calendar/src/lib/calendar-theme.scss";
33+
@include calendar-theme($app-light-theme);
34+
3335
@include angular-material-theme($app-light-theme);
3436

3537
// following section is for dark mode.
3638
// use appropriate class name for darkMode
3739
$app-dark-theme: mat-dark-theme($mat-primary-palette, $mat-accent-palette);
3840
.darkMode {
3941
@include angular-material-theme($app-dark-theme);
42+
@include calendar-theme($app-dark-theme);
43+
}
44+
45+
46+
html,
47+
body {
48+
height: 100%;
49+
}
50+
body {
51+
margin: 0;
52+
font-family: Roboto, "Helvetica Neue", sans-serif;
4053
}

‎projects/material-calendar/src/lib/calendar-panels/calendar-panels.component-theme.scss‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

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

Lines changed: 105 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,75 @@
11
<div class="mdc-helper">
2-
<ng-container *ngFor="let month of calendar.months, let iMonth = index">
3-
<div class="mdc-month mat-elevation-z4">
4-
<div class="month-header">
5-
<button mat-icon-button (click)="onMonthBackward()"
6-
*ngIf="config.switches && config.renderMode != 'annual' && iMonth == 0; else elseAfterBackward">
7-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px">
8-
<path d="M0 0h24v24H0V0z" fill="none" />
9-
<path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" />
10-
</svg>
11-
</button>
12-
<ng-template #elseAfterBackward>
13-
<div style="width: 40px;"> </div>
14-
</ng-template>
15-
<div>{{month.name | uppercase}} {{config.displayYear? month.year: ''}}</div>
16-
<button mat-icon-button (click)="onMonthForward()"
17-
*ngIf="config.switches && config.renderMode != 'annual' && calendar.months.length == (iMonth+1); else elseAfterForward">
18-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px">
19-
<path d="M0 0h24v24H0V0z" fill="none" />
20-
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
21-
</svg>
22-
</button>
23-
<ng-template #elseAfterForward>
24-
<div style="width: 40px;"> </div>
25-
</ng-template>
26-
</div>
27-
<table class="mdc-table" [style.width]="config.panelWidth">
2+
<ng-container *ngFor="let month of calendar.months, let iMonth = index">
3+
<div class="mdc-month mat-elevation-z4">
4+
<div class="month-header">
5+
<button mat-icon-button (click)="onMonthBackward()" class="mdc-switches"
6+
*ngIf="config.switches && config.renderMode != 'annual' && iMonth == 0; else elseAfterBackward">
7+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px">
8+
<path d="M0 0h24v24H0V0z" fill="none" />
9+
<path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" />
10+
</svg>
11+
</button>
12+
<ng-template #elseAfterBackward>
13+
<div style="width: 40px;"> </div>
14+
</ng-template>
15+
<div>{{month.name | uppercase}} {{config.displayYear? month.year: ''}}</div>
16+
<button mat-icon-button (click)="onMonthForward()" class="mdc-switches"
17+
*ngIf="config.switches && config.renderMode != 'annual' && calendar.months.length == (iMonth+1); else elseAfterForward">
18+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px">
19+
<path d="M0 0h24v24H0V0z" fill="none" />
20+
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
21+
</svg>
22+
</button>
23+
<ng-template #elseAfterForward>
24+
<div style="width: 40px;"> </div>
25+
</ng-template>
26+
</div>
27+
<table class="mdc-table" [style.width]="config.panelWidth">
2828

29-
<thead class="mdc-table-header">
30-
<tr style="border-bottom: solid 1px rgba(0, 0, 0, 0.12);">
31-
<th scope="col" *ngIf="config.calendarWeek"> </th>
32-
<th *ngFor="let dayname of calendar.dayNames" scope="col">
33-
{{dayname}}
34-
</th>
35-
</tr>
36-
<tr>
37-
<th scope="col" *ngIf="config.calendarWeek" class="kw"></th>
38-
<th scope="col" style="height: 10px;"></th>
39-
</tr>
40-
</thead>
41-
<tbody role="grid" class="mdc-body">
29+
<thead class="mdc-table-header">
30+
<tr>
31+
<th scope="col" *ngIf="config.calendarWeek"> </th>
32+
<th *ngFor="let dayname of calendar.dayNames" scope="col">
33+
{{dayname}}
34+
</th>
35+
</tr>
36+
<tr>
37+
<th scope="col" *ngIf="config.calendarWeek" class="kw"></th>
38+
<th scope="col" style="height: 10px;"></th>
39+
</tr>
40+
</thead>
41+
<tbody role="grid" class="mdc-body">
4242

43-
<ng-container *ngFor="let row of month.render, let iRender = index">
44-
<tr role="row">
45-
<ng-container *ngFor="let day of row, let iDay = index">
46-
<td role="gridcell" class="mdc-body-cell clickable tooltip" [matTooltip]="day.toolTip"
47-
matTooltipClass="tooltip-helper" tabindex="-1" *ngIf="day.type == 'date'"
48-
[ngClass]="config.calendarWeek? 'eight' : 'seven'" (click)="onClick(day, 'date')"
49-
(mouseenter)="onMouseOver(day.date)">
50-
<div class="mdc-body-cell-content"
51-
[class.blurday]="day.hasOwnProperty('backgroundColor') && config.bluredDays"
52-
[ngClass]="[day.date == today? 'mdc-body-today': '',day.date == selectedDayStart || day.date == selectedDayEnd? 'selected': '']">
53-
{{day.day}}
54-
</div>
55-
<div class="mdc-body-cell-content"
56-
[ngClass]="[day.date == selectedDayStart && selectedDayBetween.length > 0? 'selected-border-left': '']"
57-
[class.selected-set]="getCanIBeHighlighted(day.date)"
58-
[class.date-between]="getAmIBetween(day.date)"
59-
[class.selected-border-right]="selectedDayBetween.length > 0 && day.date === selectedDayBetween[selectedDayBetween.length -1]">
60-
61-
</div>
62-
<div class="mdc-body-cell-content" style="z-index: -3;border-radius: 4px;"
43+
<ng-container *ngFor="let row of month.render, let iRender = index">
44+
<tr role="row">
45+
<ng-container *ngFor="let day of row, let iDay = index">
46+
<td role="gridcell" class="mdc-body-cell clickable tooltip" [matTooltip]="day.toolTip"
47+
matTooltipClass="tooltip-helper" tabindex="-1" *ngIf="day.type == 'date'"
48+
[ngClass]="config.calendarWeek? 'eight' : 'seven'" (click)="onClick(day, 'date')"
49+
(mouseenter)="onMouseOver(day.date)">
50+
<div class="mdc-body-cell-content" [class.blurday]="config.bluredDays"
51+
[class.mdc-body-today]="day.date == today"
52+
[class.selected-set]="getCanIBeHighlighted(day.date)"
53+
[class.selected-start]="day.date == selectedDayStart"
54+
[class.selected-end]="day.date == selectedDayEnd"
55+
[class.date-between]="getAmIBetween(day.date)">
56+
{{day.day}}
57+
</div>
58+
<!-- <div class="mdc-body-cell-content mdc-body-cell-content-helper"
59+
[class.selected]="day.date == selectedDayStart || day.date == selectedDayEnd"
60+
[class.selected-set]="getCanIBeHighlighted(day.date)"
61+
[class.date-between]="getAmIBetween(day.date)">
62+
</div> -->
63+
<!-- <div class="mdc-body-cell-content mdc-body-cell-content-helper"
64+
[class.selected-set]="getCanIBeHighlighted(day.date)"
65+
[class.selected-start]="day.date == selectedDayStart"
66+
[class.selected-end]="day.date == selectedDayEnd">
67+
</div> -->
68+
<!-- <div class="mdc-body-cell-content" style="z-index: -3;border-radius: 4px;"
69+
[ngClass]="[day.date == selectedDayStart && selectedDayBetween.length > 0? 'selected-border-left': '']"
70+
[class.selected-border-right]="selectedDayBetween.length > 0 && day.date === selectedDayBetween[selectedDayBetween.length -1]">
6371
[ngStyle]="{'background': (day.backgroundColor? day.backgroundColor:(day.isWeekendDay?weekendColor:''))}">
64-
<!-- <ng-container
72+
<ng-container
6573
*ngIf="day.hasOwnProperty('badgeMode') && day.date != selectedDayStart && day.date != selectedDayEnd">
6674
<span class="mdc-badge mdc-badge-int" *ngIf="day.badgeMode == 'Int'">
6775
{{day.badgeInt}}
@@ -72,41 +80,40 @@
7280
{{day.badgeIcon}}
7381
</mat-icon>
7482
</span>
75-
</ng-container> -->
76-
</div>
77-
</td>
78-
<td role="gridcell" class="mdc-body-cell kw" tabindex="-1" *ngIf="day.type == 'kw'"
79-
[ngClass]="config.calendarWeek? 'eight' : 'seven'">
80-
<div *ngIf="row[iDay+1].type == 'placeholderDay' && iRender != 0; else normalKW">
81-
{{placeholderDay? day.kw : ''}}
82-
</div>
83-
<ng-template #normalKW>
84-
<div>{{day.kw}}</div>
85-
</ng-template>
86-
</td>
87-
<!-- PalceholderDays -->
88-
<td role="gridcell" class="mdc-body-cell clickable placeholderDay" tabindex="-1"
89-
(click)="onClick(day.date, 'placeholderDay')"
90-
*ngIf="day.type == 'placeholderDay' && placeholderDay"
91-
[ngClass]="config.calendarWeek? 'eight' : 'seven'">
92-
<div class="mdc-body-cell-content">
93-
{{ day.day }}
94-
</div>
95-
</td>
96-
<td role="gridcell" class="mdc-body-cell" tabindex="-1"
97-
*ngIf="day.type == 'placeholderDay' && !placeholderDay"
98-
[ngClass]="config.calendarWeek? 'eight' : 'seven'">
99-
<div></div>
100-
</td>
101-
</ng-container>
102-
</tr>
103-
<tr>
104-
<th scope="col" *ngIf="config.calendarWeek" class="kw"></th>
105-
<th scope="col" style="height: 5px;"></th>
106-
</tr>
107-
</ng-container>
108-
</tbody>
109-
</table>
110-
</div>
111-
</ng-container>
112-
</div>
83+
</ng-container>
84+
</div> -->
85+
</td>
86+
<td role="gridcell" class="mdc-body-cell kw" tabindex="-1" *ngIf="day.type == 'kw'"
87+
[ngClass]="config.calendarWeek? 'eight' : 'seven'">
88+
<div *ngIf="row[iDay+1].type == 'placeholderDay' && iRender != 0; else normalKW">
89+
{{placeholderDay? day.kw : ''}}
90+
</div>
91+
<ng-template #normalKW>
92+
<div>{{day.kw}}</div>
93+
</ng-template>
94+
</td>
95+
<!-- PalceholderDays -->
96+
<td role="gridcell" class="mdc-body-cell clickable placeholderDay" tabindex="-1"
97+
(click)="onClick(day.date, 'placeholderDay')" *ngIf="day.type == 'placeholderDay' && placeholderDay"
98+
[ngClass]="config.calendarWeek? 'eight' : 'seven'">
99+
<div class="mdc-body-cell-content">
100+
{{ day.day }}
101+
</div>
102+
</td>
103+
<td role="gridcell" class="mdc-body-cell" tabindex="-1"
104+
*ngIf="day.type == 'placeholderDay' && !placeholderDay"
105+
[ngClass]="config.calendarWeek? 'eight' : 'seven'">
106+
<div></div>
107+
</td>
108+
</ng-container>
109+
</tr>
110+
<tr>
111+
<th scope="col" *ngIf="config.calendarWeek" class="kw"></th>
112+
<th scope="col" style="height: 5px;"></th>
113+
</tr>
114+
</ng-container>
115+
</tbody>
116+
</table>
117+
</div>
118+
</ng-container>
119+
</div>

0 commit comments

Comments
 (0)