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

Add custom HTML to a jQuery FullCalendar cell

提问by Nathan H

I am using the jQuery FullCalendar (http://arshaw.com/fullcalendar/docs/).

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

I want to add some custom HTML to each day-cell.

我想为每个 day-cell 添加一些自定义 HTML。

For example in my case I want to have different background colors based on some logic, display a price in the middle...

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

Is there a way to customize the rendering of a cell?

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

采纳答案by Nathan H

I will explain how I solved this issue for other people.

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

I used the eventAfterRendercallback. In there I used jQuery to parse the "element" parameter and re-write the html before it is sent to the browser.

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

回答by Gjermund Dahl

The way I do this is like Conners indicated:

我这样做的方式就像康纳斯指出的那样：

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);
}

回答by Nicolas Giszpenc

This is the way I dealt with this issue in my application.

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

In fullcalendar.js, you need to find this:

在 fullcalendar.js 中，你需要找到这个：

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

This is where the content of the cell is created.

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

I wanted to have the time of the event on the right side of the cell, so:

我想在单元格的右侧显示事件的时间，因此：

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

I am using the momentjs library to format the time.

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

Now, you can add whatever you want to the calendar cell content, and use standard html to format it.

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

回答by mark groeneveld

This answerprovided a very simple method that worked for me:

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

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

回答by jchuck

I had been using Gjermund Dahl's answer above until I made some tweaks to my calendar. With this method I can make the formatting different for different views. When the calendar uses lists and timelines, removing the title class in a blanket action on render produces varied results across different views.

在我对日历进行了一些调整之前，我一直在使用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 );
    } 
}

Note the different places that are appended in the two views. You will have to explore your element object to review where you want your new content. You can also choose where to make this change with more control. Change the innerHTML, or the innerText, or whatever your heart desires.

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

回答by Tanavirrul haq

Try this:

尝试这个：

  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);
        }

回答by Ajay Malhotra

Here, you can get this:

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

    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>');
           },

For more info : Add custom HTML to a jQuery FullCalendar cell

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