Our pure JavaScript Scheduler component


Post by Silagy »

I am trying to enable the resourceTimeRange in the Scheduler 2.0 angular version.

I followed this API document
https://www.bryntum.com/docs/scheduler/ ... TimeRanges

I have tried the following (none worked)

Extending the schedule.component
  • I added the 'resourceTimeRange' to the featureInputs array
  • I added a new object
    @Input() resourceTimeRange: boolean | object[] = false;
  • I set it up in the controller but nothing is presented.
I looked at the document and it seems like you need to enable the resourceTimeRange under features and then provide an array of timeRange.
So, I also did that
this.scheduler.schedulerEngine.features.resourceTimeRanges = true;
    this.scheduler.schedulerEngine.resourceTimeRanges = this.resourceTimeRanges;
But this is undefined:
this.scheduler.schedulerEngine.resourceTimeRanges

Post by mats »

Seems misspellt?
@Input() resourceTimeRange: boolean | object[] = false;
should be
@Input() resourceTimeRanges: boolean | object[] = false;

Post by Silagy »

Unfortunately it wasn't the case.

I fixed all the spelling.

This is what I did:
Added the resourceTimeRanges to the features list as follow:
  private featureInputs = [
    'cellEdit', 'cellTooltip', 'columnLines', 'columnPicker', 'columnReorder', 'columnResize', 'contextMenu',
    'dependencies', 'eventDrag', 'eventContextMenu', 'eventDragCreate', 'eventEdit',
    'eventFilter', 'eventResize', 'eventTooltip', 'filter', 'filterBar', 'group', 'groupSummary', 'headerContextMenu', 'labels',
    'nonWorkingTime', 'regionResize', 'search', 'scheduleTooltip', 'sort', 'stripe', 'summary', 'timeRanges', 'tree', 'scheduleContextMenu',
    'resourceTimeRanges'
  ];


I added a variable to store the resourceTimeRanges as follow:
  @Input() resourceTimeRanges: boolean | object[] = false;
I created a list of resourceTimeRanges see picture:
Image
https://drive.google.com/file/d/1RQ39Oq ... sp=sharing

I added the resourceTimeRanges to my own component
  <app-scheduler #scheduler class="scheduler" [rowHeight]=60 [minHeight]=100 [barMargin]="barMargin" [events]="events"
    [resources]="resources" [timeRanges]="timeRanges" [startDate]="startDate" [endDate]="endDate" [columns]="columns"
    eventColor="green" eventStyle="border" [scheduleContextMenu]="false" [eventRenderer]="eventRenderer"
    [cellEdit]="false" [eventEdit]="false" [eventResize]="false" [eventDrag]="false" [contextMenu]="this.contextMenu"
    [tree]="true" [eventDragCreate]="false" [viewPreset]="this.ViewPreset" [nonWorkingTime]="true"
    [resourceTimeRanges]="this.resourceTimeRanges" (onSchedulerEvents)="onSchedulerEvents($event)">
  </app-scheduler>

Post by Silagy »

Any idea?

Post by saki »

Hello Silagy,

I'll investigate the issue and I'll add resourceTimeRanges to one of our Angular examples. I should have some results by the end of this week.

Post by Silagy »

Thanks!

Post by Silagy »

Any progress on this?

Post by Silagy »

Any update?

Post by Silagy »

When do you think you will have an answer?

Post by saki »

Sorry for the delay.

It was necessary to adjust the Angular wrapper slightly, but I made it working.

You need to run
cd _shared
npm run build
cd ../basic
npm start
to compile and run the example.
Attachments
ranges.zip
(4.69 MiB) Downloaded 111 times

Post Reply