javascript - 在日 View 中的全天上方添加自定义标题

Question

我正在使用 FullCalendar 开发一个应用程序，我需要在其中向基本日 View 添加自定义表格标题。我已经尝试并用谷歌搜索，但我无法找到解决方案。

这是我目前的代码。

$('#calendar').fullCalendar({
    defaultView: 'basicDay',
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },
    views: {
        day: {
            eventLimit: false
        },
        month: {
            eventLimit: true
        }
    },
    eventLimit: true,
    events: [
    {
        title: 'All Day Event',
        start: '2017-07-01'
    },
    {
        title: 'Long Event',
        start: '2017-07-07',
        end: '2017-07-10'
    },
    {
        id: 999,
        title: 'Repeating Event',
        start: '2017-07-09T16:00:00'
    },
    {
        id: 999,
        title: 'Repeating Event',
        start: '2017-07-16T16:00:00'
    }
    ]
});

我正在尝试使用以下代码为表格内容添加标题

if ($('.fc-view.fc-basicDay-view.fc-basic-view')) {
    alert("Found");
    var thr = '<div class="fc-row1 fc-widget-header1"><table><thead><tr>' +
        '<th>Event</th></tr></thead></table></div>'

    console.log($(thr));

    $(thr).insertAfter('div.fc-day-grid');
} else {
    alert('No');
}

我正在努力完成这样的事情:

Answer 1

你快到了。只缺少一些东西:

1. 你应该选择一个更好的元素来放置栏
2. 您需要在 viewRender 上输入密码, 否则当你改变日期/观点时你会失去酒吧
3. 该代码只能添加到basicDay 和agendaView。如果需要，您最终可以将特定的条形图添加到其他 View 。

所以，你应该在 viewRender 中添加这样的东西:

viewRender: function( view, element ) {
    if (view.name !== 'agendaDay' && view.name !== 'basicDay') {
        return false;
    }

    var html = '<div class="fc-day-grid fc-unselectable">' +
            '<div class="fc-row fc-week fc-widget-content" style="border-right-width: 1px; margin-right: 16px;">' +
                '<div class="fc-bg">' +
                    '<table>' +
                        '<tbody>' +
                            '<tr>' +
                                '<td class="fc-axis fc-widget-content" style="width: 45px;"><span>Time</span></td>' +
                                '<td class="fc-day fc-widget-content fc-mon fc-state-highlight events-label">Event</td>' +
                            '</tr>' +
                        '</tbody>' +
                    '</table>' +
                '</div>' +
                '<div class="fc-content-skeleton">' +
                    '<table>' +
                        '<tbody>' +
                            '<tr>' +
                                '<td class="fc-axis" style="width:45px"></td>' +
                                '<td></td>' +
                            '</tr>' +
                        '</tbody>' +
                    '</table>' +
                '</div>' +
            '</div>' +
        '</div>';

    $(".fc-body").find(".fc-widget-content:first").prepend(html);
}

然后您可以向 .events-label 添加一些样式。您可能可以删除 Fullcalendar 的一些默认类。

参见 jsfiddle 上的工作示例.