lms-app/src/app/calendar/calendar.component.html

<section class="page-container full-bg" color="ash-black">
    <header class="nav-header" shadow="true">
        <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">
        <h2 class="calendar-header">
            {{ selectedMonth }} {{ selectedYear }}
        </h2>

        <section class="mini-calendar">
    		<div class="days">
    			<span> S </span><span> M </span><span> T </span><span> W </span>
    			<span> T </span><span> F </span><span> S </span>
    		</div>
    		<div class="dates">
    			<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
    			<span [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth && currentYear === selectedYear,
    			'active': selectedDate === selectedMonthDay }"
    			*ngFor="let selectedMonthDay of selectedMonthDays"
    			(click)="selectedDate = selectedMonthDay">
    				{{ selectedMonthDay }}
    			</span>
    			<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays">
    				{{ succeedingDay }}
    			</span>
    		</div>
    	</section>
    </div>

    <section class="schedule-details">
        <header> {{ selectedDate }}, {{ selectedMonth }} {{ selectedYear }}  </header>
        <ul>
            <li class="progress" [routerLink]="['/tabs/home']">
                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/play-button.svg"></svg-icon>
                <div class="content-holder">
                    <div class="content">
                        <label> Social Science class </label>
                        <p> 4:00 PM to 5:00 PM </p>
                    </div>
                    <span class="status"> In Progress </span>
                </div>
            </li>

            <li class="late" [routerLink]="['/video-chapter', 'Chemistry Class']">
                <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="absent" [routerLink]="['/chapter-notes', 'Physics Class']">
                <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="attended" [routerLink]="['/video-chapter', 'Mathematics Class']">
                <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>
        </ul>

        <section class="preceeding-days-progress" [ngClass]="{'active' : showAllSchedules}">
            <div *ngIf="showAllSchedules">
                <header class="first-header"> {{ selectedDate - 1 }}, {{ selectedMonth }} {{ selectedYear }}  </header>
                <ul>
                    <li class="attended" [routerLink]="['/quiz']">
                        <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 PM to 5:00 PM </p>
                            </div>
                            <span class="status"> Completed Quiz </span>
                        </div>
                    </li>

                    <li class="late" [routerLink]="['/video-chapter', 'Chemistry Class']">
                        <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="absent" [routerLink]="['/chapter-notes', 'Physics Class']">
                        <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="attended" [routerLink]="['/video-chapter', 'Mathematics Class']">
                        <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>
                </ul>

                <header> {{ selectedDate - 2 }}, {{ selectedMonth }} {{ selectedYear }}  </header>
                <ul>
                    <li class="absent" [routerLink]="['/video-chapter', 'Living Things']">
                        <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> Social Science class </label>
                                <p> 4:00 PM to 5:00 PM </p>
                            </div>
                            <span class="status"> Absent </span>
                        </div>
                    </li>

                    <li class="late" [routerLink]="['/video-chapter', 'Chemistry Class']">
                        <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="absent" [routerLink]="['/chapter-notes', 'Physics Class']">
                        <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="attended" [routerLink]="['/video-chapter', 'Mathematics Class']">
                        <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>
                </ul>
            </div>
        </section>
    </section>

    <button *ngIf="demoType === 'Teacher'" class="add-button"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/plus.svg"></svg-icon> </button>
</section>