In jQuery Fullcalendar, wie eine Liste von Ereignissen für die aktuelle Monatsansicht unter dem Kalender angezeigt wird

Question

Ich habe Vollkalender arbeiten gut in der Monatsansicht, aber ich möchte auch eine Liste von Ereignissen für den aktuellen Monat (wie durch die Navigation ausgelöst Kalendermonate).

Hier ist mein aktueller Kalender:

jQuery(document).ready(function() { 
jQuery('#cwcalendar').fullCalendar({ 
events: 'http://xxxxx.com/json-page.php', 
    color: '#d81f59', 
    eventColor: '#d81f59', 
    theme: true, 
    firstDay: 1, 
    height: 400, 

    columnFormat: { 
    month: 'dd' 
    }, 
    header: { 
    left: 'prev', 
    center: 'title', 
    right: 'next' 
}, 
    buttonIcons: { 
    prev: 'left-single-arrow', 
    next: 'right-single-arrow', 
    prevYear: 'left-double-arrow', 
    nextYear: 'right-double-arrow' 
}, 
    views: { 
     month: { 
      titleFormat: 'MMMM YYYY' 
     } 
    }, 
    eventRender: function (event, element) { 
    var dataToFind = moment(event.start).format('YYYY-MM-DD'); 
    jQuery("td[data-date='"+dataToFind+"']").addClass('activeDay'); 
}, 
    eventMouseover: function(calEvent, jsEvent) { 
     var tooltip = '<div class="tooltipevent" style="width:100px;height:60px;padding:8px;background:#fff;position:absolute;z-index:10001;border-style:solid;border-width:1px;border-radius:5px;border-color:#d81f59;">' + calEvent.title + '</div>'; 
    jQuery("body").append(tooltip); 
    jQuery(this).mouseover(function(e) { 
     jQuery(this).css('z-index', 10000); 
     jQuery('.tooltipevent').fadeIn('500'); 
     jQuery('.tooltipevent').fadeTo('10', 1.9); 
    }).mousemove(function(e) { 
     jQuery('.tooltipevent').css('top', e.pageY + 10); 
     jQuery('.tooltipevent').css('left', e.pageX + 20); 
    }); 
    }, 
}); 

Ein available view ist listMonth, aber wenn, wie dies in einem separaten Kalender verwendet nicht angezeigt wird:

defaultView: 'listMonth' 

Frage ist, kann ich arbeiten Beim Erstellen eines separaten Kalenders in der Listenansicht, und wenn ja, wie kann ich ihn integrieren, so ändert sich die Liste entsprechend der Monatsauswahl im Kalender. Oder gibt es einen anderen Weg, dies zu tun?

Vielen Dank für jede Hilfe

Answer 1

Mit clientEvents Sie eine Reihe von Veranstaltungen für die aktuelle Ansicht bekommen. Mit viewRender können Sie benachrichtigt werden, wenn sich die Ansicht ändert.

Demo @https://jsfiddle.net/smcnma7j/

$(document).ready(function() { 
    var event_list = $('#event_list'); 

    $('#calendar').fullCalendar({ 
    // mock events for demo 
    events: function(start, end, tz, callback) { 
     var events = []; 
     var num_events = Math.floor(Math.random() * 25) + 10; 
     for (var i = 0; i < num_events; i++) { 
     events.push({ 
      start: moment(start).add(Math.random() * 30, 'days'), 
      title: 'Event that starts on' 
     }); 
     } 
     callback(events); 
    }, 
    // every time the view updates, update the event list 
    viewRender: function(view, element) { 
     var events = $('#calendar').fullCalendar('clientEvents'); 
     handleViewChange(events); 
    } 
    }); 

    function handleViewChange(events) { 
    event_list.html(''); 
    var ul = $('<ul/>'); 
    $.each(events, function(index, event) { 
     var li = $('<li/>'); 
     li.text(event.title + ' ' + event.start.format()); 
     ul.append(li); 
    }); 
    event_list.html(ul); 
    } 
});