Team,
Is it possible to have a tooltip on the TimeRanges to show its name on hovering?
Hello!
It's not supported out of the box. I've opened a feature request: https://github.com/bryntum/support/issues/1069
If you add a tooltip like this:
import Tooltip from '../../lib/Core/widget/Tooltip.js';
new Tooltip({
forSelector : '.b-sch-timerange',
getHtml : ({ tip, element, activeTarget, event }) => {
const
timeRangeId = activeTarget.dataset.id,
timeRangeRecord = scheduler.features.timeRanges.store.getById(timeRangeId);
return timeRangeRecord.name;
}
});
It will work for the header of the rime ranges only. To make it work for ranges too, you can try to set pointer-events:
<style>
.b-sch-timerange.b-sch-range {
pointer-events: all;
}
</style>
Though then the ranges become clickable and you will not be able to drag create a new event where you have a resource.
Hope this will help you to achieve what you need!
Best,
Pavel
Pavlo Miklashevych
Sr. Frontend Developer
Hi Pavel,
I was able to display the name of the TimeRange in the tooltip.
However, I could not get this part of your explaination
It will work for the header of the rime ranges only. To make it work for ranges too, you can try to set pointer-events:
CODE: SELECT ALL
<style> .b-sch-timerange.b-sch-range { pointer-events: all; } </style>
Though then the ranges become clickable and you will not be able to drag create a new event where you have a resource.
Could you explain in a bit simpler terms again?
Hello, i am using bryntum scheduler as angular wrapper, can you suggest and help, how can i implement this with typescript
pmiklashevich wrote: ↑Fri Jun 26, 2020 7:49 pmHello!
It's not supported out of the box. I've opened a feature request: https://github.com/bryntum/support/issues/1069
If you add a tooltip like this:
import Tooltip from '../../lib/Core/widget/Tooltip.js'; new Tooltip({ forSelector : '.b-sch-timerange', getHtml : ({ tip, element, activeTarget, event }) => { const timeRangeId = activeTarget.dataset.id, timeRangeRecord = scheduler.features.timeRanges.store.getById(timeRangeId); return timeRangeRecord.name; } });
It will work for the header of the rime ranges only. To make it work for ranges too, you can try to set pointer-events:
<style> .b-sch-timerange.b-sch-range { pointer-events: all; } </style>
Though then the ranges become clickable and you will not be able to drag create a new event where you have a resource.
Hope this will help you to achieve what you need!
Best,
Pavel
Let's take angular-8 demo for example. Please open Scheduler/examples/angular/angular-8/src/app/app.component.ts
See "ngAfterViewInit" function. Here you can place javascript code ("new Tooltip({..."). And styles can be placed in Scheduler/examples/angular/angular-8/src/app/app.component.scss
Pavlo Miklashevych
Sr. Frontend Developer