Our powerful JS Calendar component


Post by lanpeng »

Hi bryntum team,
I can render the eventtooltip with the eventRecord. However, one of my requirements is that after clicking Tooltip, I send a http request, get the response data, and then use it to render eventTooltip.
How should i do to achieve it ?

	this.calendarConfig.features = {
		 eventTooltip: {
        		showOn: 'click',
        		tools:{},
        		onBeforeShow({ source }){
        			...
        		},
        		render: (data: any) => {
        			...
        		}
        		
}

Post by Animal »

I'm concerned about you injecting a render method. That's a private method. Widgets use that to insert themselves into the DOM. And floating widgets like tooltips always insert themselves into a global floatRoot DOM element which is above the body in the stacking order.

What is that about? Does it run? What does it do? You have chosen to express it with ...

What does your onBeforeShow handler do?

If you want to perform some action on mouse click anywhere in the tooltip, then you need to add a click listener to its element.

So maybe configure the tooltip with an onPaint handler:

onPaint({ source, firstPaint }) {
    if (firstPaint) {
        EventHelper.on({
            element : source.element,
            click(domEvent) {
                // Respond to the click
            }
        }
    }
}

Post by lanpeng »

thanks for your reply,Animal.
But it didn't solve my problem. Maybe I didn't make it clear.

	this.calendarConfig.features = {
		 eventTooltip: {
        		showOn: 'click',
        		tools:{
        		  delete:{...},
        		  edit:{...},        		  
}, onBeforeShow({ source }){ this.tools.delete.hidden = source._eventRecord.data.canDelete ? false : true this.tools.edit.hidden = source._eventRecord.data.canEdit ? false : true this.tools.close.hidden = true }, renderer: (data: any) => { return `<dl> <dt class="tooltip_dt">Duration:</dt> ...... ` } }

I want to send a http request after clicking event card, and then render this eventToolTip with the http response. Where should i sent http request , and how should i do?

Attachments
Snipaste_2022-11-18_13-02-05.jpg
Snipaste_2022-11-18_13-02-05.jpg (128.18 KiB) Viewed 515 times

Post by Animal »

We need to connect up our documentation a bit better to make this clear. I will work on that for the next release,

You should be able to use the renderer.

The renderer that you configure has the same interface as this: https://www.bryntum.com/docs/calendar/api/Core/widget/Tooltip#config-getHtml

And the tooltip itself has this property when activated: https://www.bryntum.com/docs/calendar/api/Calendar/feature/EventTooltip#property-eventRecord

So you can use the fetch API to

renderer : async function() {
    const response = await fetch(...set up the URL using this.eventRecord...);

    return ...construct either an HTML string, or an Object for DomSync...
}

Post by lanpeng »

thanks Animal . It works well


Post Reply