Partial commit

src/app/schedules/schedules.component.html

@@ -1 +1,22 @@
-<p>schedules works!</p>
+<div class="calendar-holder">
+	<div class="widget-heading-holder">
+		<header> Shop Events &amp; Timings </header>
+	</div>
+
+	<section class="calendar">
+		<div class="month">
+			<span>{{ selectedMonth }} {{ selectedYear }}</span>
+		</div>
+
+		<div class="days">
+			<span> Sun </span><span> Mon </span><span> Tue </span><span> Wed </span>
+			<span> Thu </span><span> Fri </span><span> Sat </span>
+		</div>
+		<div class="dates">
+			<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
+			<span [ngClass]="{'active' : selectedDate === selectedMonthDay }" *ngFor="let selectedMonthDay of selectedMonthDays" (click)="selectedDate = selectedMonthDay; filterEvents()"> {{ selectedMonthDay }}
+			</span>
+			<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays"> {{ succeedingDay }} </span>
+		</div>
+	</section>
+</div>

src/app/schedules/schedules.component.scss

@@ -0,0 +1,125 @@
+.calendar-holder {
+	width: 65%;
+	padding: 0 5%;
+
+	.widget-heading-holder {
+		width: 100%;
+	}
+}
+
+.calendar {
+    box-shadow: 0 0 10px -1px #bcbcbc;
+    padding: 15px 0;
+    background-color: white;
+	width: 100%;
+	border-radius: 10px;
+	margin-top: 30px;
+
+	.month {
+	    text-align: center;
+	    padding: 5px 0 20px;
+
+	    button,
+	    span {
+	        vertical-align: middle;
+	    }
+
+	    button {
+	        --padding-start: 0;
+	        --padding-end: 0;
+	    }
+
+	    i {
+	        color: var(--ion-color-lighter-grey);
+	        font-size: 22px;
+	    }
+
+	    span {
+	        color: var(--ion-color-blue);
+	        text-transform: uppercase;
+	        font-size: 18px;
+	        padding: 0 5px;
+	        display: inline-block;
+	        width: 180px;
+	    }
+	}
+
+
+    .days {
+        display: flex;
+        width: 100%;
+        margin: 5px 0;
+
+        span {
+            width: calc(100% / 7);
+            text-align: center;
+            font-size: 14px;
+            color: var(--ion-color-brand-black);
+
+            &:first-child {
+                color: #f05525;
+            }
+        }
+    }
+
+    .dates {
+        display: flex;
+        width: 100%;
+        flex-wrap: wrap;
+
+        span {
+            margin: 15px 0;
+            font-size: 14px;
+            width: calc(100% / 7);
+            text-align: center;
+            color: var(--ion-color-brand-black);
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: -70%;
+                overflow: visible;
+                width: 100%;
+                height: 52px;
+                box-shadow: none;
+                border-radius: 50%;
+                transform: scale(0.8);
+            }
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 46%;
+                bottom: -5px;
+                width: 5px;
+                height: 5px;
+                border-radius: 50%;
+                overflow: hidden;
+                background-color: var(--ion-color-lighter-grey);
+                display: none;
+            }
+
+            &.active {
+                &::before {
+                    box-shadow: 0 0 5px -1px var(--ion-color-light-grey);
+                }
+            }
+
+            &.taken {
+                &::after {
+                    display: block;
+                }
+            }
+
+            &:nth-child(7n + 1) {
+                color: #f05525;
+            }
+
+            &.non-current-date {
+                color: var(--ion-color-lighter-grey);
+            }
+        }
+    }
+}

src/app/schedules/schedules.component.ts

@@ -1,15 +1,84 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-schedules',
-  templateUrl: './schedules.component.html',
-  styleUrls: ['./schedules.component.scss']
+	selector: 'app-schedules',
+	templateUrl: './schedules.component.html',
+	styleUrls: ['./schedules.component.scss']
 })
 export class SchedulesComponent implements OnInit {
+	selectedDate: number;
+    selectedMonth: string;
+    selectedYear: number;
+    dayMap: Array<string> = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    monthMap: Array<string> = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    preceedingDays: Array<number> = [];
+    succeedingDays: Array<number> = [];
+    selectedMonthDays: Array<number> = [];
 
-  constructor() { }
+	constructor() { }
 
-  ngOnInit() {
-  }
+	ngOnInit() {
+		this.selectedMonth = this.monthMap[(new Date()).getMonth()];
+        this.selectedYear = (new Date()).getFullYear();
+        this.selectedDate = new Date().getDate();
+        this.renderCalendar();
+	}
+
+	renderCalendar() {
+        // Generate dates for the calendar
+        let i = 1,
+            no_of_preceeding_days,
+            no_of_days_in_selected_month,
+            no_of_succeeding_days,
+            last_date_of_previous_month,
+            first_date_of_selected_month,
+            last_date_of_selected_month;
+
+        first_date_of_selected_month = new Date(this.selectedYear, this.monthMap.indexOf(this.selectedMonth), 1);
+
+        // Add one month, and subtract one day to the selected month and year
+        last_date_of_selected_month = new Date(this.selectedYear, this.monthMap.indexOf(this.selectedMonth) + 1, 0);
+        last_date_of_previous_month = new Date(this.selectedYear, this.monthMap.indexOf(this.selectedMonth), 0);
+
+        no_of_preceeding_days = first_date_of_selected_month.getDay();
+        no_of_days_in_selected_month = last_date_of_selected_month.getDate();
+        no_of_succeeding_days = 6 - last_date_of_selected_month.getDay();
+
+        this.preceedingDays = [];
+        this.selectedMonthDays = [];
+        this.succeedingDays = [];
+
+        for (i = no_of_preceeding_days - 1; i >= 0; i -= 1) {
+            this.preceedingDays.push(last_date_of_previous_month.getDate() - i);
+        }
+
+        for (i = 1; i <= no_of_days_in_selected_month; i += 1) {
+            this.selectedMonthDays.push(i);
+        }
+
+        for (i = 1; i <= no_of_succeeding_days; i += 1) {
+            this.succeedingDays.push(i);
+        }
+    }
+
+	selectNextMonth() {
+        let next_month_index = (this.monthMap.indexOf(this.selectedMonth) + 1) % this.monthMap.length;
+        this.selectedMonth = this.monthMap[next_month_index];
+        if (next_month_index == 0) {
+            this.selectedYear += 1;
+        }
+
+        this.renderCalendar();
+    }
+
+	selectPreviousMonth() {
+        let previous_month_index = (this.monthMap.indexOf(this.selectedMonth) + (this.monthMap.length - 1)) % this.monthMap.length;
+        this.selectedMonth = this.monthMap[previous_month_index];
+        if (previous_month_index == (this.monthMap.length - 1)) {
+            this.selectedYear -= 1;
+        }
+
+        this.renderCalendar();
+    }
 
 }

src/app/widgets-holder/widgets-holder.component.html

@@ -15,7 +15,7 @@
 			<img>
 			<div class="name"> John Doe </div>
 			<div class="other-info"> Member ID: 03293 </div>
-			<div class="other-info"> Restaurant Rating: 4.0 </div>
+			<div class="other-info"> Restaurant Rating: <i class="icon ion-ios-star"></i> 4.0 </div>
 		</section>
 
 		<ul>
@@ -44,5 +44,6 @@
 		<app-dashboard *ngIf="selected_nav === 'dashboard'"></app-dashboard>
 		<app-orders *ngIf="selected_nav === 'orders'"></app-orders>
 		<app-menu-items *ngIf="selected_nav === 'items'"></app-menu-items>
+		<app-schedules *ngIf="selected_nav === 'schedule'"></app-schedules>
 	</section>
 </div>

src/app/widgets-holder/widgets-holder.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./widgets-holder.component.scss']
 })
 export class WidgetsHolderComponent implements OnInit {
-	selected_nav: string = 'items';
+	selected_nav: string = 'schedule';
 
 	constructor() { }