Log in to AnswerLog in to Follow
UserImage.jpg
Bo Menick
96Views
7Comments
Solved
[FullCalendar Reactive] Advanced Options eventRender overwritten
Question
Reactive
Forge
fullcalendar-reactive
Reactive icon
FullCalendar Reactive
Forge component by André Cabral
Application Type
Reactive

Hi everyone,

I want to add a gradient color on every event displaying the progress in percentage. So for example: If the event progress is on 50% I want the event background color to be 50% green on the left and 50% red on the right side.

I've searched on the internet and people are telling that it can be achieved using the eventRender function. This function can be added in the advanced options section. But this is not working for this component and the reason why is because if you add the eventRender function it will get overwritten in the FullCalendar component.

As you can see in the image above I've added the eventRender function with a console.log() containing 123 as message. But the message will never show because of the eventRender below. That piece of code gets added by the component itself.

Does anyone know how to work around this or could this be changed in the future? It would be nice if there is an option to add js code to the existing eventRender without having to modify the FullCalendar component.

Regards,

Bo

0
0
08 Mar 2022

Hello,

I met same issue today.

When using an external URL as the event source, I found that I could reset the eventRender in the Loading event handler of the FullCalendar widget.

See the picture below.


This information may help you. (But maybe too late...

See solution in context
1
0
11 Jul 2022

Hi Takasi,

Great that you found a solution for this. Unfortunately as you said I already have a solution for mine. But yours is better imo because your solution doesn't require to modify the forge component.

I've solved mine by adding an extra input parameter that holds the appended eventRender javascript code. Which also is limited because it will only add js code at the end of the eventRender.

Anyway, thanks for posting your solution!

1
0
11 Jul 2022

Hi Bo,

The eventRender you need to change is the one below the default date property. That's where you can customize how the event is to appear. You'll need to add your changes to the html of the div of the calendar event.

Right now I'm on mobile but I can send you an eSpace with an example of changing the display for background events, which is similar to what you need.

Regards,

Anna


0
0
08 Mar 2022

Hi Anna,

If you could send me the espace with the example that would be great. That way I can check how you changed the eventRender function. Because I cannot find a way to change the function unless I change it in the FullCalendar Forge Component itself.

Regards,

Bo

0
0
08 Mar 2022

Replying to Bo Menick's comment on 08 Mar 2022 15:28:55

Hi Bo,

Sorry for the delay. I've been looking through my eSpace and I don't have those changes in there. 

You will need to alter the component that you've downloaded from the Forge, there's no way around it, since you need to change the FullCalendar's block eventRender in the BuildOptions client action.

I've done something similar in the Traditional version of the component. I'll work on my side on the changes that you need and if I finish first I'll send you the eSapce.

Regards,

Anna

0
0
09 Mar 2022

Hello,

I met same issue today.

When using an external URL as the event source, I found that I could reset the eventRender in the Loading event handler of the FullCalendar widget.

See the picture below.


This information may help you. (But maybe too late...

1
0
11 Jul 2022

Hi Takasi,

Great that you found a solution for this. Unfortunately as you said I already have a solution for mine. But yours is better imo because your solution doesn't require to modify the forge component.

I've solved mine by adding an extra input parameter that holds the appended eventRender javascript code. Which also is limited because it will only add js code at the end of the eventRender.

Anyway, thanks for posting your solution!

1
0
11 Jul 2022

Hi everyone,


Sorry for the late reply and thank you Takasi to show your solution. 

There is a way to solve the problem without change the component or create extra Node Javascript.
You can use to advance configs to define and customize the eventRender function that you want use on the calendar, for this make effect you only need to set de EventDescription input parameter to Entities.EventDescription.NeverShow, this will prevent the calendar to overwrite your eventRender. 



Regards,

André

1
0
28 Jul 2022

Hello, 

I confirmed your procedure makes my eventRender definition in AdvancedOption enable.
This is more natural solution than mine. Great!

Thank you for the information.

0
0
29 Jul 2022
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.