title: Calendar don't show events in first load, only after trigger any element in window
body: <p>Calendar don't show events in first load. 
  Only when I trigger any event like click in button to change the view from month to week for example.</p>
  
  <p>I'm using <strong>Angular Calendar 6</strong> + <a href="https://mattlewis92.github.io/angular-calendar/#/async-events" rel="nofollow noreferrer">LINK</a></p>
  
  <p>My project is made in <strong>Angular 6</strong>.</p>
  
  <p>The calendar don't show data in first load, only after it when I trigger any event.</p>
  
  <p>Everything is working as expected, so Ill give the Html (part of them) and the most important: the most important in this case.</p>
  
  <p><strong>HTML</strong>
  ...</p>
  
  <pre><code>&lt;div [ngSwitch]="view"&gt;
            &lt;mwl-calendar-month-view *ngSwitchCase="CalendarView.Month" [viewDate]="viewDate" [events]="events"
              [refresh]="refresh" [activeDayIsOpen]="activeDayIsOpen" (dayClicked)="dayClicked($event.day)"
              (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)"
              [locale]="locale" [weekStartsOn]="weekStartsOn" [weekendDays]="weekendDays" &gt;
            &lt;/mwl-calendar-month-view&gt;
            &lt;mwl-calendar-week-view *ngSwitchCase="CalendarView.Week" [viewDate]="viewDate" [events]="events"
              [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)"
              (eventTimesChanged)="eventTimesChanged($event)" [locale]="locale" [weekStartsOn]="weekStartsOn"
              [weekendDays]="weekendDays" (beforeViewRender)="beforeMonthViewRender($event)"&gt;
            &lt;/mwl-calendar-week-view&gt;
            &lt;mwl-calendar-day-view *ngSwitchCase="CalendarView.Day" [viewDate]="viewDate" [events]="events"
              [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)"
              (eventTimesChanged)="eventTimesChanged($event)" [locale]="locale" &gt;
            &lt;/mwl-calendar-day-view&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>...</p>
  
  <p>TYPESCRIPT
  ...</p>
  
  <pre><code>import {
    Component,
    ChangeDetectionStrategy,
    ViewChild,
    TemplateRef,
    OnInit
  } from "@angular/core";
  import {
    CalendarEvent,
    CalendarView,
    DAYS_OF_WEEK,
    CalendarEventAction,
    CalendarEventTimesChangedEvent,
    CalendarDateFormatter
  } from "angular-calendar";
  import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
  import { Subject, Observable } from "rxjs";
  import {
    isSameDay,
    isSameMonth} from "date-fns";
  import { HomeService } from "../shared/service/home.service";
  import { CalendarioEvento } from "../shared/model/calendario-eventos.model";
  import { FormGroup, FormBuilder } from "@angular/forms";
  import { CustomDateFormatter } from "../shared/service/custom-date-formatter.provide";
  
  
  @Component({
    selector: "mwl-demo-component",
    changeDetection: ChangeDetectionStrategy.OnPush,
    templateUrl: "./home.component.html",
    styleUrls: ["./home.component.css"],
    providers: [
      HomeService,
      {
        provide: CalendarDateFormatter,
        useClass: CustomDateFormatter
      }
    ]
  })
  export class HomeComponent implements OnInit {
    @ViewChild("modalContent") modalContent: TemplateRef&lt;any&gt;;
  
    activeDayIsOpen: boolean = true;
    view: CalendarView = CalendarView.Month;
    viewDate: Date = new Date();
    locale: string = "pt-PT";
    modalData: {
      action: string;
      event: CalendarEvent;
    };
    weekStartsOn: number = DAYS_OF_WEEK.MONDAY;
    weekendDays: number[] = [DAYS_OF_WEEK.FRIDAY, DAYS_OF_WEEK.SATURDAY];
    CalendarView = CalendarView;
    listEvents: CalendarioEvento[] = [];
    evento: CalendarioEvento;
    eventsJson: string;
    filtroForm: FormGroup;
    botao: string;
    acaoPermitida: boolean;
    events: CalendarEvent[] = [];
  
    events$: Observable&lt;Array&lt;CalendarEvent&lt;{ event: any }&gt;&gt;&gt;;
  
    constructor(
      private modal: NgbModal,
      private homeService: HomeService  ) {}
  
    actions: CalendarEventAction[] = [
      {
        label: '&lt;i class="fa fa-fw fa-pencil"&gt;&lt;/i&gt;',
        onClick: ({ event }: { event: CalendarEvent }): void =&gt; {
          this.handleEvent("Edited", event);
        }
      },
      {
        label: '&lt;i class="fa fa-fw fa-times"&gt;&lt;/i&gt;',
        onClick: ({ event }: { event: CalendarEvent }): void =&gt; {
          this.events = this.events.filter(iEvent =&gt; iEvent !== event);
          this.handleEvent("Deleted", event);
        }
      }
    ];
  
    refresh: Subject&lt;any&gt; = new Subject();
    ngOnInit() {
      this.myMethodToInit();
    }
  
    myMethodToInit() {
      this.homeService.getAll().subscribe(data =&gt; {
  
        this.listEvents = data;
  
        this.listEvents.forEach(element =&gt; {
          var diaInicial = element.dataInicio.toString().substring(0, 2);
          var diaFim = element.dataFim.toString().substring(0, 2);
          var mesInicial = element.dataInicio.toString().substring(3, 5);
          var mesFim = element.dataFim.toString().substring(3, 5);
          var anoInicial = element.dataInicio.toString().substring(6, 10);
          var anoFim = element.dataFim.toString().substring(6, 10);
          var dataInicio = anoInicial + "-" + mesInicial + "-" + diaInicial;
          var dataFim = anoFim + "-" + mesFim + "-" + diaFim;
          let eve: CalendarEvent = {
            title: element.descricao,
            start: new Date(dataInicio),
            id: element.id,
            end: new Date(dataFim),
            actions: this.actions
          };
          this.events.push(eve);
        });
      });
    }
  
    dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
      if (isSameMonth(date, this.viewDate)) {
        this.viewDate = date;
        if (
          (isSameDay(this.viewDate, date) &amp;&amp; this.activeDayIsOpen === true) ||
          events.length === 0
        ) {
          this.activeDayIsOpen = false;
        } else {
          this.activeDayIsOpen = true;
        }
      }
    }
  
    eventTimesChanged({
      event,
      newStart,
      newEnd
    }: CalendarEventTimesChangedEvent): void {
      this.events = this.events.map(iEvent =&gt; {
        if (iEvent === event) {
          return {
            ...event,
            start: newStart,
            end: newEnd
          };
        }
        return iEvent;
      });
      this.handleEvent("Dropped or resized", event);
    }
  
    handleEvent(action: string, event: CalendarEvent): void {
      event.start = event.start;
      this.modalData = { event, action };
      this.modal.open(this.modalContent, { size: "lg" });
      document
        .getElementsByTagName("ngb-modal-window")
        .item(0)
        .setAttribute("id", "modal");
      document.getElementById("modal").style.opacity = "1";
    }
  
    addEvent(action: string, event: CalendarEvent): void {
      this.modalData = { event, action };
      this.modal.open(this.modalContent, { size: "lg" });
      document
        .getElementsByTagName("ngb-modal-window")
        .item(0)
        .setAttribute("id", "modal");
      document.getElementById("modal").style.opacity = "1";
    }
  
    deleteEvent(eventToDelete: CalendarEvent) {
      this.events = this.events.filter(event =&gt; event !== eventToDelete);
    }
  
    setView(view: CalendarView) {
      this.view = view;
    }
  
    closeOpenMonthViewDay() {
      this.activeDayIsOpen = false;
    }
  
    resetar() {}
  
    salvar() {
      console.log("titulo:" + this.modalData.event.title);
      console.log("start:" + this.modalData.event.start);
      console.log("end:" + this.modalData.event.end);
    }
  }
  </code></pre>
  
  <p>...</p>
  
  <p><strong>FIRST LOAD</strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/3fsV8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3fsV8.jpg" alt="enter image description here"></a></p>
  
  <p><strong>AFTER ANY EVENT</strong> (for example, click in week view and return to month view):
  <a href="https://i.stack.imgur.com/6skml.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6skml.jpg" alt="enter image description here"></a></p>