How to show event details on click of day in full calendar

Question

Hi everyone I have events array, on click of day I want to show event details in another panel. I have array with array within array format, I am not getting how to render t

Answer 1

The event click is what you're looking for.

eventClick: function(calEvent, jsEvent, view) {

      console.log('Event: ' + calEvent.title);
      console.log('Event: ' + calEvent.products[0].name);
}

See updated codepen

This is how to loop all the products name:

      for (var i = 0;i < calEvent.products.length;i++){
        console.log('Event: ' + calEvent.products[i].name);
      }

And to insert the properties inside the panel you do something like this:

eventClick: function(calEvent, jsEvent, view) {

      // this is a little function to manipulate the dom
      function insert(title, product){
        var dom = $("#insert_here")
        var template = ''+product+''+title+'Cancel' 
        dom.append(template);
      };


      // this is the loop
      for (var i = 0;i < calEvent.products.length;i++){
        //console.log('Event: ' + calEvent.products[i].name);
        insert(calEvent.title, calEvent.products[i].name);
      }
}

Another updated codepen Click on may, 23th