Our powerful JS Calendar component


Post by juris »

Hello together,

we would like to know if its possible to use a custom HTML for the current timeline indicator in the calendar?

We would like to achive something like this but with only css it is kinda hard and tricky:

calendar_custom_indicator.png
calendar_custom_indicator.png (1.97 KiB) Viewed 513 times

Thank you in advance and kind regards!


Post by alex.l »

Hi juris,

No public way to easily achieve that, I've opened a feature request to add this functionality https://github.com/bryntum/support/issues/4972

Meanwhile, DayView class (base for other similar views) has a getter that you could override as you need

    get currentTimeIndicator() {
        return this._currentTimeIndicator || (this._currentTimeIndicator = DomHelper.createElement({
            className     : 'b-current-time-indicator',
            retainElement : true
        }));
    }

https://bryntum.com/docs/calendar/api/Core/helper/DomHelper#function-createElement-static

You could use HTML you need here.

All the best,
Alex


Post by Animal »

With a bit of experimentation I have come up with

.b-current-time-indicator:after {
    content: "NOW";
    margin-left: 50%;
    margin-top: -0.75em;
    position: absolute;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 0 0.1em;
    color: #e53f2c;
}

Which gets:

Screenshot 2022-07-26 at 09.47.10.png
Screenshot 2022-07-26 at 09.47.10.png (31.05 KiB) Viewed 499 times

Post by juris »

Hello together,

thanks for your answeres,really appreciate it!

@Alex: Thanks for the feature request, looking forward for it.
I will have a look an the getter, thank you very much for the input.

@Animal: Thanks for the css code snipped, this was also our idea only downside was that if the indicator is over an event the background-color is visible like that:

Screenshot 2022-07-26 121455.png
Screenshot 2022-07-26 121455.png (4.18 KiB) Viewed 498 times

That was the reason to ask if there is any option to use a custom html.

Thank you very much and kind regards!


Post by Animal »

You can make the background transparent. This will always be an issue for your own CSS, however the DOM for the indicator is created:

Screenshot 2022-07-27 at 07.04.51.png
Screenshot 2022-07-27 at 07.04.51.png (246.89 KiB) Viewed 482 times

Post Reply