Jorge Ribeiro
Rank: #5985
17Views
8Comments
Solved
[FullCalendar Reactive]  Tooltip FullCalendar Reactive
Question
JavaScript
JSON
Reactive
Forge
OutSystems 11
FullCalendar Reactive
Forge component by André Cabral
2
Published on 18 Aug 2020
Application Type
Reactive

Hello I'am trying to implent the FullCalendar Reactive following the documentation available on the website.
However i can't unveil the events tooltip functionality.

According to the documentation i simply have to add in the Advanced Options the following statement:

eventRender: function(info) {
                 var tooltip = new Tooltip(info.el, {
                 title: info.event.extendedProps.description,
                 placement: 'top',
                 trigger: 'hover',
                 container: 'body'
                 });
                 console.log(tooltip);
             }

 But according to the console the TooTip () function does not exist in the Component.

I've read a lots of forums and tried diferent solutions and it looks like nothing works.

As any one came across with this issue?

0
0
on 2020-12-02
Copy link to comment
Nelson Rodrigues
Rank: #218
Solution

Hello Jorge,

From what I see your code is very similar to this example: https://codepen.io/pen/?&editors=001

However, the tooltip is an element that is not part of the fullCallendar library. Is an external JS as you can check here

You can check if you are loading correctly these libraries or the ones you are using?


0
0
on 2020-12-02
Copy link to comment
Jorge Ribeiro
Rank: #5985

Thank for your reply.

this is what i was looking for. In fact the component is missing this plugins (poper.min and tooltip.min).

Hoever adding this scripts and using the code above and other's did not solve the problem.

I consult another forum (https://stackoverflow.com/questions/56866108/tooltips-not-working-in-fullcalendar-when-i-use-bootstrap-css) that indicates that the bootstrap.min causes a conflit with the tooltip.min because both have the same css class for the tooltip. Even so following this solution (by removing the bootstrap.min) it didin't work.

Other things that i tried:

https://codepen.io/IsmiKin/pen/WbOeGw

https://github.com/fullcalendar/fullcalendar-site-static/blob/master/_docs-v3/event-display/event-tooltip-demo.html

1
0
on 2020-12-03
Copy link to comment

Replying to Jorge Ribeiro's comment on 03 Dec 2020 12:16:46

Hi Jorge,

I updated the demo page of fullcalendar with a tooltip example.

https://mediaweb-creations.outsystemscloud.com/FullCalendarReactiveSample/EventsTolltip

In this example, we are using tippy JS but the logic should e the same.

I also attach the example file ;)

Best regards

Nelson Rodrigues

FullCalendarReactiveSample.oml

1
0
on 2020-12-03
Copy link to comment
Jorge Ribeiro
Rank: #5985

Replying to Nelson Rodrigues' comment on 03 Dec 2020 15:33:00

This definetly helped but it still does work perfectly.

For some reason it only renders the description of forced events initialized in the Advanced Options (And like you did in the Demo). Does not work for events that come from the DataBase. It does not recognizes the description parameter.

I will try to work arround it, but if you have any insight please let me know.

Best regards

Jorge Ribeiro


0
0
on 2020-12-03
Copy link to comment

Replying to Jorge Ribeiro's comment on 03 Dec 2020 17:18:49

In my example, the events are populated in the input parameter "EventSource" with the EventList variable, not in AdvancedOptions.

If you check this variable you can see that uses a structure and that structure has a "description" field. 

Do you have content in that field?

Screenshot20201204at105800.jpg

0
0
on 2020-12-04
Copy link to comment
Jorge Ribeiro
Rank: #5985

Replying to Nelson Rodrigues' comment on 04 Dec 2020 11:06:04


Nelson i seem to have found my problem. I has using the NewEventSourceUrl() to populate the events in the calendar.
Afther review my code i found out that i has doing the mapping of the "description" in the event structure incorrectly.


Problem solved :)

Thank you very much for your help!

Have nice weekend

Best Regards

Jorge Ribeiro

0
0
on 2020-12-04
Copy link to comment
Carlos Lessa
Rank: #184

Hi Jorge, check this post

and this link: https://codepen.io/carloshlessa/pen/NWRGZpJ 

This is done using a JS library tooltip.js add the js code on your app

Best regards

Carlos Lessa

0
0
on 2020-12-03
Copy link to comment
Jorge Ribeiro
Rank: #5985

Thank for your reply.

I have check your solution but for the same reassons that i mentioned in the previous post it did work as well.

1
0
on 2020-12-03
Copy link to comment