Next Slide Styles Loading Delayed

[GodsFavoriteDeveloper]

After adding these custom styles on global.scss they work but when i navigate to the next slide they are delayed. The screen first renders without them, then after a split second they are then applied

.table > tbody > tr > td { padding: 0px !important; border: 1px solid #f4df9c !important; } .table > thead > tr > td { border: 1px solid var(--ion-color-secondary) !important; } .table-bordered > thead > tr > th { border: 1px solid var(--ion-color-secondary) !important; } .monthview-datetable td.monthview-disabled { color: #999999 !important; }

[twinssbc]

@GodsFavoriteDeveloper Did you use any custom template in the calendar. From your description, it seems your css styles only applies to the current slide (active slide), it doesn't apply to the next slide(inactive slide). So only when next slide becomes to current slide, some css class is applied and the styles take effect.

[GodsFavoriteDeveloper]

Thanks. So how can I fix this? I added my styles to global.css and I'm using a custom template. Below is my custom template

<ng-template #template let-view="view" let-row="row" let-col="col"> <div ngIf="view.dates[row7+col].events == ''">

{{view.dates[row*7+col].label}}

  </div>
  <div class="outer-date-box" *ngFor="let obj of view.dates[row*7+col].events">
    <div class="date-box" [ngStyle]="{'background': obj.eventColor } ">
      {{view.dates[row*7+col].label}}
    </div>
  </div>
</ng-template>

[twinssbc]

@GodsFavoriteDeveloper Are you customizing monthviewDisplayEventTemplate? If you also want to add some customization to your inactive months, you could customize on monthviewInactiveDisplayEventTemplate.