Our pure JavaScript Scheduler component


Post by sygmatel »

Hi !

I'ld like to customize the tooltip shown on event resize the same way EventDrag tooltip and EventTooltip are customized, e.g. passing a template function that can access event data and returns html to render.

Here is the configs I tried so far, but none of these work :

        eventResizeFeature={{
        // using html tip attribute : no error, but doesn't change the tooltip
          tip: {
            html: this.tooltipTemplate
          }, 
        // using template tip attribute : no error, but doesn't change the tooltip
          tip: {
            template: this.tooltipTemplate
          }, 
          // instantiating a new Tootip object and defining html : rises an error on scheduler initialization
          // scheduler.umd.js:44618 Uncaught TypeError: Cannot read property 'prototype' of undefined
    	  // at Function.isEqual (scheduler.umd.js:44618)
          tip: new Tooltip({
            html: this.tooltipTemplate,
          }),
          // instantiating a new Tootip object and defining template : rises an error on scheduler initialization
          // scheduler.umd.js:44618 Uncaught TypeError: Cannot read property 'prototype' of undefined
    	  // at Function.isEqual (scheduler.umd.js:44618)
          tip: new Tooltip({
            template: this.tooltipTemplate,
          }),
        }}

Thanks in advance for your help !


Post by pmiklashevich »

Hello,

There is no "template" config on the Tooltip class.

There is a problem with html settings for the default tooltip, ticket here: https://github.com/bryntum/support/issues/2243

I see no issues with the Tooltip instance. You can try in our Simple demo in Scheduler:
Scheduler/examples/react/javascript/simple/src/App.js

// Bryntum libraries
import { Toast, Tooltip } from 'bryntum-scheduler/scheduler.umd';
....
    // Scheduler configuration
    const schedulerConfig = {
        eventResizeFeature : {
            // try one of these
            tip : new Tooltip({
                html : '<b>Test</b>'
            })
            // tip : new Tooltip({
            //     getHtml({ tip, element, activeTarget, event }) {
            //         return '<b>Test</b>';
            //     }
            // })
        },

Please update to the latest scheduler and try the code in our demo. Let me know if it works for you.

It's not clear what this.tooltipTemplate in your application is. If you still see the exception, please provide a runnable testcase showing the issue.

Best,
Pavel

Pavel Miklashevich - Core Developer

Post by sygmatel »

Hi Pavel !

Thanks for your answer. Already updated the scheduer to v4.0.7 yesterday. I've tried your code in my application but unfortunatly it doesn't work either. I wanted to try it in your simple React demo but I've got trouble installing node-sass, seems to require Visual Studio installed since it rises an C++ error (and React online demos are not editable). I'll try to fix that to let your know if it works on simple demo, but I can't see why such a simple test would work in the demo and not in my app.

this.tooltipTemplate refers to my template function defined in my React class component where the BryntumScheduler component is rendered. The template function take tooltip data in params and return html as mentioned here :
https://www.bryntum.com/docs/scheduler/#Scheduler/feature/EventTooltip#config-template
and there :
https://www.bryntum.com/docs/scheduler/#Scheduler/feature/EventDrag#config-dragTipTemplate
I use it to render my event tooltip for EventDrag and EventTooltip features depending on event's and resouce's data, and wanted to do the same for the EventResize feature.

Anyway, I need my tooltip to use event's data so that's a pity you didn't provide a template config attribute for the EventResize feature since you provide it for EventDrag and EventTooltip features and the solution you just gave me only allow a static html implementation. Do you plan to implement this in the future ?

By the way, I was wondering why EventDrag and EventResize features don't use the tooltip of the EventTooltip feature since both are also related to events ?
It would make sense to me that Scheduler uses the EventTooltip (if defined) to display EventDrag and EventResize tooltips if feature-specialized tooltip configs aren't declared for these features. (This is more a suggestion than a question.)

Have a nice week end !


Post by pmiklashevich »

Ah, I see now. There is "tipTemplate" but it is private. We will consider making it public, and probably will change the name to match other features. Thanks for the feedback. Ticket here: https://github.com/bryntum/support/issues/2244

I wanted to try it in your simple React demo but I've got trouble installing node-sass, seems to require Visual Studio installed since it rises an C++ error

Regarding the failure. There is no C++ requirements. node-sass is deprecated but this is a known problem. Nevertheless the demo should work. First please remove node_modules and package-lock.json file and try to rebuild. If it doesn't help, please try to downgrade the node. I use 10.19. Let me know if it works for you. If not, please provide full info of the steps, full error message and your OS/environment. You should be able to run all demos locally.

Pavel Miklashevich - Core Developer

Post by sygmatel »

Hi !

Thank you for your answer ! I tried to config the tipTemplate using my template function and it seems to work (it does call this.tooltipTemplate) :

        eventResizeFeature={{
          tipTemplate: this.tooltipTemplate,
        }}

However, it doesn't pass the event and resource data as params of my template function. I only get the default params, here is a log of the params received by this.templateTooltip on event resize :

{
	endClockHtml: "<div class="b-sch-clockwrap b-sch-clock-hour b-sch-tooltip-enddate">↵                    <div class="b-sch-clock">↵                        <div class="b-sch-hour-indicator">janv.</div>↵                        <div class="b-sch-minute-indicator">16</div>↵                        <div class="b-sch-clock-dot"></div>↵                    </div>↵                    <span class="b-sch-clock-text">16 janv. 2021 2:30</span>↵                </div>"
	endDate: Sat Jan 16 2021 02:30:00 GMT+0100 (heure normale d’Europe centrale) {}
	endText: "16 janv. 2021 2:30"
	message: "L'intervention du 15/01/21 - 10:30 ne peut être chevauchée !"
	startClockHtml: "<div class="b-sch-clockwrap b-sch-clock-hour b-sch-tooltip-startdate">↵                    <div class="b-sch-clock">↵                        <div class="b-sch-hour-indicator">janv.</div>↵                        <div class="b-sch-minute-indicator">15</div>↵                        <div class="b-sch-clock-dot"></div>↵                    </div>↵                    <span class="b-sch-clock-text">15 janv. 2021 11:00</span>↵                </div>"
	startDate: Fri Jan 15 2021 11:00:00 GMT+0100 (heure normale d’Europe centrale) {}
	startText: "15 janv. 2021 11:00"
	valid: false
}

I guess it's because it's private and not designed to be used with event's data. Is there any small modification I can make in Bryntum Scheduler code to make the data available in the function (as it is in other tooltip template config functions) ? At least until you fix it in the next release.

I made the simple demo work (I removed the node-sass dev dependency from the package.json) and the code you provided me does work aswell on the simple demo. However it doesn't in my app (both tip config you gave me), here is the error (rised during scheduler init) :

scheduler.umd.js:44618 Uncaught TypeError: Cannot read property 'prototype' of undefined
    at Function.isEqual (scheduler.umd.js:44618)
    at Function.isDeeplyEqual (scheduler.umd.js:44711)
    at Function.isEqual (scheduler.umd.js:44619)
    at Function.isDeeplyEqual (scheduler.umd.js:44711)
    at BryntumScheduler.js:359
    at Array.forEach (<anonymous>)
    at BryntumScheduler.shouldComponentUpdate (BryntumScheduler.js:355)
    at checkShouldComponentUpdate (react-dom.development.js:12694)
    at updateClassInstance (react-dom.development.js:13211)
    at updateClassComponent (react-dom.development.js:17107)
    at beginWork (react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at Object.enqueueSetState (react-dom.development.js:12639)
    at AsyncComponent.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:471)
    at AsyncComponent.componentDidMount (Async.js:21)
16:38:33.458 index.js:1 The above error occurred in the <BryntumScheduler> component:
    in BryntumScheduler (at MySchedulerView.js:472)

Post by pmiklashevich »

I guess it's because it's private and not designed to be used with event's data. Is there any small modification I can make in Bryntum Scheduler code to make the data available in the function (as it is in other tooltip template config functions) ? At least until you fix it in the next release.

I'm afraid there is no workarounds to this issue. Overriding private functions is not a recommended way. You can try to reach out to the "context" of the feature. You can learn the code base. Please see ResizeBase getTipHtml function.

However it doesn't in my app (both tip config you gave me), here is the error (rised during scheduler init) :

Please create a new thread and submit a runnable testcase so we can investigate it.

Pavel Miklashevich - Core Developer

Post Reply