Our pure JavaScript Scheduler component


Post by frederick45 »

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


Post by Animal »

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.


Post by Animal »

We'll try to make this consistent: https://github.com/bryntum/support/issues/5760


Post by frederick45 »

ok, so how to use in :

 me.tip.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>
                            `;

Post by Animal »

From that snippet of code, I cannot tell its context, what that code will do, and I also cannot tell what you are hoping it will do.

Please provide some context, surrounding code and an explanation of what you are wanting to achieve.


Post by frederick45 »

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 }) => {

Post by frederick45 »

                            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)


Post by frederick45 »

no idea ?


Post by alex.l »

All the best,
Alex


Post by frederick45 »

you don't answer to my question

this.scheduler.features.scheduleTooltip.hoverTip.showBy(context.element);

why it doesn't work, the size of the cellule is wrong


Post Reply