how can i use resourceTimeRangesFeature and resourceTimeRanges in my scheduler

[Haitham1992]

i use the last version from Bryntum scheduler with Angular 7 and ich cann't use resourceTimeRangesFeature
when i use it i get the Error
- "Feature "resourceTimeRangesFeature" not available, make sure you have imported it"
and this error "Cannot set property 'displayDateFormat' of undefined"

my scheduler like this

private featureInputs = [
    'cellEdit', 'columnLines', 'dependencies', 'eventDrag', 'eventContextMenu', 'eventDragCreate', 'eventEdit', 'eventFilter',
    'eventResize', 'eventTooltip', 'group', 'groupSummary', 'headerContextMenu', 'labels', 'nonWorkingTime', 'scheduleTooltip',
    'sort', 'summary', 'stripe', 'timeRanges','resourceTimeRangesFeature'
  ];

  // Available configs
  private configInputs = ['autoHeight', 'barMargin', 'columns', 'emptyText', 'endDate', 'events', 'eventColor',
    'eventLayout', 'eventStyle', 'eventRenderer', 'height', 'minHeight', 'minWidth', 'resources', 'readOnly',
    'rowHeight', 'responsiveLevels', 'viewPreset', 'startDate',"resourceTimeRanges",
  ];

[code] // Configs
  @Input() autoHeight: boolean = false;
  @Input() barMargin: number = 5;
  @Input() columns: object[];
  @Input() emptyText: string;
  @Input() endDate: any;
  @Input() events: object[];
  @Input() eventColor: string;
  @Input() eventLayout: string;
  @Input() eventStyle: string;
  @Input() eventRenderer: any;
  @Input() height: number | string;
  @Input() minHeight: number | string;
  @Input() minWidth: number | string;
  @Input() resources: object[];
  @Input() readOnly: boolean = false;
  @Input() responsiveLevels: any;
  @Input() rowHeight: number = 50;
  @Input() startDate: any;
  @Input() viewPreset: string = 'hourAndDay';
  @Input() width: number | string;
  @Input() resourceTimeRanges: object;  // Features, only used for initialization
  @Input() cellEdit: boolean | object = true;
  @Input() columnLines: boolean | object = true;
  @Input() dependencies: boolean | object = false;
  @Input() eventDrag: boolean | object = true;
  @Input() eventContextMenu: boolean | object = true;
  @Input() eventDragCreate: boolean | object = true;
  @Input() eventEdit: boolean | object = true;
  @Input() eventFilter: boolean | object = true;
  @Input() eventResize: boolean | object = true;
  @Input() eventTooltip: boolean | object = true;
  @Input() group: boolean | object | string = true;
  @Input() groupSummary: boolean | object;
  @Input() headerContextMenu: boolean | object;
  @Input() labels: boolean | object;
  @Input() nonWorkingTime: boolean;
  @Input() scheduleTooltip: boolean | object = true;
  @Input() sort: boolean | object | string = true;
  @Input() summary: boolean | object;
  @Input() stripe: boolean;
  @Input() timeRanges: boolean | object[] = true;
  @Input() resourceTimeRangesFeature: boolean;
  @Output() selectedEvent: string = '';
  @Output() onSchedulerEvents = new EventEmitter<object>();

[/code]

<scheduler
          #scheduler
          [rowHeight]="20"
          [minHeight]=20
          [barMargin]="barMargin"
          [events]="events"
          [resources]="resources"
          [timeRanges]="timeRanges"
          [startDate]="startDate"
          [endDate]="endDate"
          [columns]="columns"
          eventColor="green"
          eventStyle="border"
          [viewPreset]="viewPreset2"
          [eventRenderer]="eventRenderer"
          [eventEdit]="eventEdit"
          [nonWorkingTime]=true
          [resourceTimeRangesFeature]=true
          [resourceTimeRanges]="resourceTimeRanges"
          (onSchedulerEvents)="onSchedulerEvents($event)"
  ></scheduler>

[pmiklashevich]

Hello,

This error usually happens when you import classes individually and forget to import a feature you use. But in our angular demos we load UMD bundle which has all features inside. We have an example of using resourceTimeRanges feature. It's angular basic demo. If you open package.json you'll see it's based on angular7. Please check out https://bryntum.com/examples/scheduler/angular/basic/dist/basic/index.html
You can find it in examples/angular/basic locally. Please try to get it running and make sure resource time ranges feature works. To do it first need to build wrapper. Go to examples/angular/_shared and run "npm install" and "npm run build", then go to "examples/angular/basic" and run "npm install" and "npm run start".
Let us know please if it works for you.

Please also check out this guide: https://www.bryntum.com/docs/scheduler/#guides/integration/angular.md
Pay attention to "Integrating Scheduler with Angular using the wrapper" chapter which describes how to use the wrapper and to the list of "Supported features". resourceTimeRangesFeature is there.

If you still experience any problem with setting your application up, please zip it up and attach here, so we can take a look and suggest how to make it work.

Cheers,
Pavel

[pmiklashevich]

Here I'll leave instructions for you of how to enable resourceTimeRanges in angular-7 demo.
1. Add data to examples/angular/angular-7/src/assets/data/data.json

  "resourceTimeRanges" : {
    "rows" : [
      { "id" : 1, "resourceId" : "a", "startDate" : "2018-02-07T08:00", "endDate" : "2018-02-07T14:00", "name" : "Lunch" },
      { "id" : 2, "resourceId" : "b", "startDate" : "2018-02-07T06:00", "endDate" : "2018-02-07T11:00", "name" : "AFK (uses timeRangeColor)", "timeRangeColor" : "red" },
      { "id" : 3, "resourceId" : "c", "startDate" : "2018-02-07T06:00", "endDate" : "2018-02-07T20:00", "name" : "Parental leave (custom CSS)", "cls" : "custom" }
    ]
  }

2. enable feature and sett data in examples/angular/angular-7/src/app/app.component.ts

export class AppComponent implements AfterViewInit {
.....
  resourceTimeRanges = true; // this will be replaced by data below (see getData function)
  resourceTimeRangesFeature = true; // this tells the feature to be enabled (goes to the wrapper)
  .....
  
// fetch data for the scheduler
  getData() {
    const me = this;

    me.http.get('./assets/data/data.json').subscribe(data => {
      me.resources = data['resources'].rows;
      me.events = data['events'].rows;
      me.timeRanges = data['timeRanges'].rows;
      me.resourceTimeRanges = data['resourceTimeRanges'].rows; // set data to scheduler
    });
  }

3. Set values to bry-scheduler component examples/angular/angular-7/src/app/app.component.html

<bry-scheduler
  #scheduler
  [resourceTimeRanges] = "resourceTimeRanges"
  [resourceTimeRangesFeature] = "resourceTimeRangesFeature"
  ....

4. Build _shared and angular-7 folders.

That's it. Give it a try please.

Cheers!

[Haitham1992]

thank you it work now ,but how can i add tooltip to this "resourceTimeRanges"

[sergey.maltsev]

Hi, Haitham1992!

Please take a look at CellTooltip feature. Sample code also can be found there.
https://www.bryntum.com/docs/scheduler/#Grid/feature/CellTooltip

[Haitham1992]

Hi ,
i have tried to use cell tooltip but doesn't work, I want to know How can i add ToolTip for this resourceTimeRanges and i cann't use tooltipRenderer

[sergey.maltsev]

Hi!

Please create a new post on each new question.

ResourceTimeRanges currently doesn't support tooltips config.
You could implement it yourself with a custom ToolTip widget for .b-sch-resourcetimerange css selector.
https://www.bryntum.com/docs/grid/#Common/widget/Tooltip

Simple sample code

new ToolTip({
    anchorToTarget : false,
    hoverDelay     : 0,
    forSelector    : '.b-sch-resourcetimerange',
    getHtml        : ({ tip, element, forElement, x, y, event }) => {
        // we could get timerange id from forElement.dataset.eventId which is like resourcetimerange-xxx 
        let match;
        if ((match = forElement.dataset.eventId.match(/resourcetimerange-(.*)/))) {
            const timeRange = scheduler.resourceTimeRangeStore.getById(match[1]);
            return `<div>${timeRange.name}</div>`;
        }
    }
});

Don't forget to add this styling to your application. Otherwise resourcetimerange won't get mouse pointer events.

	<style>
		.b-sch-resourcetimerange {
			pointer-events: all
		}
	</style>

[Haitham1992]

thank you sergey.maltsev ,
but sorry i did'n find where must i add this code

[sergey.maltsev]

Hi!

You should put it where you need to enable ToolTips.
For example just right after creating a Scheduler instance.

scheduler = new Scheduler() {...}
new ToolTip({...});

[Haitham1992]

do you mean like this

window.scheduler.features.tooltip.disabled=false;
        window.scheduler.features.tooltip= new ToolTip({
            anchorToTarget : false,
            hoverDelay     : 0,
            forSelector    : '.b-sch-resourcetimerange',
            getHtml        : ({ tip, element, forElement, x, y, event }) => {
                // we could get timerange id from forElement.dataset.eventId which is like resourcetimerange-xxx 
                let match;
                if ((match = forElement.dataset.eventId.match(/resourcetimerange-(.*)/))) {
                    const timeRange = window.scheduler.resourceTimeRangeStore.getById(match[1]);
                    return `<div>${timeRange.name}</div>`;
                }
            }
        })

but there is error "Cannot find name 'ToolTip'"