Take out time part of the Scheduler

[Arturo Martinez]

How can i take out the 'hrs' on the header, does not appear, i only want the day 'Sep 8' not the time

[Swathi Ravi]

Hi Arturo,

Thank you for reaching out to us.

To remove the hours from the Scheduler's header and display only the date (e.g., 'Sep 9'), you can disable the timeScale feature of the Scheduler. Additionally, you can customize the header text using the dateHeaderTemplate option. Below is an example that demonstrates this setup:

app.component.html:

<div class="control-section">

  <div class="col-lg-12 content-wrapper">

    <ejs-schedule #scheduleObj width='100%' cssClass='timeline-resource-grouping' height='650px'

      [selectedDate]="selectedDate" [group]="group" [workDays]="workDays" [eventSettings]="eventSettings" [timeScale]="timeScale">

      <ng-template #dateHeaderTemplate let-data>

        <div class="date-text">{{getDateHeaderText(data.date)}}</div>

      </ng-template>

      <e-views>

        <e-view option="TimelineDay" [interval]="interval"></e-view>

        <e-view option="TimelineWeek"></e-view>

        <e-view option="TimelineWorkWeek"></e-view>

        <e-view option="TimelineMonth"></e-view>

        <e-view option="Agenda"></e-view>

      </e-views>

    </ejs-schedule>

  </div>

</div>

app.component.ts:

  public interval: number = 5;

  public timeScale: TimeScaleModel = { enable: false };

  public instance: Internationalization = new Internationalization();

  getDateHeaderText: Function = (value: Date) => {

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

};

For a detailed example, you can refer to this Sample: https://stackblitz.com/edit/scheduler-disable-timescale-lfi3iq?file=src%2Fapp.component.ts,src%2Fapp.component.html

UG:

Date header template: https://ej2.syncfusion.com/angular/documentation/schedule/header-bar#using-date-header-template

Hiding timescale: https://ej2.syncfusion.com/angular/documentation/schedule/timescale#hide-the-timescale

Demo:

Date header template: https://ej2.syncfusion.com/angular/demos/#/fluent2/schedule/date-header-template

If you have any further questions or need additional assistance, feel free to reach out, and we’ll be happy to help!

Regards,

Swathi