Question

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

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

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

sample calendar

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

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") + '<br/>'
        + event.customer + '<br/>'
        + '<strong>Address: </strong><br/>' + event.address + '<br/>'
        + '<strong>Task: </strong><br/>' + event.task + '<br/>'
        + '<strong>Place: </strong>' + event.place + '<br/>'
    ;
    element.append(new_description);
}

Answer 2

这是我在申请中处理此问题的方式。

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

html +=
    "<span class='fc-event-title'>" +
    htmlEscape(event.title || '') +
    "</span>" +
    "</div>";

这是创建单元格内容的地方。

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

html +=
    "<span class='fc-event-title'><div style='float:right'>" + moment(event.start).format('hh:mm a') + "</div>" +
    htmlEscape(event.title || '') +
    "</span>" +
    "</div>";

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

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

Answer 3

This answer提供了一个非常简单的方法，对我有用：

cell.prepend('<span class="selector">' + ReturnCellNumber(cellDay,cellMonth,cellYear) + '</span>');

Answer 4

我一直在使用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 = '<strong>' + event.title + ' ' + model + '</strong><br/>' +  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 = '<span class="fc-title">' + '<strong>'
        + customer + '</strong><br/>'+ new + ' ' + make + ' ' + model + '</span>';
        // 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 5

尝试一下：

  eventRender: function (event, element) {
            let new_description = '<div class="fc-content"><span class="fc-title '+event.className+'">' + event.title + '</span>'
                + '<span class="fc-time">' + event.start.format('hh:mma') + '-' + event.end.format('hh:mma') + '</span>'
                + '<span class="' + event.statusCss + '">' + event.status + '</span></div>'
            ;
            element.html(new_description);
        }

Answer 6

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

    dayRender: function(date, cell) {
            cell.append('<div style="text-align:center; background-color:blue; color:#fff;padding:2px 0;margin-top:20px;">Add Your Text!</div>');
           },

有关更多信息：Add custom HTML to a jQuery FullCalendar cell

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

6 个答案: