将自定义HTML添加到jQuery FullCalendar单元格

我正在使用jQuery FullCalendar（ http://arshaw.com/fullcalendar/docs/ ）。

我想为每个日元单元添加一些自定义HTML。

例如在我的情况下，我希望根据一些逻辑有不同的背景颜色，在中间显示价格…

有没有办法自定义单元格的渲染？

Answer 1

我这样做的方式就像Conners所说：

eventRender: function(event, element) { element.find(".fc-event-title").remove(); element.find(".fc-event-time").remove(); var new_description = moment(event.start).format("HH:mm") + '-' + moment(event.end).format("HH:mm") + '
' + event.customer + '
' + 'Address: 
' + event.address + '
' + 'Task: 
' + event.task + '
' + 'Place: ' + event.place + '
' ; element.append(new_description); } 

Answer 2

我将解释我是如何为其他人解决这个问题的。

我使用了eventAfterRender回调。 在那里，我使用jQuery来解析“element”参数，并在将html发送到浏览器之前重新编写html。

Answer 3

这是我在我的应用程序中处理此问题的方式。

在fullcalendar.js中，您需要找到：

 html += "" + htmlEscape(event.title || '') + "" + ""; 

这是创建单元格内容的位置。

我希望活动的时间在单元格的右侧，所以：

 html += "
" + moment(event.start).format('hh:mm a') + "
" + htmlEscape(event.title || '') + "" + ""; 

我正在使用momentjs库来格式化时间。

现在，您可以将任何想要的内容添加到日历单元格内容中，并使用标准html对其进行格式化。

Answer 4

这个答案提供了一个非常简单的方法，对我有用：

 cell.prepend('' + ReturnCellNumber(cellDay,cellMonth,cellYear) + ''); 

Answer 5

我一直在使用Gjermund Dahl的答案，直到我对我的日历做了一些调整。 使用此方法，我可以使不同视图的格式不同。 当日历使用列表和时间轴时，在渲染上的全面操作中删除标题类会在不同视图中产生不同的结果。

 eventRender: function(event, element) { // explore the element object // console.log(element); // edit list view titles // during the render, check for the list class to be in the element // if there is a fc-list-class then we are going to make our changes accordingly if( element[0].className === 'fc-list-item' ){ // create your new name var x = '' + event.title + ' ' + model + '
' + cust; // create array to be added to element var update = { innerHTML: x }; // replace element with update value in the right place $.extend( true, element[0].childNodes[2], update ); } // edit timeline view titles // during the render, check for the timeline class to be in the element // if there is a fc-timeline-event then we are going to make our changes accordingly if( element[0].className.indexOf( 'fc-timeline-event' ) === 0 ) { var x = '' + '' + customer + '
'+ new + ' ' + make + ' ' + model + ''; // create array to be added to element var update = { innerHTML: x }; // replace element with update value in the right place $.extend( true, element[0].childNodes[0].firstChild, update ); } } 

请注意两个视图中附加的不同位置。 您必须浏览元素对象以查看您希望新内容的位置。 您还可以通过更多控制选择在何处进行此更改。 改变innerHTML，或innerText，或者你想要的任何东西。

Answer 6

尝试下面的代码eventRender: function (event, element) { let new_description = '' + event.title + '' + '' + event.start.format('hh:mma') + '-' + event.end.format('hh:mma') + '' + '' + event.status + '' ; element.html(new_description); } eventRender: function (event, element) { let new_description = '' + event.title + '' + '' + event.start.format('hh:mma') + '-' + event.end.format('hh:mma') + '' + '' + event.status + '' ; element.html(new_description); }

Answer 7

在这里，你可以得到这个：

  dayRender: function(date, cell) { cell.append('
Add Your Text!
'); }, 

有关更多信息： 将自定义HTML添加到jQuery FullCalendar单元格