Our powerful JS Calendar component


Post by orthobridge »

Hi, i am trying to show dateTime in a tooltip when hovering on calendar view empty areas. how can i achieve this?


Post by marcio »

Hey orthobridge,

Thanks for reaching out.

We have https://bryntum.com/products/calendar/docs/api/Scheduler/feature/ScheduleTooltip which serves exactly for that purpose.

Best regards,
Márcio


Post by Animal »

That feature does not exist for Calendar. We have had a ticket for it for ages: https://github.com/bryntum/support/issues/5314


Post by Animal »

This should get you started:

new Tooltip({
    forElement               : calendar.viewContainer.element,
    allowOver                : true,
    hoverDelay               : 0,
    hideDelay                : 100,
    forSelector              : '*',
    showOnHover              : true,
    trackMouse               : true,
    updateContentOnMouseMove : true,
    filterTarget(target) {
        return target.closest('.b-cal-event-wrap') ? null : target;
    },
    getHtml({ event }) {
        const
            { activeView } = calendar,
            dateTime       = activeView.getDateFromPosition(event.clientX, event.clientY);

        if (dateTime) {
            return DateHelper.format(dateTime, `${activeView.dateFormat} ${activeView.timeFormat || 'LST'}`);
        }
    }
});

Post by orthobridge »

Thanks Animal, that works just fine


Post Reply