Abbreviate the names of the days of the week

Question

Versions

Angular: "@angular/core": "11.2.1"

Syncfusion: "@syncfusion/ej2-angular-schedule": "^19.1.65"

---

I’m using the Syncfusion Schedule and in doing globalization I realized that when opening the calendar the names of the days of the week are in full, which ends up making one stay on top of the other, therefore, I would like to abbreviate them...

In the case of the days of the week, in the own agenda (Wed 02, Thu 03, Fri 04, ...) I did so with the ng-template:

<ejs-schedule #scheduleObj height="1000px" [views]='views' locale="pt-PT" [eventSettings]="eventSettings"
    (eventRendered)="eventRendered($event)">
    <ng-template #dateHeaderTemplate let-data>
        <div class="e-header-day">{{getDateHeaderWeekDay(data.date)}}</div>
        <div class="e-header-date">{{getDateHeaderDay(data.date)}}</div>
    </ng-template>
</ejs-schedule>

That function getDateHeaderWeekDay() returns the abbreviated name...

I tried to do it this way, but it didn’t work:

<ng-template #weekHeaderTemplate>
    <div>Dom</div>
    <div>Seg</div>
    <div>Ter</div>
    <div>Qua</div>
    <div>Qui</div>
    <div>Sex</div>
    <div>Sab</div>
</ng-template>

Answer 1

The Portuguese Culture ːen-PT' Returns the entire day name for abbreviated format from the CLDR data due to that the misalignment occurs.

Solution1: You can overcome this using Below CSS. https://stackblitz.com/edit/ej2-angular-schedule-pt-pt-culture?file=app.component.ts

  .e-calendar .e-content th {
    width: 25px;
    text-overflow: ellipsis;
    overflow: hidden;
  }

Solution 2: You can use ' en' locale Instead of ' en-PT' which shows the short name of the day as per your requirement, Please refer to the following sample.

https://stackblitz.com/edit/ej2-angular-schedule-portuguese-culture?file=app.component.ts