polishing

Author: eksrvb

.gitlab-ci.yml

@@ -2,6 +2,8 @@
 Please read this **before** usage!
 This material calendar is just beginning. As in the angular material components, a beautiful calendar is to be generated by simple integration. Cooperation is welcome.
 
+> Note: tthe following changes from version 3.0.0 onwards will no longer be compatible with this api. All necessary changes are documented. Version 3.0.0 is coming soon ;)
+
 ### Live demo
 [Open demo on Stackblitz](https://stackblitz.com/github/e-netsupport/material-calendar-demo)
 

README.md

@@ -30,7 +30,7 @@
 
 </div>
 
-<calendar-panels [mode]="mode" [placeholderDay]="placeholder" year="2020" month="5" [monthsBefore]="monthsBefore"
+<calendar-panels [mode]="mode" [placeholderDay]="placeholder" year="2021" month="5" [monthsBefore]="monthsBefore"
     [monthsAfter]="monthsAfter" [config]="calendarConfig" (clickDate)="testMethod($event)">
 </calendar-panels>
 

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

@@ -17,7 +17,7 @@ export class AppComponent implements OnInit {
   monthsAfter = 0;
 
   calendarConfig: CalendarConfig = {
-    panelBgColor: '#00677f', // 00677f 006105
+    panelBgColor: '#ffffff',
     autoTextColor: true,
     textColor: '#fff',
     useHolidays: false,
@@ -26,7 +26,7 @@ export class AppComponent implements OnInit {
     displayYear: true,
     firstDayOfWeekMonday: true,
     calendarWeek: true,
-    todayColor: '#fff',
+    todayColor: '#000000',
     panelWidth: '90%',
     switches: true,
   }

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

@@ -2,19 +2,24 @@
     <button mat-flat-button class="slideButton"
         *ngIf="config.switches && mode == 'monthly' && (monthsBefore != 0 || monthsAfter != 0)"
         (click)="onMonthBackward()">
-        <span class="material-icons">
+        <!-- <span class="material-icons">
             keyboard_arrow_left
-        </span>
+        </span> -->
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
+            <path d="M0 0h24v24H0z" fill="none" />
+            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+        </svg>
     </button>
     <div class="month mat-elevation-z8" *ngFor="let monat of calendar.months" [style.width]="panelWidth">
         <mat-grid-list cols="{{config.calendarWeek? 8 : 7}}" rowHeight="1:1">
             <mat-grid-tile colspan="{{config.calendarWeek? 8 : 7}}" rowspan="1">
                 <button mat-icon-button
                     *ngIf="config.switches && mode == 'monthly' && (monthsBefore == 0 && monthsAfter == 0)"
                     (click)="onMonthBackward()">
-                    <span class="material-icons">
-                        keyboard_arrow_left
-                    </span>
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+                    </svg>
                 </button>
 
                 <h3 class="displayMonthName" *ngIf="!config.displayYear">{{monat.name}}</h3>
@@ -23,9 +28,11 @@ <h3 class="displayMonthName" *ngIf="config.displayYear">{{monat.name}} {{monat.y
                 <button mat-icon-button
                     *ngIf="config.switches && mode == 'monthly' && (monthsBefore == 0 && monthsAfter == 0)"
                     (click)="onMonthForward()">
-                    <span class="material-icons">
-                        keyboard_arrow_right
-                    </span>
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+                    </svg>
                 </button>
             </mat-grid-tile>
             <mat-grid-tile *ngIf="config.calendarWeek" colspan="1" rowspan="1"></mat-grid-tile>
@@ -44,7 +51,8 @@ <h3 class="displayMonthName" *ngIf="config.displayYear">{{monat.name}} {{monat.y
                     <a>{{day.day}}</a>
                 </mat-grid-tile>
 
-                <mat-grid-tile (click)="onClick(day)" *ngIf="day.type === 'date'" colspan="1" rowspan="1" matTooltip="test" class="date"
+                <mat-grid-tile (click)="onClick(day)" *ngIf="day.type === 'date'" colspan="1" rowspan="1"
+                    matTooltip="test" class="date"
                     [ngClass]="[day.isWeekendDay? 'Weekend' : '', day.isHoliday && config.useHolidays ? 'Holiday' : '']">
                     <div [ngClass]="day.date.setHours(0, 0, 0, 0) == today? 'today': ''">
                         <a>{{day.day}}</a>
@@ -58,8 +66,9 @@ <h3 class="displayMonthName" *ngIf="config.displayYear">{{monat.name}} {{monat.y
     <button mat-flat-button class="slideButton"
         *ngIf="config.switches && mode == 'monthly' && (monthsBefore != 0 || monthsAfter != 0)"
         (click)="onMonthForward()">
-        <span class="material-icons">
-            keyboard_arrow_right
-        </span>
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+            <path d="M0 0h24v24H0z" fill="none" />
+            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+        </svg>
     </button>
 </div>

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

@@ -13,15 +13,15 @@ export class CalendarPanelsComponent implements OnInit {
 
   private _mode: string;
   private _config: CalendarConfig = {
-    panelBgColor: '#00677f', // 00677f 006105
+    panelBgColor: '#ffffff', // 00677f 006105
     autoTextColor: true,
     textColor: '#fff',
     useHolidays: false,
     holidayColor: 'rgb(253, 173, 0)',
     holidayTextColor: 'rgb(253, 173, 0)',
     displayYear: true,
     firstDayOfWeekMonday: true,
-    todayColor: '#fff',
+    todayColor: '#000000',
     panelWidth: '100%',
     calendarWeek: true,
     switches: false,