Weird scheduler behaviour on initial loading

[Julian Wandel]

Hello,

the modified schedule element is behaving weirdly in my angular application.

When I run my application, the scheduler layout doesn't show up correctly. There resources and appointment rows are disaligned and rows have different height:

Every time I click on the Button to change the time period, it's getting fixed:

Of course I want the schedule to be showed correctly after initialization.

Is there something I can do?

Thank you in advance.

Regards,

Julian

[Ravikumar Venkatesan]

Hi Julian,

Greetings from Syncfusion support.

We have validated your query “There resources and appointment rows are misaligned and rows have different heights” at our end. While we checking the issue we faced a rows misalignment problem and it can be resolved with help of the below-mentioned CSS and the same available in the shared sample.

[app.component.css]

.timeline-resource.e-schedule .e-timeline-view .e-resource-cells,

.timeline-resource.e-schedule .e-timeline-month-view .e-resource-cells {

  padding: 0;

}

Sample: https://stackblitz.com/edit/ej2-angular-scchedule-resource-header-template-sample?file=app.component.css

Kindly try the shared sample and if you still facing the same problem share the below details to provide a prompt solution for your issue.

• Share all schedule-related code snippets
• Reproduce the issue in the shared sample
• Share a simple issue replicating sample if possible

Regards,

Ravikumar Venkatesan

[Julian Wandel]

Hi Ravikumar,

thank your for your reply.
Unfortunately your css-code does not solve the problem.

I noticed today, that it's not happening on initial loading. The bug is just happening, when I refresh the page and also not always. Looks like it's random.

I'm going to share all related code snippets with you...

[planungsansicht2.component.html]

<ejs-schedule #scheduleObj width='100%' [(selectedDate)]="selectedDate" [eventSettings]="eventSettings" [group]="group"

[firstDayOfWeek]="1" (renderCell)='onRenderCell($event)' cssClass='timeline-resource-grouping' rowAutoHeight="true"

cssClass='schedule-cell-dimension' (renderCell)='onRenderCell($event)'>

<e-header-rows>

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

<ng-template #template let-data>

<span>{{data.date |date: 'MMMM yyyy'}}span>

ng-template>

e-header-row>

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

<ng-template #template let-data>

<span>KW {{data.date |date: 'w'}}span>

ng-template>

e-header-row>

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

<ng-template #template let-data>

<span>KW {{data.date |date: 'dd'}}span>

ng-template>

e-header-row>

e-header-rows>

<e-views>

<e-view displayName='Timeline Month' option='TimelineMonth' [interval]="monthInterval">e-view>

e-views>

<e-resources>

<e-resource field='ProjektleiterId' title='Choose Projektleiter' [dataSource]='projektleiterDataSource'

[allowMultiple]='true' name='Projektleiters' textField='text' idField='id' colorField='color'>

e-resource>

<e-resource field='TaskId' title='Category' [dataSource]='projektDataSource' [allowMultiple]='true' name='Projekte'

textField='text' idField='id' groupIDField='groupId' colorField='color'>

e-resource>

e-resources>

<ng-template #resourceHeaderTemplate let-data>

<div class='template-wrap' style="height: 100% !important;">

<ng-container *ngIf="!data.resourceData.groupId">

<div class="room-name">{{data.resourceData.text}}div>

ng-container>

<ng-container *ngIf="data.resourceData.groupId">

<table class="custom-table-resource">

<tr>

<td><span class="rotation">Jaspan>td>

<td><span class="rotation">Neinspan>td>

<td><span class="rotation">Jaspan>td>

<td><span class="rotation">Neinspan>td>

<td><span class="rotation">Jaspan>td>

<td><span class="rotation">Neinspan>td>

<td><span class="rotation">Jaspan>td>

<td><span class="rotation">Neinspan>td>

<td><span>1span>td>

<td style="width: 120px !important;"><span>22-123-12345-00span>td>

<td style="width: 180px !important;"><span>Testbauvorhaben, Musterort 05.05.span>td>

<td style="width: 80px !important;"><span style="display: block; max-height: 55px !important; text-align: center;">20.000 €span>td>

<td style="width: 80px !important;"><span style="display: block; max-height: 55px !important; text-align: center;">Typ 1, Produkt Xspan>td>

tr>

table>

ng-container>

div>

ng-template>

ejs-schedule>

[planungsansicht2.component.ts]

import { Component, OnInit } from '@angular/core';

import { EventSettingsModel, View, TimelineMonthService, ResizeService, DragAndDropService, GroupModel, TimelineViewsService, RenderCellEventArgs, EventRenderedArgs, TimeScaleModel, ScheduleComponent } from '@syncfusion/ej2-angular-schedule';

@Component({

selector: 'app-planungsansicht2',

providers: [TimelineMonthService, TimelineViewsService, ResizeService, DragAndDropService],

templateUrl: './planungsansicht2.component.html',

styleUrls: ['./planungsansicht2.component.scss']

})

export class Planungsansicht2Component implements OnInit {

public selectedDate: Date = new Date();

public monthInterval = 2;

public currentView: View = 'TimelineMonth';

// Resources Main Definition

public group: GroupModel = {

resources: ["Projektleiters", "Projekte"]

};

// Parent Resource Definition

public projektleiterDataSource: Object[] = [

{ text: "Projektleiter 1", id: 1, color: "#cb6bb2" },

{ text: "Projektleiter 2", id: 2, color: "#56ca85" },

{ text: "Projektleiter 3", id: 3, color: "#df5286" }

];

// Child Resource Definition

public projektDataSource: Object[] = [

{ text: "Projekt 1", id: 1, groupId: 1, color: "#df5286" },

{ text: "Projekt 2", id: 2, groupId: 1, color: "#7fa900" },

{ text: "Projekt 3", id: 3, groupId: 2, color: "#ea7a57" },

{ text: "Projekt 4", id: 4, groupId: 2, color: "#5978ee" },

{ text: "Projekt 5", id: 5, groupId: 3, color: "#df5286" },

{ text: "Projekt 6", id: 6, groupId: 3, color: "#00bdae" }

];

public eventSettings: EventSettingsModel = {

dataSource: [

{

Id: 1,

Subject: "Decoding",

StartTime: new Date(2022, 4, 5, 0, 0),

EndTime: new Date(2022, 4, 20, 0, 0),

ProjektleiterId: 2,

TaskId: 2,

type: 'Typ 1',

capacity: 30

},

{

Id: 2,

Subject: "Bug Automation",

StartTime: new Date(2022, 4, 5, 0, 0),

EndTime: new Date(2022, 4, 20, 0, 0),

ProjektleiterId: 2,

TaskId: 1,

type: 'Typ 1',

capacity: 30

},

{

Id: 3,

Subject: "Urlaub",

StartTime: new Date(2022, 4, 5, 0, 0),

EndTime: new Date(2022, 4, 20, 0, 0),

ProjektleiterId: 1,

type: 'Typ 1',

capacity: 30

},

{

Id: 4,

Subject: "Resolution-based testing",

StartTime: new Date(2022, 4, 5, 0, 0),

EndTime: new Date(2022, 4, 20, 0, 0),

ProjektleiterId: 2,

TaskId: 4,

type: 'Typ 1',

capacity: 30

},

{

Id: 5,

Subject: "Projektierungsphase 1",

StartTime: new Date(2022, 4, 5, 0, 0),

EndTime: new Date(2022, 4, 20, 0, 0),

ProjektleiterId: 1,

TaskId: 1,

type: 'Typ 1',

capacity: 30

},

{

Id: 6,

Subject: "Projektierungsphase 2",

StartTime: new Date(2022, 4, 5, 0, 0),

EndTime: new Date(2022, 4, 20, 0, 0),

ProjektleiterId: 1,

TaskId: 1,

type: 'Typ 1',

capacity: 30

}

]

};

constructor() { }

ngOnInit(): void {

this.selectedDate = new Date();

}

onRenderCell(args: RenderCellEventArgs):void {

// Headerzeile links wird definiert

if (args.elementType === 'emptyCells' && args.element.classList.contains('e-resource-left-td')) {

let target: HTMLElement = args.element.querySelector('.e-resource-text') as HTMLElement;

target.innerHTML = `

      <table class="custom-table-resource-header">

        <tr>

          <td><span class="rotation">Mehr./Mind.</span></td>

          <td><span class="rotation">ext. Vergabe</span></td>

          <td><span class="rotation">Ohne Montage</span></td>

          <td><span class="rotation">Dispo</span></td>

          <td><span class="rotation">Team</span></td>

          <td><span class="rotation">Besprechung</span></td>

          <td><span class="rotation">Palettierung</span></td>

          <td><span class="rotation">Silikonierung</span></td>

          <td><span class="rotation">1-5</span></td>

          <td style="width: 120px !important;"><span>BA-Nummer</span></td>

          <td style="width: 180px !important;"><span>Bauvorhaben</span></td>

          <td style="width: 80px !important;"><span>Wert</span></td>

          <td style="width: 80px !important;"><span>Typen</span></td>

        </tr>

      </table>`;

}

}

}

I've also made some customization to the schedule element in my styles.scss ...

[styles.scss]

// Wochenendtage dunkel färben

.e-work-cells:not(.e-work-days) {

background-color: #e6e6e685 !important;

}

.e-resource-text {

padding: 0px !important;

height: 105px;

}

.e-resource-left-td {

width: 720px !important; // Breite der linken Ansicht hier festlegen

}

// Resources header table

.custom-table-resource-header {

height: 105px;

border-collapse: collapse;

}

// single Resource header table

.custom-table-resource {

height: 100%;

border-collapse: collapse;

}

// Zellen des Resource headers + der single resource

.custom-table-resource-header td, .custom-table-resource td

{

text-align: center;

border: 1px solid lightgray;

border-top: none;

border-bottom: none;

font-weight: 500;

padding: 0px !important;

width: 20px !important;

white-space: normal;

}

.custom-table-resource-header td {

vertical-align: bottom;

}

.custom-table-resource td {

vertical-align: middle;

}

// rotierte Zelleninhalte

.custom-table-resource-header td .rotation, .custom-table-resource td .rotation

{

-ms-writing-mode: tb-rl;

-webkit-writing-mode: vertical-rl;

writing-mode: vertical-rl;

transform: rotate(180deg);

}

.custom-table-resource-header span, .custom-table-resource span {

font-size: 12px !important;

}

.e-resource-cells {

padding: 0px !important;

}

If you need further information, please let me know.

Thank you in advance.

Regards,

Julian

[Ravikumar Venkatesan]

Hi Julian,

Thanks for the update.

We have prepared a sample based on your shared code at our end and tried to reproduce the issue by performing refreshing the page, and performing CRUD operations with the Schedule appointments. But, we are unable to reproduce the issue on our end.

Sample: https://stackblitz.com/edit/ej2-angular-scchedule-resource-header-template-sa-dkoms2?file=app.component.html,app.component.ts,app.component.css

Kindly try to reproduce the issue in the above-shared sample and if you still facing the same problem share the below details to proceed further.

·         Issue reproducing steps or

·         Share a video demo that illustrates the issue

Regards,

Ravikumar Venkatesan

[Julian Wandel]

Hi Ravikumar, 

thank your for your reply and your provided example.

A few days ago I added real data to my application. Now the weird rendering isn't appearing any more.
But so far I also didn't add any events. Maybe this is the root of the problem. Or the declaration of the scheduler data, before the scheduler has even loaded.

I don't really know, why it's working now, but I'm glad.
If the weird rendering is happening again, I will let you know.

But there is another question, related to the scheduler element: how am I able to change the width of a displayed day in the timeline? I want to display a couple of days more, without having to scroll so much. Is that even possible?
I found nothing in the documentation so far.


Thank you in advance.

Regards,

Julian

[Satheesh Kumar Balasubramanian]

Hi Julian,

 

If the weird rendering is happening again, I will let you know.

 

If you face the same issue again. Please share the issue replication details clearly.

 

how am I able to change the width of a displayed day in the timeline? I want to display a couple of days more, without having to scroll so much. Is that even possible?

 

 We let you know that by default timeline day view has width as auto(50px). Based on cells width, scroll bar will appear. If you want to customize the width, override it using the below css,

 

///

.e-schedule .e-timeline-view .e-date-header-wrap table col,

.e-schedule .e-timeline-view .e-content-wrap table col,

.e-schedule .e-timeline-month-view .e-date-header-wrap table col,

.e-schedule .e-timeline-month-view .e-content-wrap table col {

    width: 30px;

}

 

///

Please let us know for further assistance.

 

Regards,

Satheesh Kumar B