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

Stack Overflow用户

提问于 2017-07-27 22:51:46

回答 1查看 3.1K关注 0票数 0

我有完整的日历在月视图中很好地工作，但我也想要一个当前月份的事件列表(由导航日历月份触发)。

这是我当前的日历：

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'

问题是，我是否在列表视图中创建单独的日历，如果是，我如何集成它，以便列表根据日历中的月份选择进行更改。或者有其他方法可以做到这一点？

非常感谢您的帮助

jquery

fullcalendar

回答 1

Stack Overflow用户

发布于 2017-07-28 00:16:19

使用clientEvents，您可以获得当前视图的事件数组。使用viewRender可以在视图更改时通知您。

邮箱: 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);
  }
});

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45354280

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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