Our pure JavaScript Scheduler component


Post by sanid »

Hi Guys,

So after the update on newer version of Scheduler 4.3 I noticed that after Task is removed from the Scheduler it still remains visible.
Task disapears when scrolling...

Task visible.gif
Task visible.gif (566.05 KiB) Viewed 771 times

Is this rendering issue?


Post by mats »

How can we reproduce this? Do you see this in our online samples too?


Post by sanid »

Hi Mats, so all tasks and variable things come from store as Observables and are binded to Scheduler with async operator.

        <bry-scheduler #bycalendarschedule
            [events]="schedulerEvents$ | async" 
            [resources]="resources$ | async" 
            [resourceTimeRanges]="resourceVacations$ | async"
            [startDate]="startDate$ | async" 
            [endDate]="endDate$ | async"

Meaning when change in store happens scheduler should just re-render it.
If change is Add or Update to events in events Array - Scheduler renders it just fine.
If item is deleted from events Array - than event just hangs on Scheduler visible until Scheduler is scrolled / resized etc...

I give my best in creating simple reproduction demo project... Thanks


Post by sanid »

Hi Mats,

I managed to strip all unnecesarry features from my project and show this behaviour - demo project in attachment.

Important files:
scheduler.state.ts - Here I have test task event for today
scheduler-resources.state.ts - Here is my user - Resource
section-header.component.ts - triggers clear all events or add a new one...
section-main.component - where bryntum scheduler is added
Steps to reproduce:

  1. Click on Remove icon X in header - will remove all events from store
    It is possible to see curent state in store in Console - as "schedulerEvents"
  2. Click on group collapse, grid collapse or just resize window
    Event will disapear
Task visible Demo.gif
Task visible Demo.gif (753.04 KiB) Viewed 753 times

How to run project:
npm i
npm run start

Attachments
dispo-demo2.rar
(24.17 MiB) Downloaded 59 times

Post by alex.l »

I looked at your code and I see you used old wrapper. You have to update your SchedulerComponent too and use our version that you should import from the package instead of using old implementation:

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { BryntumSchedulerComponent } from '@bryntum/scheduler-angular';
import { Scheduler, SchedulerConfig } from '@bryntum/scheduler/scheduler.lite.umd.js';
import { schedulerConfig } from './scheduler.config';

@Component({
    selector    : 'app-scheduler',
    templateUrl : './scheduler.component.html',
    styleUrls   : ['./scheduler.component.scss']
})
export class SchedulerComponent implements AfterViewInit  {

@ViewChild(BryntumSchedulerComponent, { static : true }) schedulerComponent: BryntumSchedulerComponent | undefined;

scheduler: Scheduler | undefined;
public schedulerConfig: Partial<SchedulerConfig> = schedulerConfig

ngAfterViewInit(): void {
    this.scheduler = this.schedulerComponent.instance;
}
}

It has a new version of ng events handling, it should help you here.
Check our Angular examples, it already uses it.

All the best,
Alex


Post by sanid »

Hi Alex,

Thanks for the help,
How can I add this package @bryntum/scheduler-angular or where can I find it?
it is not on npm registry or in \build folder...

Sanid


Post by alex.l »

Take a look at our guide pls https://bryntum.com/docs/scheduler/guide/Scheduler/integration/angular#wrappers
Let me know if it helped.

All the best,
Alex


Post by sanid »

Is there any way to pass config from wrapper app-scheduler further to brynthum-scheduler component?


Post by alex.l »

If you need to get an instance, it has instance variable. Check the code example I posted above:

ngAfterViewInit(): void {
    this.scheduler = this.schedulerComponent.instance;
}

All the rest are described here: https://bryntum.com/docs/scheduler/guide/Scheduler/integration/angular#configs-properties-and-events

All the best,
Alex


Post by sanid »

Hi Alex,

with massive rafactoring effort I managed to migrate all configs to the wrapper and personaly think this is a step back in configurability...
However resourceTimeRanges is not working anymore.

Resource

{
areaIndex: 2
id: "T:2:1070"
index: 29
name: "Jahic Sanid"
technicianId: 1070
technicianName: "Jahic Sanid"
technicianShortcut: "SJA"
}
{
endDate: "2021-12-08"
id: 10
lendingid: -1
name: "Nicht verfügbar"
resourceId: "T:2:1070"
startDate: "2021-12-07"
timeRangeColor: "gray"
}

Is string format of Start and Enddate still correct?


Post Reply