make demo application

eksrvb · eksrvb · commit 9f261bcc59b3 · 2020-06-19T08:32:11.000+02:00
diff --git a/projects/my-first-app/src/app/app.component.html b/projects/my-first-app/src/app/app.component.html
@@ -1,12 +1,35 @@
-<button mat-button (click)="placeholder=!placeholder">switch placeholder</button>
-<button mat-button (click)="switchMode()">switch mode: {{mode}}</button>
-<p>{{placeholder}}</p>
-<calendar-panels
-    [mode]="mode"
-    [placeholderDay]="placeholder"
-    year="2020"
-    month="5"
-    monthsBefore="1"
-    monthsAfter="1"
-    [config]="calendarConfig">
+<div class="selection">
+    <mat-form-field>
+        <mat-label>Select Mode</mat-label>
+        <mat-select [(ngModel)]="mode" name="mode">
+            <mat-option value="monthly">monthly</mat-option>
+            <mat-option value="annual">annual</mat-option>
+        </mat-select>
+    </mat-form-field>
+
+    <mat-slide-toggle [(ngModel)]="placeholder">
+        Days placeholder
+    </mat-slide-toggle>
+    <!-- <mat-slide-toggle [(ngModel)]="calendarConfig.calendarWeek">
+        Calendar week
+    </mat-slide-toggle> -->
+
+    <mat-form-field>
+        <mat-label>Months before</mat-label>
+        <mat-select [(ngModel)]="monthsBefore">
+            <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{num}}</mat-option>
+        </mat-select>
+    </mat-form-field>
+
+    <mat-form-field>
+        <mat-label>Months after</mat-label>
+        <mat-select [(ngModel)]="monthsAfter">
+            <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{num}}</mat-option>
+        </mat-select>
+    </mat-form-field>
+
+</div>
+
+<calendar-panels [mode]="mode" [placeholderDay]="placeholder" year="2020" month="5" [monthsBefore]="monthsBefore"
+    [monthsAfter]="monthsAfter" [config]="calendarConfig">
 </calendar-panels>
diff --git a/projects/my-first-app/src/app/app.component.scss b/projects/my-first-app/src/app/app.component.scss
@@ -0,0 +1,7 @@
+.selection {
+    width: 100%;
+}
+
+.selection > * {
+    margin: 12px;
+}
diff --git a/projects/my-first-app/src/app/app.component.ts b/projects/my-first-app/src/app/app.component.ts
@@ -7,11 +7,15 @@ import { CalendarConfig } from 'projects/material-calendar/src/public-api';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'my-first-app';
+  title = 'Material Calendar Demo';
 
   placeholder = false // boolean
   mode = 'monthly' // 'annual' | 'monthly'
 
+  monthsAfterBefore = Array(11).fill(0).map((x, i) => i);
+  monthsBefore = 0;
+  monthsAfter = 0;
+
   calendarConfig: CalendarConfig = {
     panelBgColor: '#00677f', // 00677f 006105
     autoTextColor: true,
@@ -28,4 +32,4 @@ export class AppComponent {
   switchMode() {
     this.mode = (this.mode === 'monthly') ? 'annual' : 'monthly'
   }
-}
+}
diff --git a/projects/my-first-app/src/app/app.module.ts b/projects/my-first-app/src/app/app.module.ts
@@ -4,6 +4,8 @@ import { NgModule, LOCALE_ID } from '@angular/core';
 import { AppComponent } from './app.component';
 import { MaterialCalendarModule } from 'projects/material-calendar/src/public-api';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MaterialModule } from './material';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -12,6 +14,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
+    MaterialModule,
+    FormsModule,
     MaterialCalendarModule
   ],
   providers: [
diff --git a/projects/my-first-app/src/index.html b/projects/my-first-app/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>MyFirstApp</title>
+  <title>Material Calendar Demo</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
