Come mostrare i dettagli dell'evento al click del giorno nel calendario completo

Question

Ciao a tutti Ho un array di eventi, al click del giorno Voglio mostrare i dettagli dell'evento in un altro pannello. Dispongo di array con array in formato array, non riesco a ottenere come eseguire il rendering per ottenere tutti i dettagli dell'evento compresi i dettagli degli array secondari in quel giorno cliccato. Per favore, vedi se puoi aiutarmi con questo o puoi suggerire qualcosa in esso. Ecco il mio codice qui sotto.

$(window).load(function() { 
    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     editable: true, 
     eventRender: function(event, element, view) { 
      for (var i = 0; i <= event.products.length - 1; i++) { 
       element.append('<span>' + event.products[i].name + '<span>'); 
      }; 
     }, 
     events: [{ 
      title: 'EventName', 
      start: '2016-05-02', 
      products: [{ 
       name: 'ProductName' 
      }] 
     }, { 
      title: 'Event', 
      start: '2016-05-03', 
      products: [{ 
       name: 'ProductName1' 
      }, { 
       name: 'ProductName2' 
      }, { 
       name: 'ProductName3' 
      },] 
     }, { 
      title: 'EventName', 
      start: '2016-05-13', 
      products: [{ 
       name: 'ProductName1' 
      }, { 
       name: 'ProductName2' 
      }] 
     }, { 
      title: 'Event', 
      start: '2016-05-15', 
      products: [{ 
       name: 'ProductName' 
      }] 
     }, { 
      title: 'EventNAme', 
      start: '2016-05-21', 
      products: [{ 
       name: 'ProductName1' 
      }, { 
       name: 'ProductName2' 
      }] 
     }, { 
      title: 'Event', 
      start: '2016-05-23', 
      products: [{ 
       name: 'ProductName1' 
      }, { 
       name: 'ProductName2' 
      }] 
     }, { 
      title: 'Eventname', 
      start: '2016-05-25', 
      products: [{ 
       name: 'ProductName' 
      }] 
     }, { 
      title: 'Event', 
      start: '2016-05-29', 
      products: [{ 
       name: 'ProductName' 
      }] 
     }], 
     dayClick: function(date, allDay, jsEvent, view) { 
      console.log('date' + date.format('DD/MMM/YYYY') + "allDay" + allDay.title + "jsEvent" + jsEvent + "view" + view) 
     } 
    }); 
}) 

Se vedete che io ho eventi array e ogni evento ha prodotti array, così ogni volta che clicco su data voglio mostrare il titolo, così come i dettagli del prodotto, come lo stesso nome del prodotto. Ecco cosa ho provato finora con il calendario.

Così quando si fa clic in qualsiasi giorno che ha evento la voglio mostrare Non voglio mostrare al clic di eventi, ho bisogno di tutto il giorno cliccabile in questo momento in base al di sotto risposta mostra solo quando si fa clic su evento.

titolo dell'evento product_name

Il codice è troppo lunga penna codice in modo ho creato si prega di vedere se è possibile modificare questo, vi ringrazio in anticipo DEMOTRIAL

Answer 1

Ahaa! Finalmente ho trovato la soluzione per il rendering di eventi su dayClick. C'è qualcosa chiamato oggetto clientEvents che ci consente di recuperare eventi all'interno di qualsiasi azione del calendario completo (ad esempio dayClick, eventClick ecc.) Ho usato questa funzione per eseguire il rendering dei miei eventi, ecco il mio lavoro demo ...

e il codice del giorno che mi è stato avidamente cercando è sotto

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

Il event click è quello che stai cercando.

eventClick: function(calEvent, jsEvent, view) { 

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

Vedi updated codepen

Questo è il modo di ciclo tutto il nome di prodotti:

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

E per inserire le proprietà all'interno del quadro si fa qualcosa di simile:

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 Fare clic per data, 23/

Answer 3

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