vendor-app/src/app/schedules/schedules.component.html

<div class="calendar-holder">
	<div class="widget-heading-holder">
		<header> Shop Events and Timings </header>
	</div>

	<section class="calendar">
		<div class="month">
			<span>{{ selectedMonth }} {{ selectedYear }}</span>
		</div>

		<div class="days">
			<span> Sunday </span><span> Monday </span><span> Tuesday </span><span> Wednesday </span>
			<span> Thursday </span><span> Friday </span><span> Saturday </span>
		</div>
		<div class="dates">
			<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
			<span [ngClass]="{'current-date': currentDate === selectedMonthDay, 'active' : selectedDate === selectedMonthDay }" *ngFor="let selectedMonthDay of selectedMonthDays" (click)="selectDay(selectedMonthDay)"> {{ selectedMonthDay }}
			</span>
			<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays"> {{ succeedingDay }} </span>
		</div>
	</section>
</div>