Our powerful JS Calendar component


Post by tradii »

I don't need to show title and tools in event tooltip in calendar. How can I remove the header? Is there a config or I should use CSS? Thanks!

Attachments
Screenshot 1.png
Screenshot 1.png (324.46 KiB) Viewed 810 times

--
Tradii Dev Team


Post by alex.l »

You have to apply few properties to achieve this:

    features : {
        eventTooltip : {
            closable : false, // remove close tool
            titleRenderer: () => '', // remove title text
            tools : {
                edit: false, // remove edit tool
                delete : false // remove delete tool
            }
        }
    }

https://bryntum.com/docs/calendar/api/Calendar/feature/EventTooltip#config-titleRenderer
https://bryntum.com/docs/calendar/api/Calendar/widget/EventTip#config-tools
https://bryntum.com/docs/calendar/api/Calendar/widget/EventTip#config-closable

All the best,
Alex


Post by tradii »

Thanks for your reply. I'll try those out.

Can I request a single config to hide header? Calendar's event tooltip is not consistent with Scheduler's event tooltip. There is no header in Scheduler's event tooltip by default.

Also there is no "showOn" config in Scheduler. It's showOnClick/showOnHover.

--
Tradii Dev Team


Post by alex.l »

Good idea, here is a feature request: https://github.com/bryntum/support/issues/3828

The Calendar and the Scheduler are 2 separated products which are not built on each other, so API may be different too. Scheduler and Calendar have different approaches to edit/display events, so the tooltips are also different because of that.

All the best,
Alex


Post by Animal »

If you add an override to the bryntum Panel class for this method to your app:

    get hasHeader() {
        const
            { header, title, tools, parent } = this,
            hasVisibleTools                  = Object.values(tools || {}).some(tool => !tool.hidden);

        // Explicitly declared header should always be shown
        // Implicitly created from title or tools can be suppressed by parent
        // Explicitly disabled header using false should mean no header at all.
        return header !== false && (header || (!parent?.suppressChildHeaders && (title || hasVisibleTools)));
    }

Then the configuration:

    features : {
        eventTooltip : {
            // Disable the header
            header : false
        }
    }

Should work for you in all products.


Post Reply