Scroll Calendar page to show all schedules

src/app/calendar/calendar.component.html

@@ -1,8 +1,12 @@
-<div class="page">
+<div class="page" #scrollMe>
     <header class="nav-header">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
         </button>
+        <button class="show-all-button" (click)="scrollToBottom()">
+            <span *ngIf="showAllSchedules"> Show All </span>
+            <span *ngIf="!showAllSchedules"> Show Today </span>
+        </button>
     </header>
 
     <div class="calendar-holder">
@@ -80,6 +84,158 @@
 
             </li>
         </ul>
+
+        <div class="preceeding-days-progress" *ngIf="showAllSchedules">
+            <header> {{ selectedDate - 1 }}, {{ selectedMonth }} {{ selectedYear }}  </header>
+            <ul>
+                <li class="attended">
+                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                    <div class="content-holder">
+                        <div class="content">
+                            <label> Mathematics class </label>
+                            <p> 8:00 AM to 10:00 AM </p>
+                        </div>
+                        <span class="status"> Attended </span>
+                    </div>
+                </li>
+
+                <li class="absent">
+                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
+                    <div class="content-holder">
+                        <div class="content">
+                            <label> Physics class </label>
+                            <p> 11:00 AM to 1:00 PM </p>
+                        </div>
+                        <span class="status"> Absent </span>
+                    </div>
+
+                </li>
+
+                <li class="late">
+                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
+                    <div class="content-holder">
+                        <div class="content">
+                            <label> Chemistry class </label>
+                            <p> 2:00 PM to 3:00 PM </p>
+                        </div>
+                        <span class="status"> Late by 10 mins </span>
+                    </div>
+
+                </li>
+
+                <li class="progress">
+                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
+                    <div class="content-holder">
+                        <div class="content">
+                            <label> Social Science class </label>
+                            <p> 4:00 AM to 5:00 PM </p>
+                        </div>
+                        <span class="status"> Progress </span>
+                    </div>
+
+                </li>
+            </ul>
+
+            <header> {{ selectedDate - 2 }}, {{ selectedMonth }} {{ selectedYear }}  </header>
+            <ul>
+                <li class="attended">
+                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                    <div class="content-holder">
+                        <div class="content">
+                            <label> Mathematics class </label>
+                            <p> 8:00 AM to 10:00 AM </p>
+                        </div>
+                        <span class="status"> Attended </span>
+                    </div>
+                </li>
+
+                <li class="absent">
+                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
+                    <div class="content-holder">
+                        <div class="content">
+                            <label> Physics class </label>
+                            <p> 11:00 AM to 1:00 PM </p>
+                        </div>
+                        <span class="status"> Absent </span>
+                    </div>
+
+                </li>
+
+                <li class="late">
+                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
+                    <div class="content-holder">
+                        <div class="content">
+                            <label> Chemistry class </label>
+                            <p> 2:00 PM to 3:00 PM </p>
+                        </div>
+                        <span class="status"> Late by 10 mins </span>
+                    </div>
+
+                </li>
+
+                <li class="progress">
+                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
+                    <div class="content-holder">
+                        <div class="content">
+                            <label> Social Science class </label>
+                            <p> 4:00 AM to 5:00 PM </p>
+                        </div>
+                        <span class="status"> Progress </span>
+                    </div>
+
+                </li>
+            </ul>
+
+            <header> {{ selectedDate - 3 }}, {{ selectedMonth }} {{ selectedYear }}  </header>
+            <ul>
+                <li class="attended">
+                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                    <div class="content-holder">
+                        <div class="content">
+                            <label> Mathematics class </label>
+                            <p> 8:00 AM to 10:00 AM </p>
+                        </div>
+                        <span class="status"> Attended </span>
+                    </div>
+                </li>
+
+                <li class="absent">
+                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
+                    <div class="content-holder">
+                        <div class="content">
+                            <label> Physics class </label>
+                            <p> 11:00 AM to 1:00 PM </p>
+                        </div>
+                        <span class="status"> Absent </span>
+                    </div>
+
+                </li>
+
+                <li class="late">
+                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
+                    <div class="content-holder">
+                        <div class="content">
+                            <label> Chemistry class </label>
+                            <p> 2:00 PM to 3:00 PM </p>
+                        </div>
+                        <span class="status"> Late by 10 mins </span>
+                    </div>
+
+                </li>
+
+                <li class="progress">
+                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
+                    <div class="content-holder">
+                        <div class="content">
+                            <label> Social Science class </label>
+                            <p> 4:00 AM to 5:00 PM </p>
+                        </div>
+                        <span class="status"> Progress </span>
+                    </div>
+
+                </li>
+            </ul>
+        </div>
     </section>
 
     <button class="add-button"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/plus.svg"></svg-icon> </button>

src/app/calendar/calendar.component.scss

@@ -26,6 +26,17 @@
         }
     }
 
+    .show-all-button {
+        margin-left: auto;
+        background-color: var(--dark-grey);
+        color: white;
+        border: 0px;
+        border-radius: 3px;
+        height: 35px;
+        padding: 0 15px;
+        font-size: 14px;
+    }
+
     .profile-button {
         background-color: transparent;
         margin-left: auto;
@@ -126,14 +137,14 @@
 }
 
 .schedule-details {
-    max-height: calc(100vh - 60px);
     background-color: white;
-    padding: 40px 5% 100px;
+    padding: 0 5% 100px;
     overflow: auto;
     border-top-left-radius: 30px;
     border-top-right-radius: 30px;
     position: relative;
-
+    z-index: 0;
+    
     &::before {
         content: '';
         position: absolute;
@@ -149,6 +160,7 @@
         color: var(--dark-grey);
         font-size: 16px;
         font-weight: 700;
+        margin-top: 40px;
     }
 
     ul {
@@ -245,17 +257,19 @@
         .content-holder {
             width: calc(100% - 40px);
             display: flex;
-            padding: 0 10px;
+            padding: 15px 15px;
             align-items: center;
+            box-shadow: 1px 1px 5px var(--light-grey);
+            border-radius: 7px;
 
             .content {
-                width: calc(100% - 150px);
+                flex-grow: 1;
             }
 
             .status {
                 font-size: 14px;
                 text-align: right;
-                flex-grow: 1;
+                margin-left: auto;
             }
         }
 

src/app/calendar/calendar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
 import { Location } from '@angular/common';
 
 @Component({
@@ -7,6 +7,7 @@ import { Location } from '@angular/common';
 	styleUrls: ['./calendar.component.scss']
 })
 export class CalendarComponent implements OnInit {
+    @ViewChild('scrollMe') private myScrollContainer: ElementRef;
     currentDate: number;
 	currentMonth: string;
 	currentYear: number;
@@ -18,10 +19,22 @@ export class CalendarComponent implements OnInit {
     succeedingDays: Array<number> = [];
     selectedMonthDays: Array<number> = [];
 
+    showAllSchedules: boolean = false;
+
 	constructor(
         private location: Location
     ) { }
 
+    scrollToBottom() {
+        this.showAllSchedules = !this.showAllSchedules;
+
+        if (this.showAllSchedules) {
+            try {
+                this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+            } catch(err) { }
+        }
+    }
+
 	ngOnInit(): void {
         this.selectToday();
 	}