Scheduler - Custom Heaeder Rows

[Peter Linecker]

Hi Syncfusion-Team,

I am working on a Room Scheduler which I am recreating from our own software for hotels. In this scheduler there are two additional header bars which can display special seasons of the year and special days like some holidays. You can see them in the example picture below:

In my scheduler I have already built in the header rows for the day, week and month:

So my question is, is it even possible to add those two additional rows?

Kind Regards, Peter

[Ruksar Moosa Sait]

Hi Peter,

We have checked on your requirement and suggest you to use ng-template in the HeaderRows and customize it as per your requirement. We have prepared a sample for your reference.

[app.component.html]

<e-header-rows>

        <e-header-row option='Year'>

          <ng-template #template let-data>

            <span>Nachsaion</span>

          </ng-template>

        </e-header-row>

        <e-header-row option='Month'></e-header-row>

        <e-header-row option='Week'></e-header-row>

        <e-header-row option='Date'></e-header-row>

        <e-header-row option='Year'>

          <ng-template #template let-data>

            <span>Test Feiertag</span>

          </ng-template>

        </e-header-row>

      </e-header-rows>

[app.component.css]

.e-schedule
.e-timeline-view
.e-date-header-wrap, .e-schedule
.e-timeline-month-view
.e-date-header-wrap{

  text-align: center;  /* to align the text in center */

}

Sample: https://stackblitz.com/edit/angular-r31jkl-bjqf6h?file=app.component.html,app.component.css

Output:

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

Regards,

Ruksar Moosa Sait

[Peter Linecker]

Hello Syncfusion-Team,

Unfortnuately the provided solution does not meet our requirements. The header rows have to be specified to the exact days.

For example the lower row is for special days, that means we have to be able to display special days for each day. In the provided example there is a special event displayed for the 18th to 22nd of June 2021 called "Test Feiertag". And in the upper header row we have to specify seasons for a period of days, for example 1st June till 1st September is the season "Nachsaison".

Is it possible to do so or could you please implement this feature in the next update?

Kind Regards, Peter

[Ruksar Moosa Sait]

Hi Peter,

Q1.In the upper header row we have to specify seasons for a period of days, for example 1st June till 1st September is the season "Nachsaison".

We have achieved your requirement with help of the month header row of the Schedule with the help of the below code snippet.

<e-header-row option='Month'>

          <ng-template #template let-data>

            <div [innerHTML]="getMonthHeaderText(data)"></div>

          </ng-template>

 </e-header-row>

public getMonthHeaderText(value: any): string {

    let monthValue = value.date.getMonth();

    if ([5, 6, 7, 8].indexOf(monthValue) > -1) {

      return '<div class="month-text">Nachsaion</div>';

    }

    else {

      return '<div class="month-text">You can customize for the other sessions</div>';

    }

  }

Q2.Special event displayed for the 18th to 22nd of June 2021 called "Test Feiertag"

You can achieve this by creating a span element appended to the year header row and setting its positions in the dataBound event of the scheduler like the below code to meet your requirement.

public dataBound(): void {

    document.querySelector('.e-header-year').innerHTML = '';

    for (var day of this.specialDaysData) {

      let time = (day.StartTime).getTime();

      let dateHeader = document.querySelector('[data-date="' + time + '"]');

      if (dateHeader) {

        let leftPosition = (dateHeader as HTMLElement).offsetLeft;

        let widthPosition = (dateHeader as HTMLElement).offsetWidth * ((day.EndTime.getTime() - day.StartTime.getTime()) / 86400000);

        let heightPosition = (dateHeader as HTMLElement).offsetHeight;

        let topPosition = (document.querySelector('.e-header-year-cell') as HTMLElement).offsetTop;

        let yearElement = document.querySelector('.e-header-year-cell');

        const span: HTMLElement = createElement('span', { className: 'span-text' });

        span.style.left = leftPosition + 'px';

        span.style.width = widthPosition + 'px';

        span.style.height = heightPosition + 'px';

        span.style.top = topPosition + 'px';

        span.style.position = 'absolute';

        span.style.backgroundColor = 'green';

        span.innerText = day.Subject;

        yearElement.appendChild(span);

      }

    }

  }

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

Output:

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

Regards,

Ruksar Moosa Sait