Custom day of week format

[An]

Hi Syncfusion Team,

How can I custom day format in .e-header-cells? (Ex: Monday -> Mon)

Thank you!

[Ruksar Moosa Sait]

Hi An,

Greetings from Syncfusion support.

You can use the dateheadertemplate option is used to customize the date header cells of day, week and workweek (Vertical) views as the required format Mon by setting the skeleton format as ‘E’ for the template like the below code snippet.

public
getDateHeaderText(value: Date): string {

    return
this.instance.formatDate(value, { skeleton:
'E' });

  }

In the Month view, the date header is not applicable and therefore the same customizations can be added beside the date text in the month cells by making use of the rendercell event.

  public
onRenderCell(args: RenderCellEventArgs): void {

    if (args.elementType === 'monthDay' && this.currentView === 'Month') {

      (args.element
as
HTMLElement).innerText = (args.element
as
HTMLElement).innerText.slice(0, 3)

    }

  }

Refer the below link for more reference on the skeleton formats

https://ej2.syncfusion.com/angular/documentation/common/globalization/internationalization/#manipulating-datetime

Sample: https://stackblitz.com/edit/ej2-angular-schedule-month-day-header-customization?file=app.component.ts

Output:

Vertical View

Month View

Kindly try the shared sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

[An]

It works, thank you very much!

[Satheesh Kumar Balasubramanian]

Hi An,

Thanks for the update.

We are happy that your problem has been resolved now.

Regards,

Satheesh Kumar B