更改 FullCalendar jQuery 插件中的默认事件单元格视图

Question

也许是一个明显的问题，但我在 FullCalendar API、SO 和 google 上搜索没有结果。我想知道是否可以将每个事件的默认单元格视图更改为 FullCalendar？

例如，我的当前事件单元格仅显示我从数据 object 解析的时间和标题。当我尝试解析 object 中的更多数据时，我无法将它们显示到日历单元格中

events: [
    {
        title: 'All Day Event',
        start: '2015-02-01'
        morecontent : 'MORE CONTENT' // How to display this??
    },
    {
        title: 'Long Event',
        start: '2015-02-07',
        end: '2015-02-10'
        morecontent : 'MORE CONTENT' // and this??
    }
];

Answer 1

到目前为止，您的 JSON（来自数据库）似乎正在创建您在上面提供的代码。如果是这样，那么 morecontent 中的任何内容都应该作为结果传递给您的 fullcalendar 对象。

测试使用：

eventClick: function(calEvent, jsEvent, view) {
     console.log(calEvent);
}

Answer 2

您可以在 eventRender 期间更改单元格，该事件在呈现事件 (docs) 时触发。

类似下面的代码会找到该特定事件的标题，并将 html 替换为标题 + 更多内容：

eventRender: function(event, element) {
    $(element).find('.fc-title').html(event.title + ', ' + event.morecontent);
}

这是一个工作版本：

$('#fullCal').fullCalendar({
  events: [{
    title: 'Random Event 1',
    start: moment().add(-4, 'h'),
    end: moment().add(-2, 'h'),
    morecontent: 'Eat Pizza',
    allDay: false
  }, {
    title: 'Random Event 2',
    start: moment().add(1, 'd'),
    end: moment().add(2, 'd'),
    morecontent: 'Drink Coffee',
    allDay: false
  }, {
    title: 'Random Event 3',
    start: moment().add(6, 'd'),
    end: moment().add(8, 'd'),
    morecontent: 'Hackathon',
    allDay: false
  }],
  header: {
    left: '',
    center: 'prev title next today',
    right: ''
  },
  eventRender: function(event, element) {
    $(element).find('.fc-title').html(event.title + ', ' + event.morecontent);
  },
  timezone: 'local'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>

<div id="fullCal"></div>

更改 FullCalendar jQuery 插件中的默认事件单元格视图

Change the default event cell view in FullCalendar jQuery plugin

javascript

jquery

fullcalendar