Our powerful JS Calendar component


Post by lanpeng »

Hi bryntum team.
Q1. I didn't create a calendar as in your demo.I use these code to init a calendar.

this.calendar = this.calendarComponent.instance; 

and I set eventTooltip in the ngOnInit lifecycle . I hope to get the eventRecord in the handler event when I click the customized eventTooltip. How can i do?

this.calendarConfig.features = {
      eventTooltip:{
        showOn : 'hover',
        tools : {
          left : {
              cls     : 'b-fa b-fa-copy',
              weight  : 20,
              tooltip : 'copy task',           
handler() {
} }, }, } }

Q2. I use a created event, then copy it, and select the date to create multiple events with the same content. as the pic2 . i'd like to copy this task from 2021/10/13 to 2021/10/29 . How can i do?

Attachments
pic2
pic2
p2.png (24.85 KiB) Viewed 807 times
pic1
pic1
p1.png (187.95 KiB) Viewed 807 times

Post by Animal »

We need to document this better.

A Tool's handler is called using the Tool's owning Panel as this - so it will be the Tooltip.

That has an eventRecord property when it is activated for an event.


Post by Animal »

We'll make this easier to fine: https://github.com/bryntum/support/issues/3633


Post by lanpeng »

Thanks you reply ,Animal .
About question1 , i may not understand you .I'm sorry .
I have no idea for that.
And qustion2 ,do you have some methods for me?
If possible, please show me the code


Post by Animal »

You already wrote the code. There's your handler in the code in your first post.

And the tooltip will be this in that handler, and the tooltip has an eventRecord property on it.


Post by lanpeng »

Hi ,Bryntum team./Animal
I am sure that the tooltip has no eventRecord property on it.
I uploaded my demo . please download it and try

You can open this file which names app.components.ts. I have made comments in it

Attachments
test-case.7z
test-demo
(1.22 MiB) Downloaded 63 times

Post by Animal »

What version of the product are you using? That property has been set for some time now.

What do you see when you pause in the debugger at that point? What is "this"? What does it contain? Take a poke around there.


Post by Maxim Gorkovsky »

Hello.
Property exists on the instance. Not sure how TS could know about type of this instance. You can just add //@ts-ignore above.


Post by lanpeng »

Hi Bryntum.
I am using calendar which version is 4.2.6(trial) .

What I want to say is that in your case, you initialize a calendar through new calendar, set tooltip in the parameters passed to new calendar, and then you can directly use this.eventrecord. However, I use clandar as a web component, and then initialize the instance through

this.calendar.instance

. setting the tooltip property of the calendar component 。so, i can not get eventRecord on the eventTooltip handler .

calendar has some lifeCycle .such as beforeEventEdit beforeEventDelete .They have the eventrecord property on their handlers . so, ihope to invoke a lifecycle function similar to calendar in the event handler of eventTooltipd. I don't know if it's possible


Post by Animal »

It should make no difference. A Calendar is a Calendar.

The property is set in 4.2.6, I just looked at the tagged revision for that release.

Set a breakpoint in the EventTip's onTipPointerOver method and step it. It looks like this:

    onTipPointerOver({
        target,
        owningCalendarWidget,
        eventRecord
    }) {
        if (!owningCalendarWidget) {
            owningCalendarWidget = Widget.fromElement(target)?.closest(hasEventStore);
        }

        if (!eventRecord) {
            eventRecord = owningCalendarWidget.getEventRecord(target);
        }

        if (this.client.features?.eventEdit?.isEditing) {
            return false;
        }
        if (owningCalendarWidget) {
            const
                activeClient = this.activeClient = owningCalendarWidget,
                { tooltip }  = this;

            eventRecord = owningCalendarWidget.getEventRecord(target);

            tooltip.activeClient = activeClient;
            tooltip.eventRecord = this.activeEvent = eventRecord; //<======= Sets the property here
            tooltip.clippedBy = activeClient.tooltipClippedBy || activeClient.scrollable?.element;
        }

        return eventRecord != null;
    }

Post Reply