Skip to content

Commit 0e8a082

Browse files
eksrhaeksrha
committed
init @fullstack-devops/material-calendar
1 parent 3da7196 commit 0e8a082

24 files changed

+1149
-747
lines changed

‎.github/FUNDING.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# These are supported funding model platforms
2+
3+
github: eksrha # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4+
patreon: # Replace with a single Patreon username
5+
open_collective: # Replace with a single Open Collective username
6+
ko_fi: # Replace with a single Ko-fi username
7+
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8+
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9+
liberapay: # Replace with a single Liberapay username
10+
issuehunt: # Replace with a single IssueHunt username
11+
otechie: # Replace with a single Otechie username
12+
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

‎angular.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@
5757
"polyfills": "projects/lib-workspace/src/polyfills.ts",
5858
"tsConfig": "projects/lib-workspace/tsconfig.app.json",
5959
"inlineStyleLanguage": "scss",
60+
"allowedCommonJsDependencies": [
61+
"moment"
62+
],
6063
"assets": [
6164
"projects/lib-workspace/src/favicon.ico",
6265
"projects/lib-workspace/src/assets"
@@ -73,11 +76,11 @@
7376
{
7477
"type": "initial",
7578
"maximumWarning": "500kb",
76-
"maximumError": "1mb"
79+
"maximumError": "2mb"
7780
},
7881
{
7982
"type": "anyComponentStyle",
80-
"maximumWarning": "2kb",
83+
"maximumWarning": "3kb",
8184
"maximumError": "4kb"
8285
}
8386
],

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@angular/platform-browser": "~13.3.11",
2727
"@angular/platform-browser-dynamic": "~13.3.11",
2828
"@angular/router": "~13.3.11",
29+
"moment": "^2.29.4",
2930
"rxjs": "~7.5.6",
3031
"tslib": "^2.4.0",
3132
"zone.js": "~0.11.7"

‎projects/lib-workspace/src/app/app-routing.module.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { CalenderShowcaseComponent } from './content/calender-showcase/calender-showcase.component';
12
import { NgModule } from '@angular/core';
23
import { PreloadAllModules, RouterModule } from '@angular/router';
34
import { FrameRoutes } from 'projects/ng-mat-components/src/public-api';
@@ -31,6 +32,14 @@ export const routes: FrameRoutes = [
3132
sidenavText: 'Dashboard'
3233
},
3334
},
35+
{
36+
path: 'calendar-showcase', component: CalenderShowcaseComponent,
37+
data: {
38+
displaySidemenu: true,
39+
sidenavIcon: 'calendar_month',
40+
sidenavText: 'Calendar'
41+
},
42+
},
3443
];
3544

3645
@NgModule({

‎projects/lib-workspace/src/app/app.module.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1+
import { CalenderShowcaseComponent } from './content/calender-showcase/calender-showcase.component';
12
import { NgModule } from '@angular/core';
23
import { BrowserModule } from '@angular/platform-browser';
34

45
import { APP_BASE_HREF } from '@angular/common';
56
import { AppRoutingModule } from './app-routing.module';
67
import { AppComponent } from './app.component';
78
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
8-
import { FormsModule } from '@angular/forms';
9+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
910
import { MaterialModule } from './material.module';
1011

1112
import { NgMatComponentsModule } from 'projects/ng-mat-components/src/public-api';
1213
import { HomeComponent } from './content/home/home.component';
1314
import { SubComponent } from './content/home/sub/sub.component';
1415
import { TestComponent } from './content/test/test.component';
16+
import { MatFormFieldModule } from '@angular/material/form-field';
1517

1618

1719
@NgModule({
@@ -20,13 +22,16 @@ import { TestComponent } from './content/test/test.component';
2022
HomeComponent,
2123
TestComponent,
2224
SubComponent,
25+
CalenderShowcaseComponent,
2326
],
2427
imports: [
2528
BrowserModule,
2629
AppRoutingModule,
2730
BrowserAnimationsModule,
2831
MaterialModule,
2932
FormsModule,
33+
MatFormFieldModule,
34+
ReactiveFormsModule,
3035
NgMatComponentsModule,
3136
],
3237
providers: [

‎projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div style="display: flex; justify-content: space-around;">
2+
<mat-slide-toggle [(ngModel)]="placeholder">
3+
Days placeholder
4+
</mat-slide-toggle>
5+
</div>
6+
7+
<div class="selection">
8+
<mat-form-field>
9+
<mat-label>Months before</mat-label>
10+
<mat-select [(ngModel)]="monthsBefore">
11+
<mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{num}}</mat-option>
12+
</mat-select>
13+
</mat-form-field>
14+
<mat-form-field>
15+
<mat-label>Months after</mat-label>
16+
<mat-select [(ngModel)]="monthsAfter">
17+
<mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{num}}</mat-option>
18+
</mat-select>
19+
</mat-form-field>
20+
<div>
21+
<p>Selected range: {{range | json}}</p>
22+
</div>
23+
</div>
24+
25+
<div style="height: 80%;">
26+
<fs-calendar [placeholderDay]="placeholder" [dataSource]="dataSource" [year]="2022" [month]="3"
27+
[monthsBefore]="monthsBefore" [monthsAfter]="monthsAfter" [config]="calendarConfig"
28+
(selectedDate)="testMethod($event)">
29+
</fs-calendar>
30+
</div>

‎projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.scss‎

Whitespace-only changes.

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

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { OverlayContainer } from '@angular/cdk/overlay';
2+
import { Component, HostBinding, OnInit } from '@angular/core';
3+
import { FormControl } from '@angular/forms';
4+
import { CalendarConfig, calendarSelected, Day, selectedDate } from 'projects/ng-mat-components/src/public-api';
5+
6+
@Component({
7+
selector: 'lib-calender-showcase',
8+
templateUrl: './calender-showcase.component.html',
9+
styleUrls: ['./calender-showcase.component.scss']
10+
})
11+
export class CalenderShowcaseComponent implements OnInit {
12+
13+
// Theming
14+
toggleControl = new FormControl(false);
15+
@HostBinding('class') className = '';
16+
17+
range: any
18+
19+
placeholder = false // boolean
20+
isLoading = true
21+
latestEvent: Object | undefined
22+
23+
monthsAfterBefore = Array(5).fill(0).map((x, i) => i);
24+
monthsBefore = 2;
25+
monthsAfter = 0;
26+
27+
calendarConfig: CalendarConfig = {
28+
renderMode: 'monthly', // 'annual' | 'monthly'
29+
selectMode: 'range', // 'click' | 'range'
30+
displayYear: true,
31+
firstDayOfWeekMonday: true,
32+
calendarWeek: false,
33+
switches: true,
34+
panelWidth: '300px',
35+
bluredDays: false, // default: false
36+
markWeekend: true // default: true
37+
}
38+
39+
dataSource: Day[] = [
40+
{
41+
date: new Date(1634594400000),
42+
backgroundColor: '#0167c7',
43+
toolTip: 'Test ToolTip First',
44+
dayNumber: ''
45+
},
46+
{
47+
date: new Date(1634594400000),
48+
backgroundColor: 'rgb(6, 182, 0)',
49+
toolTip: 'Test ToolTip Second',
50+
dayNumber: ''
51+
},
52+
{
53+
date: new Date(1634853600000),
54+
backgroundColor: 'rgb(6, 182, 0)',
55+
toolTip: 'Test ToolTip 2',
56+
dayNumber: ''
57+
},
58+
{
59+
date: new Date(1635544800000),
60+
backgroundColor: 'lightblue',
61+
dayNumber: ''
62+
}
63+
]
64+
65+
constructor(private overlay: OverlayContainer) { }
66+
ngOnInit(): void {
67+
this.toggleControl.valueChanges.subscribe((darkMode) => {
68+
const darkClassName = 'darkMode';
69+
this.className = darkMode ? darkClassName : '';
70+
if (darkMode) {
71+
this.overlay.getContainerElement().classList.add(darkClassName);
72+
} else {
73+
this.overlay.getContainerElement().classList.remove(darkClassName);
74+
}
75+
});
76+
77+
console.log(this.dataSource)
78+
this.isLoading = false
79+
}
80+
81+
testMethod(event: calendarSelected) {
82+
switch (event.type) {
83+
case "range":
84+
this.range = event;
85+
break;
86+
case "date":
87+
this.range = event;
88+
break;
89+
}
90+
console.log(event)
91+
}
92+
}

‎projects/lib-workspace/src/index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
<!doctype html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="utf-8">
56
<title>LibWorkspace</title>
6-
<base href="/">
7+
<base href=".">
78
<meta name="viewport" content="width=device-width, initial-scale=1">
89
<link rel="icon" type="image/x-icon" href="favicon.ico">
910
<link rel="preconnect" href="https://fonts.gstatic.com">
1011
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
1112
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
1213
</head>
14+
1315
<body class="mat-typography">
1416
<app-root></app-root>
1517
</body>
18+
1619
</html>

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
@use "@angular/material" as mat;
1+
@use '@angular/material' as mat;
2+
3+
mat.$theme-ignore-duplication-warnings: true;
24

35
body {
46
margin: 0;
@@ -14,7 +16,7 @@ body {
1416
}
1517

1618
@include mat.core();
17-
@import "../../ng-mat-components/frame-theme.scss";
19+
@import "../../ng-mat-components/fs-mat-components-theme.scss";
1820

1921
// Define a light theme
2022
$light-primary: mat.define-palette(mat.$indigo-palette);
@@ -42,13 +44,13 @@ $dark-theme: mat.define-dark-theme(
4244

4345
// Apply the dark theme by default
4446
@include mat.all-component-themes($dark-theme);
45-
@include frame-theme($dark-theme);
47+
@include fs-mat-components-theme($dark-theme);
4648

4749
// Apply the light theme only when the `.my-light-theme` CSS class is applied
4850
// to an ancestor element of the components (such as `body`).
4951
.my-light-theme {
5052
@include mat.all-component-themes($light-theme);
51-
@include frame-theme($light-theme);
53+
@include fs-mat-components-theme($light-theme);
5254
}
5355

5456
.mat-form-field:not(.mat-form-field-has-label) .mat-form-field-infix {

0 commit comments

Comments
 (0)