Calendar events are not listed in mobile/mac browser but works fine in the windows browser.

[dbalajinagamuthu]

I an not writing any complicated code. its just a simple code. It was working fine early but not working now. I can see the data in the windows browser but the events are not listing in the mobile and mac browser. I have attached the screen shot below and also added code snip below.

In windows browser:

image from Ipad

I am using angular as my frontend. below is the html code. `

<!-- Entire Calendar -->
<div class="action-bar" fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="16px;">
    <div fxFlex.lt-md="100%" fxFlex="0 1 calc(33.3% - 16px)">
        <div class="month-picker">
            <button mat-stroked-button [disabled]="isLoading || prevBtnDisabled" (click)="decrement()">
                Previous
            </button>
            <button mat-stroked-button [disabled]="isLoading" (click)="today()">
                Today
            </button>
            <button mat-stroked-button [disabled]="isLoading || nextBtnDisabled" (click)="increment()">
                Next
            </button>
        </div>
    </div>

    <div fxFlex.lt-md=" 100%" fxFlex="0 1 calc(33.3% - 16px)">
        <h1 class="view-heading">{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h1>
    </div>

    <div fxFlex.lt-md="100%" fxFlex="0 1 calc(33.3% - 16px)">
        <div class="view-picker">
            <button mat-stroked-button [disabled]="isLoading" (click)="changeView('month')"
                [class.active]="view === 'month'">
                Month
            </button>
            <button mat-stroked-button [disabled]="isLoading" (click)="changeView('week')"
                [class.active]="view === 'week'">
                Week
            </button>
            <button mat-stroked-button [disabled]="isLoading" (click)="changeView('day')"
                [class.active]="view === 'day'">
                Day
            </button>
        </div>
    </div>
</div>

<mat-divider *ngIf="view === 'month'"></mat-divider>

<!-- Loading -->
<div fxLayout="column" *ngIf="isLoading" fxLayoutAlign="center center">
    <div style="margin-top: 6em;">
        <mat-spinner></mat-spinner>
    </div>
</div>

<div class="calendar" [ngSwitch]="view" *ngIf="!isLoading">
    <mwl-calendar-month-view *ngSwitchCase="'month'" [viewDate]="viewDate" [events]="events" [refresh]="refresh"
        [activeDayIsOpen]="activeDayIsOpen" (dayClicked)="dayClicked($event.day)"
        (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)"
        (beforeViewRender)="beforeMonthViewRender($event)">
    </mwl-calendar-month-view>
    <mwl-calendar-week-view *ngSwitchCase="'week'" [viewDate]="viewDate" [events]="events" [refresh]="refresh"
        (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)">
    </mwl-calendar-week-view>
    <mwl-calendar-day-view *ngSwitchCase="'day'" [viewDate]="viewDate" [events]="events" [refresh]="refresh"
        (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)">
    </mwl-calendar-day-view>
</div>

`

[matts-bot[bot]]

This issue has been closed automatically as it did not follow the issue template, please open a new issue that follows the bug report or feature request template.

If you would like to submit a support issue or get a faster reply, please consider sponsoring me.

Thank you! ✌️