Question

我正在使用FullCalendar开发应用程序，我需要在基本日视图中添加自定义表头。我试过并用Google搜索，但我无法得到解决方案。

这是我到目前为止的代码。

$('#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

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

您应该选择更好的元素来放置栏
您需要在viewRender上设置代码，否则当您更改日期/视图时，您将失去标准
该代码只能添加到basicDay和agendaView。最终，您可以根据需要向其他视图添加特定栏。

所以，你应该向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上的工作示例。

在日视图中全天添加自定义标头

1 个答案: