Our pure JavaScript Scheduler component


Post by tomerPlanit »

Hey there.
We're working with Bryntum Scheduler on an Angular 8 project.

We have a requirement, to Auto-Resize a specific Resource Height automatically in 2 cases:
1. When the Text inside an Event Text is taking more than predefined height (see sketch 1).
2. When there are parallel jobs that are one on top of the other (see sketch 2).

The height of the resource should be bigger for those specific resources only.

Is it possible somehow using the current options? So far we've figured out how to change the RowHeight property which affects ALL the resources, which doesn't fit our requirement.

Please suggest a solution.

The screenshot is from our old version (Windows Forms), but illustrates the solution we need.
MicrosoftTeams-image.png
MicrosoftTeams-image.png (173.8 KiB) Viewed 2418 times

Post by saki »

#2 works out of the box. You can see it here: https://bryntum.com/examples/scheduler/basic/, just drag some events to one resource.
Screen Shot 2020-03-30 at 09.22.01.png
Screen Shot 2020-03-30 at 09.22.01.png (132.07 KiB) Viewed 2409 times
For #1 I have created a feature request here: https://github.com/bryntum/support/issues/489

You could also implement it yourself as there is a property to set: rowHeight on individual rows. You would only need to calculate the correct height at then set it by assigning the new new value to this property.

Post by tomerPlanit »

Thanks for the quick reply.
We'll check the suggested solutions and if it works for us.

Thanks, keep safe.

Post by tomerPlanit »

Hi what is the best way to get event's height?(Maybe you provide some way).

Post by saki »

I'd probably have it rendered and then I'd take the height from the DOM element. I hope this wouldn't cause any flickering or visual artifacts.

Post by tomerPlanit »

After I changed the row height like as you say i got a problem in all changed resources the event's translate didn't change.(all events go up).

After store update i do this
My code:
async changeRowHeigt(scheduler: Scheduler, ganttId: number) {
        this.storeService.getApplicationParametersPromise().then((applicationParameters: IApplicationParametersDTO[]) => {
            setTimeout(() => {
                if (scheduler.eventLayout === 'mixed') {
                    scheduler.resourceStore.getRange().forEach((resource: GanttResource) => {
                        const maxHeight = this.findMaxJobHeight(scheduler.eventStore.getEventsForResource(resource.get('id')), ganttId);

                        if (maxHeight) {
                            resource.beginBatch();
                            resource.set('rowHeight', maxHeight);
                            resource.endBatch();
                            this.changeJobsPosition(scheduler.eventStore.getEventsForResource(resource.get('id')), ganttId);
                        }
                    });
                }
            }, 20);
            scheduler.renderRows();
            this.changeResourcesStyle((scheduler.resourceStore.getRange() as GanttResource[]), applicationParameters);
        });
    }
    
    
     findMaxJobHeight(jobs: GanttJob[], ganttId: number): number {
        let maxHeigt: number;
        jobs.forEach((job: GanttJob) => {
            const element = (document.querySelector(`.scheduler${ganttId} .id${job.get('id')}`) as HTMLElement);
            if (element) {
                const height: number = (document.querySelector(`.scheduler${ganttId} .id${job.get('id')}`) as HTMLElement).getBoundingClientRect().height;
                if (maxHeigt < height && maxHeigt) {
                    maxHeigt = height + 5;
                } else {
                    maxHeigt = height + 5;
                }
            }
        });
        return maxHeigt;

    }

How can i solve it?
Attachments
rowHeight.png
rowHeight.png (51.4 KiB) Viewed 2352 times

Post by saki »

I get this behavior when I do it manually:
row-height.gif
row-height.gif (629.45 KiB) Viewed 2350 times
The event is aligned to top of the row (+barMargin) so it should work also for you. Have you implemented any custom event-alignment logic or CSS rules that could affect this default behavior?

Post by tomerPlanit »

I have this css:
::ng-deep .b-sch-event {
  height: fit-content !important;
  opacity: 1 !important;
  overflow: visible;
}
because the data inside the event didn't change the event size.

My event renderer:
eventRenderer: (event: { eventRecord: GanttJob, resourceRecord: ResourceModel, tplData: object }) => {
                return `
              <div class="job-data" style="text-align:${event.eventRecord.get('textAlign')}; direction:${event.eventRecord.get('direction')};>
                <div style="font-size:${event.eventRecord.get('fontSize')}rem;">
                    <span class="mat-icon notranslate material-icons mat-icon-no-color" style="width: unset; height: unset;font-size:100%; min-width:unset; min-height:unset;display:${event.eventRecord.get('link')};">
                        <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" width="0.7rem" height="0.7rem" viewBox="0 0 24 24"><path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" /></svg>
                    </span>
                    <span class="mat-icon notranslate material-icons mat-icon-no-color" style="width: unset; height: unset; font-size:100%;min-width:unset;min-height:unset;display:${event.eventRecord.get('lock')};">
                        <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" width="0.7rem" height="0.7rem" viewBox="0 0 24 24"><path d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" /></svg>
                    </span>
                    ${event.eventRecord.get('id')}
                    ${event.eventRecord.name}
                </div>
                <div style="font-size:${event.eventRecord.get('fontSize') * 0.8}rem;">
                  ${this.changeTextToHtmlFormat(event.eventRecord.get('description'))}
                </div>
              </div>`;
            }
After i delete this css i got what in the picture.
How can i make the event to be in the size of his content?
Attachments
2.png
2.png (25.81 KiB) Viewed 2349 times

Post by saki »

/* text wrapping */
.b-sch-event {
    white-space:normal;
}
As to height it would be best to set it programmatically but you could also use the following CSS:
.b-sch-event-wrap {
    height: auto !important;
}
That would change the height of all events. You could combine it with min-height to achieve quite nice result:
.b-sch-event-wrap {
    height: auto !important;
    min-height:40px;
}
Screen Shot 2020-04-01 at 16.22.09.png
Screen Shot 2020-04-01 at 16.22.09.png (90.88 KiB) Viewed 2331 times

Post by tomerPlanit »

Thanks so much everything works.

Post Reply