Our powerful JS Calendar component


Post by Craig5117 »

We are using custom text in our tooltip based on how it was done in the demo. However, once the string template is passed and the renderer is called on the tooltip, the default text that was there before goes away.

Originally, our calendar was displaying the recurrence of an event if it existed in the tooltip. We would like to keep the new custom text, and also have the recurrence that appeared as "Weekly on Thursday" for example. How can I get this to display again? Displaying the eventRecord.recurrenceRule only gets "FREQ=WEEKLY".

Also, is there a way to access the icons that appeared by default (the clock and recurrence icons for example)?

Tooltip_example.png
Tooltip_example.png (31.47 KiB) Viewed 1020 times

Post by saki »

The default event tip renderer is implemented in lib/Calendar/widget/EventTip.js and it uses https://bryntum.com/docs/calendar/#Scheduler/data/util/recurrence/RecurrenceLegend to display the recurrence. You can take the existing renderer as a model, add/remove/change it to achieve the desired look.

Also, is there a way to access the icons that appeared by default (the clock and recurrence icons for example)?

How do you want to access them? Icons placed in the header are meant to be clickable and they can be easily configured through tools here: https://bryntum.com/docs/calendar/#Calendar/feature/EventTooltip Other icons are display-only.


Post by Craig5117 »

Thanks so much.

As for the Icons, I just meant for the purpose of rendering them in the custom tooltip.


Post by Craig5117 »

I am actually getting an error if I try to import RecurrenceLegend. Should it be possible to import and use it?

We are using TypeScript so I wondered if that might be a part of the issue.

It throws a compile error and references line 320 of localization/Localizable which is actually just the start of a comment.


Post by saki »

Post please the code producing that error, ideally our modified example, for us to run, investigate and debug the issue. And yes, RecurrenceLegend should be importable and should work as expected.


Post by Craig5117 »

This is just the relevant portion. Trying to call RecurrenceLegend gets the error. Without using RecurrenceLegend, it successfully renders.

 
 import RecurrenceLegend from '@bryntum/calendar/source/lib/Scheduler/data/util/recurrence/RecurrenceLegend.js';
 
 ...
 
 renderer : (data) => {
        const recurrenceLegend = data.eventRecord.recurrence ? RecurrenceLegend.getLegend(data.eventRecord.recurrence) : '';
        return `<dl>
        <dt>Time:</dt>
        <dd>
            ${timeFormat(data.eventRecord.startDate)} - ${timeFormat(data.eventRecord.endDate)}
        
${data.eventRecord.Phone ? ` <dt>Phone:</dt> <dd> ${phoneFormat(data.eventRecord.Phone)} ` : ``} ${data.eventRecord.Address ? ` <dt>Address:</dt> <dd> ${data.eventRecord.Address} ` : ``} <dd> ${recurrenceLegend ? `<div class="b-cal-tooltip-recurrence b-icon b-icon-recurring">${recurrenceLegend}</div>` : ''} </dl> ` }
,

Failed to compile.

./node_modules/@bryntum/calendar/source/lib/Core/localization/Localizable.js 320:24
Module parse failed: Unexpected token (320:24)
File was processed with these loaders:

  • ./node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | }
    |

return translation ?? text;
| }
| /**


Post by Maxim Gorkovsky »

Hello.
It appears that babel doesn't like nullish coalescense. You need to check your build configuration, maybe add some plugins, like this one: https://babeljs.io/docs/en/babel-plugin-syntax-nullish-coalescing-operator


Post Reply