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'

问题是，我是否在列表视图中创建单独的日历？如果是，我该如何集成它，以便列表根据日历中的月份选择而变化。还是有另一种方法可以做到这一点吗？

非常感谢您的帮助

Answer 1

使用clientEvents，您可以获取当前视图的一系列事件。使用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);
  }
});

在jQuery Fullcalendar中，如何在日历下方显示当前月视图的事件列表

1 个答案: