hi,
i created a scheduler in my lwc like this :
this.scheduler = new bryntum.scheduler.Scheduler({
flex : 40,
features: {
scheduleTooltip: true,
how to get the tooltip in my code ?
BR
scheduler.features.scheduleTooltip.hoverTip
should work.
This is not documented, so we will fix this.
However it will probably be under a different name. Other Features which show a tooltip have a tooltip
public property, so this Feature should too.
The EventTooltip feature exposes it as tooltip.
We'll try to make this consistent: https://github.com/bryntum/support/issues/5760
yes of course :
createDrag()
{
this.Drag = new bryntum.scheduler.DragHelper (
{
cloneTarget : true,
mode : 'translateXY',
dropTargetSelector : '.b-timeline-subgrid',
targetSelector : '.b-grid-row:not(.b-group-row)',
grid : this.UnplannedGrid,
schedule : this.scheduler,
constrain : false,
outerElement : this.UnplannedGrid.element,
afterConstruct() {
// Configure DragHelper with schedule's scrollManager to allow scrolling while dragging
this.scrollManager = this.schedule.scrollManager;
},
createProxy(element) {
const
proxy = document.createElement('div'),
task = this.grid.getRecordFromElement(element),
durationInPx = this.schedule.timeAxisViewModel.getDistanceForDuration(task.duration);
// Fake an event bar
proxy.classList.add('b-sch-event-wrap', 'b-sch-event', 'b-unassigned-class', 'b-sch-${schedule.mode}');
proxy.innerHTML = `<div class="b-sch-event b-has-content b-sch-event-withicon">
<div class="b-sch-event-content">
<i class="${task.iconCls}"></i> ${task.name}
</div>
</div>`;
if (this.schedule.isHorizontal) {
proxy.style.height = '${this.schedule.rowHeight - (2 * this.schedule.resourceMargin)}px';
proxy.style.width = '${durationInPx}px';
}
else {
proxy.style.height = `${durationInPx}px`;
proxy.style.width = `${this.schedule.resourceColumnWidth}px`;
}
return proxy;
},
listeners: {
dragstart: ({context}) => {
context.task = this.UnplannedGrid.getRecordFromElement(context.grabbed);
},
drag: ({event, context}) => {
const coordinate = bryntum.scheduler.DomHelper[`getTranslate${this.scheduler.isHorizontal ? 'X' : 'Y'}`](context.element);
//console.log('coordinate:'+coordinate);
const startDate = this.scheduler.getDateFromCoordinate(coordinate, 'round', false);
//console.log('startDate:'+startDate);
const task = context.task;
const endDate = startDate && bryntum.scheduler.DateHelper.add(startDate, task.duration, 'Unit:ms');
//console.log('endDate:'+endDate);
const resource = context.target && this.scheduler.resolveResourceRecord(context.target, [event.offsetX, event.offsetY]);
// Don't allow drops anywhere, only allow drops if the drop is on the timeaxis and on top of a Resource
context.valid = Boolean(startDate && resource) &&
(this.scheduler.allowOverlap || this.scheduler.isDateRangeAvailable(startDate, endDate, null, resource));
context.resource = resource;
console.log('scheduleTooltip:'+this.scheduler.features.scheduleTooltip.hoverTip);
console.log('this.scheduler.features.scheduleTooltip.hoverTip.html:'+this.scheduler.features.scheduleTooltip.hoverTip.html);
//if (me.tip && context.valid) {
if ( context.valid) {
const
dateFormat = this.scheduler.displayDateFormat,
formattedStartDate = bryntum.scheduler.DateHelper.format(startDate, dateFormat),
formattedEndDate = bryntum.scheduler.DateHelper.format(endDate, dateFormat);
this.scheduler.features.scheduleTooltip.hoverTip.html = `
<div class="b-sch-event-title">${task.name}</div>
<div class="b-sch-tooltip-startdate">Starts: ${formattedStartDate}</div>
<div class="b-sch-tooltip-enddate">Ends: ${formattedEndDate}</div>
`;
this.scheduler.features.scheduleTooltip.hoverTip.showBy(context.element);
}
else {
this.scheduler.features.scheduleTooltip.hoverTip?.hide();
}
},
drop: ({ context, event }) => {
this.scheduler.features.scheduleTooltip.hoverTip.html = `
<div class="b-sch-event-title">${task.name}</div>
<div class="b-sch-tooltip-startdate">Starts: ${formattedStartDate}</div>
<div class="b-sch-tooltip-enddate">Ends: ${formattedEndDate}</div>
`;
//console.log('this.scheduler.features. 1111:'+this.scheduler.features.scheduleTooltip.hoverTip.html);
//<div class="b-sch-event-title">VI-000002</div>
//<div class="b-sch-tooltip-startdate">Starts: Dec 14, 2022 6 AM</div>
//<div class="b-sch-tooltip-enddate">Ends: Dec 14, 2022 6 AM</div>
this.scheduler.features.scheduleTooltip.hoverTip.showBy(context.element);
the last line doesn't work (showby)
Please see docs https://bryntum.com/products/scheduler/docs/api/Scheduler/feature/ScheduleTooltip
There are examples how to customize tooltip
https://bryntum.com/products/scheduler/docs/api/Scheduler/feature/ScheduleTooltip#function-generateTipContent
If you want to add custom tooltip and attach to HTML element, you need to add Tooltip
See docs here https://bryntum.com/products/scheduler/docs/api/Core/widget/Tooltip
All the best,
Alex