2

I'm using Fullcalendar V4 for a planning tool. Now I want to use the external events option. When I put the data in the div manually it works great. But I need to get the data from a JSON response. When I try this it won't work. I can't drag the events to the calendar and don't get any response. How do I get the data the right way in the div?

This is the code for the container

new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
    var obj=JSON.parse(eventEl.dataset.event);
    return {
    title: eventEl.innerText,
    id: obj.id,
    duration: obj.duration,
    extra1: obj.extra1,
    backgroundColor: obj.backgroundColor
  };
}  });

This are the divs I make manually

<div class='fc-event' data-event='{"title":"event title1","id":"1","duration":"11:45","extra1":"11.00","backgroundColor":"#D7EBFA"}'>My Event 1</div>

This is the code to get the data in the divs

var JsonData = [{"id":"1","title":"Event Title 1","duration":"00:45","extra1":"8.00","backgroundColor":"#D7EBFA"},{"id":"2","title":"Event Title 2","duration":"00:45","extra1":"8.00","backgroundColor":"#D7EBFA"}];
for (var i = 0; i < JsonData.length; i++) {  $("#external-events").append('<div class="fc-event" data-event="{"title":"'+JsonData[i].title+'", "id":"'+JsonData[i].id+'", "duration":"'+JsonData[i].duration+'", "extra1":"'+JsonData[i].extra1+'", "backgroundColor":"'+JsonData[i].backgroundColor+'"}">'+JsonData[i].title+'</div>');}

And this makes the div like this

<div class="fc-event" data-event="{" title":"event title 1", "id":"1", "duration":"00:45", "extra1":"8.00", "backgroundcolor":"#d7ebfa"}">Event Title 1</div>

I think there should be a simple solution for this.

Thanks

ADyson
  • 57,178
  • 14
  • 51
  • 63
RoyBerner
  • 55
  • 1
  • 9
  • this `data-event="{"` ...etc doesn't look valid. Notice how it's all broken up into little islands by the double quotes, compared to your manual ones? You need single quotes around the string just like in the manual version. It would be better to create an object and then JSON.stringify it, and then inject it within the single quotes. Making JSON strings by hand is a recipe for trouble. – ADyson Jun 02 '20 at 22:39
  • Sorry for the late response! But your answer helped me to fix this. Thanks – RoyBerner Jun 16 '20 at 03:46

0 Answers0