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

Ahaa! Finally I found the solution to render events on dayClick. There is something called clientEvents object that allows us to fetch events inside any full calendar actions (say dayClick, eventClick etc) I used that fucntion to render my events, here is my working demo...

and the dayClick code which I was eagerly searching is below

dayClick: function(date, allDay, jsEvent, view) {
  $('#calendar').fullCalendar('clientEvents', function(event) {
    // match the event date with clicked date if true render clicked date events
    if (moment(date).format('YYYY-MM-DD') == moment(event._start).format('YYYY-MM-DD')) {
      // do your stuff here
      console.log(event.title);

      // if you have subarray i mean array within array then 
      console.log(event.subarray[0].yoursubarrayKey);
    }
  }
}

Answer 2

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 = '<tr><td class="o-box-name">'+product+'</td><td><a href="" class="postpone-del-text">'+title+'</a></td><td><a href="" class="cancel-del-text">Cancel</a></td></tr>' 
        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

Answer 3

$(document).ready(function(){
    $('.fc-button-group').click(function() {
        //write code here
    });
});