0

I want to show tooltip on hover an event in Fullcalendar plugin, but i want to show subevent only in the tooltip order by index.

If my json is like this:

[{
"title":"event A,
"start":"2020-07-29",
"end":"2020-07-29",
"extendedProps":{"subevent":"sub 1","subevent":"sub 2","subevent":"sub 3"},
}, {
"title":"event B,
"start":"2020-07-30",
"end":"2020-07-30",
"extendedProps":{"subevent":"sub 4","subevent":"sub 5"}]

and this is my eventMouseEnter:

eventMouseEnter: function(info) {
        var tis=info.el;
        var popup=info.event.extendedProps;
        var tooltip = '<div class="tooltipevent" style="top:'+($(tis).offset().top-5)+'px;left:'+ 
($(tis).offset().left+($(tis).width())/2)+'px"><div>Name ' + popup.title + '</div><div>sub event ' + popup.subevent + '</div></div>';
        var $tooltip = $(tooltip).appendTo('body');
  }

How to show my sub event dynamically like this? example picture

Thank You.

Best Regards,

Eka

Eka
  • 9
  • 5
  • What exact problem are you having with the code above? – ADyson Jul 07 '20 at 06:27
  • @ADyson, I have attached an example tooltip picture. – Eka Jul 07 '20 at 11:44
  • Ok, that's what you want it to do, I understand that. My question is what exactly is the problem currently? What is going wrong when you run the code, compared to what you wanted it to do? And have you done any debugging to try and narrow down the issue? – ADyson Jul 07 '20 at 14:22
  • I just know how to show 1 subevent. I do not know how to make looping in javascript to show all of my subevent. – Eka Jul 09 '20 at 01:24
  • Ok that's a bit clearer. so I started looking more closely and I just noticed that your extendedProps data is not valid - you've got multiple properties with the same name inside the same object. How is JavaScript supposed to tell them apart, do you expect? (I.e. when you refer to popup.subevent, how is it supposed to know which one of the three versions of that you're actually asking for??) You need to define an _array_ of sub-events within there. Then it will be easy to loop through – ADyson Jul 09 '20 at 06:59
  • do you mean some thing like this? "extendedProps":{"itenery":"[sub 1,sub 2,sub 3]"}, Can you give me an example how to read this array, please? – Eka Jul 10 '20 at 00:57
  • yes something like that. You read it with a loop, just like any array. Do you know how to make a loop in JavaScript? https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript – ADyson Jul 10 '20 at 08:09
  • Okay, I have extendedProps":{"itenery":["sub 1","sub 2"]}, then eventMouseEnter: function(info) { var tis=info.el; var popup=info.event.extendedProps.itenery; //var arrayLength = popup.length; -->this is undefined, how to know how many members of my array? }, – Eka Jul 10 '20 at 14:48
  • Your code is correct by the looks of it. Demo: https://codepen.io/ADyson82/pen/ExPRZBQ - it works. If you're getting undefined, then I can only assume that somehow your event doesn't have the correct values in extendedProps, despite what you've shown. – ADyson Jul 10 '20 at 15:10
  • Why did i get an error? How should i fix to write this, please? var tooltip = '
    ' + popup.mainevent + '
    ' + for (var i = 0; i < arrayLength; i++) {popup.itenery} + '
    '; var $tooltip = $(tooltip).appendTo('body');     – Eka Jul 11 '20 at 00:50
  • Are you still getting the same "undefined" error as before? – ADyson Jul 11 '20 at 08:40
  • No. it has solved, i just typed wrong code. it produced new error when i put for looping inside
    – Eka Jul 11 '20 at 12:09
  • Ok. So what exactly is the error? If you have an error and you want me to fix it, it makes sense to tell me what the error is! – ADyson Jul 11 '20 at 15:16
  • Would you like to check it out please? https://jsfiddle.net/ekajaya/hqo1ku2s/59/ – Eka Jul 12 '20 at 05:10
  • You had some files and code which didn't need to be there. Now it's better, the logging is working: https://jsfiddle.net/edy8sm4j/ – ADyson Jul 12 '20 at 08:09
  • but, the tooltip still not work. – Eka Jul 12 '20 at 08:53
  • I didn't say it would, I just said it wasn't full of unnecessary stuff which was making it crash. I don't have time right now to figure the rest out, maybe tomorrow I will. In the meantime it might be easier for you to get it working, now the errors are gone – ADyson Jul 12 '20 at 09:11
  • @ADyson I have solve this case use for (var i = 0; i < arrayLength; i++) { var str = detail.join('

    '); console.log(str); } Thank You so much for your help.     – Eka Jul 14 '20 at 00:15
  • If you solved it please write your full solution below in the Answers section, for the benefit of others (and for your benefit - if people find it useful, they will give you upvotes). – ADyson Jul 14 '20 at 06:19

1 Answers1

0
eventMouseEnter: function(info) {
        var tis=info.el;
        var popup=info.event.extendedProps;
        var detail=info.event.extendedProps.itenery;
        var arrayLength = detail.length;
        for (var i = 0; i < arrayLength; i++) {      
          var str = detail.join('<br/><br/> ');
        }
        var tooltip = '<div class="tooltipevent" style="top:'+ 
($(tis).offset().top-5)+'px;left:'+($(tis).offset().left+($(tis).width())/2)+'px"> 
<div>' + popup.title + '</div><div>' + str + '</div></div>';
        var $tooltip = $(tooltip).appendTo('body');
  }
Eka
  • 9
  • 5