title: How to load date dynamically in angular design
body: <p>I have got the similar design based on my requirement in codepen i have attached the link below:
  <a href="https://codepen.io/cm002606/pen/NWWWvPm" rel="nofollow noreferrer">https://codepen.io/cm002606/pen/NWWWvPm</a></p>
  <p>I can able to get the design i have many thing to load the dynamic date inside the design but i can't include can anyone please help me out</p>
  <p>app.component.html</p>
  <pre><code>&lt;div class=&quot;appointment-container&quot;&gt;
    &lt;div class=&quot;appointment-title&quot;&gt;
      &lt;h2 class=&quot;title&quot;&gt;Appointments&lt;/h2&gt;
      &lt;button
        style=&quot;outline: none&quot;
        class=&quot;btn btn-primary float-right&quot;
        (click)=&quot;openDialogWithTemplateRef(myDialog)&quot;
      &gt;
        &lt;img src='{{path+&quot;/assets/Add.png&quot;}}'&gt;
        NEW APPOINTMENT
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row text-center&quot;&gt;
      &lt;div class=&quot;col-md-4&quot;&gt;
     
      &lt;/div&gt;
  
     
    &lt;/div&gt;
    &lt;div class=&quot;appointment-titlearea&quot;&gt;
      &lt;div class=&quot;month-display&quot;&gt;
        &lt;div
          class=&quot;btn btn-primary&quot;
          mwlCalendarPreviousView
          [view]=&quot;view&quot;
          [(viewDate)]=&quot;viewDate&quot;
          (viewDateChange)=&quot;closeOpenMonthViewDay()&quot;
        &gt;
          &lt;ion-icon name=&quot;chevron-back-outline&quot;&gt;&lt;/ion-icon&gt;
        &lt;/div&gt;
        &lt;div
          class=&quot;btn btn-outline-secondary&quot;
          mwlCalendarToday
          [(viewDate)]=&quot;viewDate&quot;
        &gt;
          &lt;h3&gt;{{ viewDate | calendarDate: monthview + &quot;ViewTitle&quot;:&quot;en&quot; }}&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div
          class=&quot;btn btn-primary&quot;
          mwlCalendarNextView
          [view]=&quot;view&quot;
          [(viewDate)]=&quot;viewDate&quot;
          (viewDateChange)=&quot;closeOpenMonthViewDay()&quot;
        &gt;
          &lt;ion-icon name=&quot;chevron-forward-outline&quot;&gt;&lt;/ion-icon&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- &lt;div class=&quot;display-month&quot;&gt;
        &lt;h3&gt;{{ viewDate | calendarDate: view + &quot;ViewTitle&quot;:&quot;en&quot; }}&lt;/h3&gt;
      &lt;/div&gt; --&gt;
    &lt;/div&gt;
    &lt;br /&gt;
    &lt;!--BBC/Sport/football/Scores&amp;Fixtures--&gt;
    &lt;div class=&quot;container-fluid timeline-container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-sm-1 d-none d-sm-block&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-12 prev-btn&quot;&gt;
              &lt;span class=&quot;fa fa-angle-left&quot;&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-12 col-sm-10&quot;&gt;
          &lt;div&gt;
            &lt;div class=&quot;row timeline-list&quot;&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;1&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;WED&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;2&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;THU&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;3&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;FRI&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;4&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;SAT&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;5&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;SUN&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;6&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;MON&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;7&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;TUE&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;8&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;WED&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;9&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;THU&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;10&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;FRI&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;11&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;SAT&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;12&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;SUN&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;13&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;MON&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;14&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;TUE&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;15&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;WED&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;16&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;THU&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;17&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;FRI&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;18&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;SAT&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-4 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;19&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;SUN&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;20&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;MON&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;21&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;TUE&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-5 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;22&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;WED&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item active&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;23&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;THU&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;24&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;FRI&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;25&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;SAT&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;26&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;SUN&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;27&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;MON&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;28&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;TUE&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;29&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;WED&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-3 col-sm-2 col-lg-1 timeline-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;timeline-date&quot;&gt;
                  &lt;span class=&quot;d-block&quot;&gt;30&lt;/span&gt;
                  &lt;p class=&quot;d-block&quot;&gt;THU&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-sm-1 d-none d-sm-block&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-12 next-btn&quot;&gt;
              &lt;span class=&quot;fa fa-angle-right&quot;&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div [ngSwitch]=&quot;view&quot;&gt;
      &lt;mwl-calendar-month-view
        *ngSwitchCase=&quot;CalendarView.Month&quot;
        [viewDate]=&quot;viewDate&quot;
        [refresh]=&quot;refresh&quot;
        [activeDayIsOpen]=&quot;activeDayIsOpen&quot;
        (dayClicked)=&quot;dayClicked($event.day)&quot;
        (eventClicked)=&quot;handleEvent('Clicked', $event.event)&quot;
      &gt;
      &lt;/mwl-calendar-month-view&gt;
      &lt;mwl-calendar-week-view
        *ngSwitchCase=&quot;CalendarView.Week&quot;
        [viewDate]=&quot;viewDate&quot;
        [refresh]=&quot;refresh&quot;
        (eventClicked)=&quot;handleEvent('Clicked', $event.event)&quot;
      &gt;
      &lt;/mwl-calendar-week-view&gt;
      &lt;mwl-calendar-day-view
        *ngSwitchCase=&quot;CalendarView.Day&quot;
        [viewDate]=&quot;viewDate&quot;
        [refresh]=&quot;refresh&quot;
        (eventClicked)=&quot;handleEvent('Clicked', $event.event)&quot;
      &gt;
      &lt;/mwl-calendar-day-view&gt;
    &lt;/div&gt;
  
    &lt;!-- Everything you see below is just for the demo, you don't need to include it in your app --&gt;
  
    &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
   
    &lt;ng-template #myDialog class=&quot;container&quot;&gt;
      &lt;div class=&quot;newappointment-title&quot;&gt;
        &lt;h2 matDialogTitle&gt;New Appointment&lt;/h2&gt;
        &lt;img
          src=&quot;../../../assets/close.png&quot;
          matDialogClose
          class=&quot;appointment-close&quot;
        /&gt;
      &lt;/div&gt;
      &lt;div class=&quot;hr&quot;&gt;&lt;/div&gt;
  
      &lt;mat-dialog-content&gt;
        &lt;form #appointment=&quot;ngForm&quot; (ngSubmit)=&quot;onsubmit(appointment.value)&quot;&gt;
          &lt;img src='{{path+&quot;/assets/edit.png&quot;}}' /&gt;
          &lt;input
            class=&quot;inputtext&quot;
            ngModel
            type=&quot;text&quot;
            placeholder=&quot;Add Title&quot;
            name=&quot;title&quot;
            required
          /&gt;
          &lt;img src='{{path+&quot;/assets/attendees.png&quot;}}' matDialogClose /&gt;
            &lt;mat-select class=&quot;inputtext&quot;&gt;
              &lt;mat-option *ngFor=&quot;let response of responsedata&quot; [value]=&quot;response&quot;&gt;
                {{response}}
              &lt;/mat-option&gt;
            &lt;/mat-select&gt;
        
          &lt;mat-radio-group
            aria-label=&quot;Select an option&quot;
            class=&quot;appointmenttype-select&quot;
            ngModel
            name=&quot;mode&quot;
          &gt;
            &lt;h2 class=&quot;mode-appointment&quot;&gt;Mode of Appointment&lt;/h2&gt;
            &lt;div class=&quot;radio&quot;&gt;
              &lt;mat-radio-button value=&quot;1&quot; color=&quot;primary&quot;
                &gt;Online&lt;/mat-radio-button
              &gt;
              &lt;mat-radio-button value=&quot;2&quot; color=&quot;primary&quot;
                &gt;Offline&lt;/mat-radio-button
              &gt;
            &lt;/div&gt;
          &lt;/mat-radio-group&gt;
          &lt;img src='{{path+&quot;/assets/location.png&quot;}}'/&gt;
          &lt;input
            class=&quot;inputtext&quot;
            ngModel
            type=&quot;text&quot;
            placeholder=&quot;Location&quot;
            name=&quot;location&quot;
            required
          /&gt;
          &lt;img src='{{path+&quot;/assets/alarm.png&quot;}}' class=&quot;clock-icon&quot; /&gt;
          &lt;input
            matInput
            ngModel
            type=&quot;date&quot;
            placeholder=&quot;Not Set&quot;
            class=&quot;datetext&quot;
            name=&quot;apt_date&quot;
            required
          /&gt;
          &lt;input
            matInput
            ngModel
            type=&quot;time&quot;
            placeholder=&quot;Not Set&quot;
            class=&quot;timetext&quot;
            name=&quot;starttime&quot;
            required
          /&gt;
          &lt;!-- &lt;span&gt;
            To
          &lt;/span&gt; --&gt;
          &lt;input
            matInput
            ngModel
            type=&quot;time&quot;
            placeholder=&quot;Not Set&quot;
            class=&quot;timetext&quot;
            name=&quot;endtime&quot;
            required
          /&gt;
          &lt;img src='{{path+&quot;/assets/description.png&quot;}}'/&gt;
          &lt;input
            class=&quot;inputtext&quot;
            type=&quot;text&quot;
            ngModel
            mat-raised-button
            placeholder=&quot;Add Description&quot;
            name=&quot;description&quot;
            required
          /&gt;
  
          &lt;div class=&quot;appointment-buttons&quot;&gt;
            &lt;button mat-button matDialogClose class=&quot;cancel-button&quot;&gt;
              CANCEL
            &lt;/button&gt;
            &lt;button
              mat-button
              matDialogClose
              mat-raised-button
              class=&quot;save-button&quot;
              type=&quot;submit&quot;
            &gt;
              SAVE
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/mat-dialog-content&gt;
    &lt;/ng-template&gt;
  &lt;/div&gt;
  &lt;script&gt;
    // BBC/Sport/football/Scores&amp;Fixtures
    $(document).ready(function () {
      // Timeline date picker slider scroller
      var move = &quot;255px&quot;;
      var activeLeftPosition =
        $(&quot;div.active&quot;).val() !== undefined
          ? (activeLeftPosition = $(&quot;div.active&quot;).position().left)
          : (activeLeftPosition = 0);
      var activeWidth = $(&quot;div.active&quot;).width();
      var listWidth = $(&quot;.timeline-list&quot;).width();
      var center = activeLeftPosition + activeWidth / 2 - listWidth / 2;
  
      // on page load, center active div
      $(&quot;.timeline-list&quot;).animate({ scrollLeft: &quot;+=&quot; + center }, &quot;slow&quot;);
  
      $(&quot;div.active&quot;).next(&quot;div.timeline-item&quot;).css(&quot;border-left-width&quot;, &quot;0&quot;);
  
      $(&quot;.prev-btn&quot;).click(function () {
        $(&quot;.timeline-list&quot;).animate({ scrollLeft: &quot;-=&quot; + move });
      });
  
      $(&quot;.next-btn&quot;).click(function () {
        $(&quot;.timeline-list&quot;).animate({ scrollLeft: &quot;+=&quot; + move });
      });
    });
  &lt;/script&gt;
  </code></pre>
  <p>app.component.ts</p>
  <pre><code>import {
    Component,
    ChangeDetectionStrategy,
    ViewChild,
    TemplateRef,
  } from '@angular/core';
  import {
    startOfDay,
    endOfDay,
    subDays,
    addDays,
    endOfMonth,
    isSameDay,
    isSameMonth,
    addHours,
  } from 'date-fns';
  import * as moment from 'moment';
  import {
    MatDialog,
    MatDialogConfig,
    MatDialogRef,
  } from '@angular/material/dialog';
  import { Subject } from 'rxjs';
  //import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
  import {
    CalendarEvent,
    CalendarEventAction,
    CalendarEventTimesChangedEvent,
    CalendarView,
    MOMENT,
  } from 'angular-calendar';
  import {HttpClient} from '@angular/common/http'
  import { Observable, Observer } from &quot;rxjs&quot;;
  import { FormControl, FormGroup } from '@angular/forms';
  import { PatientDataService } from '../patient-management/patient-data.service';
  import { AuthServiceService } from 'src/app/auth-service.service';
  import { environment } from 'src/environments/environment';
  import { AppointmentService } from './appointment.service';
  
  const colors: any = {
    red: {
      primary: '#ad2121',
      secondary: '#FAE3E3',
    },
    blue: {
      primary: '#1e90ff',
      secondary: '#D1E8FF',
    },
    yellow: {
      primary: '#e3bc08',
      secondary: '#FDF1BA',
    },
  };
  
  @Component({
    selector: 'mwl-demo-component',
    styleUrls: ['./appointment.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    styles: [
      `
        h3 {
          margin: 0 0 10px;
        }
  
        pre {
          background-color: #f5f5f5;
          padding: 15px;
        }
      `,
    ],
    templateUrl: './appointment.component.html'
  })
  export class AppointmentComponent {
  
  
    onsubmit(data:any){
      this.service.appointmentdata(data).subscribe((res)=&gt;{
        console.log('data is pushed',data)
      })
    }
    userIdentity: any = &quot;&quot;;
    responsedata=[]
    path = environment.imagepath;
  
    @ViewChild('modalContent', { static: true }) modalContent: TemplateRef&lt;any&gt;;
    //dialog: any;
    openDialogWithTemplateRef(templateRef: TemplateRef&lt;any&gt;) {
  
      console.log('openDialogWithTemplateRef(templateRef: TemplateRef&lt;any&gt;)');
      this.dialog.open(templateRef);
      let data = '{&quot;ot_id&quot;: &quot;1349614973711122e40e9e99e90c2020&quot;}';
    }
  
    view: CalendarView = CalendarView.Week;
    monthview: CalendarView = CalendarView.Month;
  
    CalendarView = CalendarView;
  
    viewDate: Date = new Date();
  
    modalData: {
      action: string;
      event: CalendarEvent;
    };
  
  
    refresh = new Subject&lt;void&gt;();
  
  
    activeDayIsOpen: boolean = true;
  
    constructor(private dialog: MatDialog,private service: AppointmentService,private http:HttpClient) {}
  
    dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
      console.log(
        'dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void'
      );
      if (isSameMonth(date, this.viewDate)) {
        if (
          (isSameDay(this.viewDate, date) &amp;&amp; this.activeDayIsOpen === true) ||
          events.length === 0
        ) {
          this.activeDayIsOpen = false;
        } else {
          this.activeDayIsOpen = true;
        }
        this.viewDate = date;
      }
    }
  
    
  
    handleEvent(action: string, event: CalendarEvent): void {
      console.log('handleevenet()');
      this.modalData = { event, action };
      // this.modal.open(this.modalContent, { size: 'lg' });
    }
  
    setView(view: CalendarView) {
      this.view = view;
    }
  
    closeOpenMonthViewDay() {
      this.activeDayIsOpen = false;
    }
  
  }
  </code></pre>