unification-github-gitlab

Author: eksrvb

README.md

@@ -10,6 +10,8 @@ From version 3.0.0 onwards there will be a stable API with extensive features an
 ### Working demo
 [demo github project](https://github.com/eksrvb/material-calendar-demo)
 
+If you want to give me feedback and don't want to open an issue on github, please fill out the [form](https://forms.gle/W9TygXf65Yru3VHi7)
+
 ![material-calendar-single-month](https://github.com/eksrvb/material-calendar/raw/main/docs/material-calendar-single-month.png)
 ![material-calendar-three-months](https://github.com/eksrvb/material-calendar/raw/main/docs/material-calendar-three-months.png)
 ![material-calendar-two-months-with-placeholder](https://github.com/eksrvb/material-calendar/raw/main/docs/material-calendar-two-months-with-placeholder.png)
@@ -46,78 +48,71 @@ In my case: `{provide:  LOCALE_ID, useValue:  'de-DE' }`
 
 In your html:
 ``` html
-<calendar-panels></calendar-panels>
-```
-and you are good to go ;)
-
-All options are shown here:
-
-``` html
-<calendar-panels
-	[mode]="mode"
-	[placeholderDay]="placeholder"
+<calendar-panel
+	placeholderDay="true"
 	year="2020"
-	month="3" 
+	month="10"
 	monthsBefore="1"
-	monthsAfter="1"
+	monthsAfter="2"
+	[dataSource]="dataSource"
 	[config]="calendarConfig"
-	(clickDate)="yourMethod($event)">
-</calendar-panels>
-<!--
-	default mode = monthly
-	default placeholderDay = false
-	default year = current year
-	default month = current month
-	default monthsBefore = 1
-	default monthsAfter = 1
--->
+	(clickDate)="testMethod($event)">
+   </calendar-panel>
+   <!--
+	default placeholderDay = false   override: boolean
+	default year = current year      override: year to start (number)
+	default month = current month    override: month to start (number)
+	default monthsBefore = 0         
+	default monthsAfter = 0
+	dataSource                       your custom dataSource
+	config                           insert your configuration
+	clickDate                        recive an click event from the component
+    -->
 ```
+
 ``` typescript
-import { CalendarConfig } from  'material-calendar';
+import { CalendarConfig, DayC } from  'material-calendar';
 
-placeholder = false  // boolean ...can be hardcoded in html
-mode = 'monthly'  // 'annual' | 'monthly' ...can be hardcoded in html
+placeholder = false  // boolean
 
 calendarConfig: CalendarConfig = {
-	panelBgColor:  '#00677f', // use only hex or rbg colors
-	autoTextColor:  true,
-	textColor:  '#fff', // use only hex or rbg colors
-	displayYear: true,
+	calendarConfig: CalendarConfig = {
+    renderMode: 'monthly', // 'annual' | 'monthly'
+    selectMode: 'range',  // 'click' | 'range'
+    displayYear: false,
     firstDayOfWeekMonday: true,
-    todayColor: '#fff',
-    panelWidth: '100%', // can also be fix values such as 350px
     calendarWeek: true,
-    switches: false,
+    switches: true,
+  }
 }
-```
-``` javascript
-/**
-* @param  {boolean}  autoTextColor Sets the text color automatically, based on the backgroud colors
-* @param  {boolean}  calendarWeek display the calendar week
-* @param  {boolean}  displayYear displays the year next to the Month name
-* @param  {boolean}  switches display switches in calendar component or not
-* @param  {string}   panelBgColor sets the background color of the panel
-* @param  {string}   textColor if autoTextColor false this must be set to a custom color
-*
-*/
-```
 
-## Planned features
-
-- insert your own calendar data and render the new template
-- multiselect days optional (returns the daily span)
+dataSource: DayC[] = [
+  {
+    date: 1604185200000,
+    backgroundColor: 'rgba(0, 0, 255, 0.5)',
+    toolTip: 'Test ToolTip',
+    badgeMode: 'Icon',
+    badgeInt: 5,
+    badgeIcon: 'edit'
+  },
+  {
+    date: 1604199900000,
+    backgroundColor: 'blue'
+  }
+]
+```
 
-and many more...
 
 ## Features
 
 - generate a nice calendar in material design
 - get a date back with the annotation "clickDate" (see example)
+- insert your own calendar data and render the new template
+- multiselect days optional (returns the daily span)
 
 ## Code scaffolding
 
 For code scaffolding, the project can be checked out from the public repository and pull requests can be made.
-  
 
 ## Build
 

projects/lib-workspace/src/app/app.component.html

@@ -1,18 +1,7 @@
 <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>
@@ -28,15 +17,14 @@
         </mat-select>
     </mat-form-field>
 
+    <div>
+        Events: {{ latestEvent | json }}
+    </div>
+
 </div>
 
 <div>
-    <calendar-panels [mode]="mode" [placeholderDay]="placeholder" year="2021" month="5" [monthsBefore]="monthsBefore"
+    <calendar-panel [placeholderDay]="placeholder" [dataSource]="dataSource" year="2021" month="5" [monthsBefore]="monthsBefore"
         [monthsAfter]="monthsAfter" [config]="calendarConfig" (clickDate)="testMethod($event)">
-    </calendar-panels>
-</div>
-
-<!-- <div style="width: 600px;">
-    <calendar-panel [placeholderDay]="placeholder" year="2020" month="5" [config]="calendarConfig" (clickDate)="testMethod($event)">
     </calendar-panel>
-</div> -->
+</div>

projects/lib-workspace/src/app/app.component.scss

@@ -1,5 +1,12 @@
+/* .selection {
+    width: 100%;
+} */
+
 .selection {
     width: 100%;
+    align-items: center;
+    display: flex;
+    justify-content: center;
 }
 
 .selection > * {

projects/lib-workspace/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CalendarConfig } from 'projects/material-calendar/src/public-api';
+import { CalendarConfig, DayC } from 'projects/material-calendar/src/public-api';
 
 @Component({
   selector: 'app-root',
@@ -10,35 +10,64 @@ export class AppComponent implements OnInit {
   title = 'Material Calendar Demo';
 
   placeholder = false // boolean
-  mode = 'monthly' // 'annual' | 'monthly'
+  isLoading = true
+  latestEvent = ""
 
-  monthsAfterBefore = Array(11).fill(0).map((x, i) => i);
+  monthsAfterBefore = Array(5).fill(0).map((x, i) => i);
   monthsBefore = 0;
   monthsAfter = 0;
 
   calendarConfig: CalendarConfig = {
-    panelBgColor: '#ffffff',
-    autoTextColor: true,
-    textColor: '#fff',
+    renderMode: 'monthly', // 'annual' | 'monthly'
+    selectMode: 'click',  // 'click' | 'range'
     displayYear: true,
     firstDayOfWeekMonday: true,
-    calendarWeek: true,
-    todayColor: '#000000',
-    panelWidth: '300px',
+    calendarWeek: false,
     switches: true,
+    panelWidth: '300px'
   }
 
+  dataSource: DayC[] = [
+    {
+      date: 1624312800000,
+      backgroundColor: '#0167c7',
+      toolTip: 'Test ToolTip',
+      badgeMode: 'Icon',
+      badgeInt: 5,
+      badgeIcon: 'edit'
+    },
+    {
+      date: 1624312800000,
+      backgroundColor: 'rgb(6, 182, 0)',
+      toolTip: 'Test ToolTip',
+      badgeMode: 'Icon',
+      badgeInt: 5,
+      badgeIcon: 'edit'
+    },
+    {
+      date: 1624658400000,
+      backgroundColor: 'rgb(6, 182, 0)',
+      toolTip: 'Test ToolTip 2',
+      /* badgeMode: 'Icon',
+      badgeInt: 5,
+      badgeIcon: 'edit' */
+    },
+    {
+      date: 1604199900000,
+      backgroundColor: 'blue'
+    }
+  ]
+
   constructor() {
   }
 
   ngOnInit() {
+    console.log(this.dataSource)
+    this.isLoading = false
   }
 
   testMethod(event) {
+    this.latestEvent = event;
     console.log(event)
   }
-
-  switchMode() {
-    this.mode = (this.mode === 'monthly') ? 'annual' : 'monthly'
-  }
 }

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

@@ -4,8 +4,10 @@ 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';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
 
 @NgModule({
   declarations: [
@@ -14,8 +16,10 @@ import { FormsModule } from '@angular/forms';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    MaterialModule,
     FormsModule,
+    MatSlideToggleModule,
+    MatFormFieldModule,
+    MatSelectModule,
     MaterialCalendarModule
   ],
   providers: [