jQuery Fullcalendarでは、カレンダーの下の現在の月表示のイベントリストを表示する方法

Question

Fullcalendarは月表示でうまく機能しますが、現在の月のイベントリストも必要です（ナビゲーションカレンダー月）。ここで

は私の現在のカレンダーです：

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); 
    }); 
    }, 
}); 

available viewはlistMonthですが、別のカレンダーで、次のように使用された場合、これは表示されません：

defaultView: 'listMonth' 

質問は、私が働いています、ですリストビューで別のカレンダーを作成することができます。もしそうならば、カレンダーの月選択に従ってリストが変更されるように、どのように統合できますか？あるいは、これを行う別の方法がありますか？あなたは現在のビューのイベントの配列を取得することができます任意の助けclientEventsで

Answer 1

ため

感謝します。 viewRenderを使用すると、ビューがいつ変更されるかを通知できます。

デモ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); 
    } 
});