Our powerful JS Calendar component


Post by rahul.agrawal@knack »

Hello team,

We are in the process of integrating the Bryntum Calendar into our application and have successfully implemented most of our requirements. However, we have encountered a few specific challenges where we would appreciate your guidance:

Multi-Day Events Behavior

When creating multi-day events, the calendar automatically marks them as all-day events (internally). As a result, they always appear in the all-day header, even when we do not explicitly set them as all-day events. Is there a way to control this behavior?

Customizing Event Tooltip

We would like to use the event tooltip as a detailed view for events, similar to how editEventFeature allows widget customization. However:

  • Unlike editEventFeature, event tooltip customization is not documented. If this is the expected approach, how can we disable the existing default tooltip view?
  • The renderer function does not accept JSX, only an HTML string. Converting JSX to a string removes interactivity, limiting our customization options.
  • There does not seem to be a way to prevent the tooltip from auto-closing, which is possible in editEventFeature.

Popover Width Control

How can we control the width of popovers such as event add/edit popovers and tooltips?

Looking forward to your response.


Post by alex.l »

Hi rahul.agrawal@knack,

Welcome on forums!

Multi-Day Events Behavior

You can enable allDay header or disable it using
https://bryntum.com/products/calendar/docs/api/Calendar/widget/DayView#config-showAllDayHeader
It's described here https://bryntum.com/products/calendar/docs/api/Calendar/widget/DayView#multi-day-events-

Unlike editEventFeature, event tooltip customization is not documented. If this is the expected approach, how can we disable the existing default tooltip view?

Please see full docs for this feature https://bryntum.com/products/calendar/docs/api/Calendar/feature/EventTooltip

The renderer function does not accept JSX, only an HTML string. Converting JSX to a string removes interactivity, limiting our customization options.

Please see the guide here https://bryntum.com/products/calendar/docs/guide/Calendar/integration/react/guide#using-react-components-in-tooltips-and-widgets

There does not seem to be a way to prevent the tooltip from auto-closing,which is possible in editEventFeature.

EventEdit feature uses Popup and not Tooltip.

How can we control the width of popovers such as event add/edit popovers and tooltips?

Which one are you asking about? You can set width for popups, please tell us which exactly?

All the best,
Alex Lazarev

How to ask for help? Please read our Support Policy

We do not write the code in bounds of forum support. If you need help with development, contact us via bryntum.com/services


Post by alex.l »

Regarding to multi day events and top row, we have a FR to make it conditionally https://github.com/bryntum/support/issues/2565
I updated ticket to raise priority.
You can subscribe on ticket updates to be notified when it's done.

All the best,
Alex Lazarev

How to ask for help? Please read our Support Policy

We do not write the code in bounds of forum support. If you need help with development, contact us via bryntum.com/services


Post by rahul.agrawal@knack »

resource pointing to https://bryntum.com/products/calendar/docs/guide/Calendar/integration/react/guide#using-react-components-in-tooltips-and-widgets is not valid
there is no prop named cellTooltipFeature, neither template exists inside eventTooltipFeature
the only valid way that I see is eventTooltipFeature.renderer
but this also does not support JSX


Post by rahul.agrawal@knack »

https://bryntum.com/products/calendar/docs/api/Calendar/feature/EventTooltip This documentation shows that the renderer should support DomConfig, but it is not working as expected, it is just expecting strings, not JSX


Post by alex.l »

Your question:

We would like to use the event tooltip as a detailed view for events, similar to how editEventFeature allows widget customization

From the guide

Important:

The support for React Components is implemented in the Calendar wrapper therefore in applications that does not use the wrapper, but creates the Calendar instances directly, JSX in tooltips and widgets does not work.

React Components support works only in tooltips and widgets that are children of Calendar, not in standalone tooltips or widgets. In such cases, however, JSX can be used directly and does not need be "wrapped" in a Bryntum widget. Therefore, this is not a limitation, it is only to be considered in the application design.

React components in tooltips
Tooltips are usually configured as features that use JSX returned from the feature renderer or template. For example:

const calendarProps = {
    cellTooltipFeature  : {
        tooltipRenderer : ({ record }) => (
            <React.StrictMode>
                <DemoTooltip record={record}/>
            </React.StrictMode>
        )
    },
    eventTooltipFeature : {
        template : data => (
            <React.StrictMode>
                <DemoEventTip data={data}/>
            </React.StrictMode>
        )
    }
}

return <BryntumCalendar {...calendarProps} />

I clearly see you asked about eventTooltipFeature and demo code is available in the guide I pointed on.

the only valid way that I see is eventTooltipFeature.renderer
but this also does not support JSX

From the guide:

    eventTooltipFeature : {
        template : data => (
            <React.StrictMode>
                <DemoEventTip data={data}/>
            </React.StrictMode>
        )
    }

there is no prop named cellTooltipFeature

what is the question about cellTooltipFeature? I don't see you mentioned it in this thread. Did I miss something?

All the best,
Alex Lazarev

How to ask for help? Please read our Support Policy

We do not write the code in bounds of forum support. If you need help with development, contact us via bryntum.com/services


Post by rahul.agrawal@knack »

there is no prop in BryntumCalendarProps with the name cellTooltipFeature
also, we don't have any valid prop inside eventTooltipFeature named as a template

Attachments
Screenshot 2025-02-04 at 1.23.42 AM.png
Screenshot 2025-02-04 at 1.23.42 AM.png (402.35 KiB) Viewed 216 times

Post by Animal »

There is no concept of cellTooltip in Calendar.

It is a Grid feature which acts upon grid cells.

We will remove that section from the guide: https://github.com/bryntum/support/issues/10722


Post by alex.l »

Sorry for the problems with docs, here is how to add JSX in event tooltip

import React, { Fragment, FunctionComponent, useRef, useEffect, FC } from 'react';
import { BryntumDemoHeader, BryntumCalendar } from '@bryntum/calendar-react';
import { Toast } from '@bryntum/calendar';
import { calendarConfig } from './AppConfig';
import './App.scss';

const SomeComponent: FC = ({ children }) => (
    <div className="hello">{children}</div>
);

const App: FunctionComponent = () => {
    const calendarRef = useRef<BryntumCalendar>(null);
    const calendarInstance = () => calendarRef.current?.instance;

useEffect(() => {
    // This shows loading data
    // To load data automatically configure crudManager with `autoLoad : true`
    calendarInstance()?.crudManager.load();
});

return (
    <Fragment>
        {/* BryntumDemoHeader component is used for Bryntum example styling only and can be removed */}
        <BryntumDemoHeader />
        <BryntumCalendar
            ref = {calendarRef}
            {...calendarConfig}
            eventTooltipFeature={{
                renderer : () => (<SomeComponent/>)
            }}
        />
    </Fragment>
);
};

export default App;

All the best,
Alex Lazarev

How to ask for help? Please read our Support Policy

We do not write the code in bounds of forum support. If you need help with development, contact us via bryntum.com/services


Post by rahul.agrawal@knack »

  1. unable to use a component inside the renderer
  2. TypeScript says we can only have string | Promise<any> | DomConfig as output for renderer -- thus JSX is not supported. DomConfig accepts HTML but as string not as JSX
  3. I Tried to run the widget using EventClick, but the widget is unable to accept dynamic values also, other fields in the tooltip are not desirable (start time, end time and duration)
Attachments
Screenshot 2025-02-04 at 9.17.19 PM.png
Screenshot 2025-02-04 at 9.17.19 PM.png (215.16 KiB) Viewed 154 times
Screenshot 2025-02-04 at 9.12.06 PM.png
Screenshot 2025-02-04 at 9.12.06 PM.png (156.82 KiB) Viewed 154 times
Screenshot 2025-02-04 at 9.10.33 PM.png
Screenshot 2025-02-04 at 9.10.33 PM.png (152.07 KiB) Viewed 154 times

Post Reply