FullCalendar调度器columnHeaderFormat

Question

我正在使用FullCalendar和调度器(最新版本)。我希望将列标题格式替换为“D M dddd”。我试过使用columnHeaderFormat，但它似乎不起作用。我也尝试使用旧的columnFormat，但它仍然没有工作。

​

$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            right: 'today',
            left: 'timelineSevenDay,timelineFifteenDay,timelineThirtyDay'
        },
        defaultView: 'timelineSevenDay',
        views: {
            timelineSevenDay: {
                type: 'timeline',
                duration: { days: 7 },
                slotDuration: '24:00',
            },
            timelineFifteenDay: {
                type: 'timeline',
                duration: { days: 15 },
                slotDuration: '24:00'
            },
            timelineThirtyDay: {
                buttonText: '30 days',
                type: 'timeline',
                duration: { days: 30 },
                slotDuration: '24:00'
            }
        },
        columnHeaderFormat: {
            timelineSevenDay: 'dddd D M',
            timelineFifteenDay: 'dddd D M',
            timelineThirtyDay: 'dddd D M'
        },
        resourceLabelText: 'Room',
        resourceGroupField: 'type',
        resources: [
            { id: 'a', type: 'Standard Room', title: '101' },
            { id: 'b', type: 'Standard Room', title: '102' },
            { id: 'c', type: 'Standard Room', title: '103' },
            { id: 'd', type: 'Standard Room', title: '104' },
            { id: 'e', type: 'Standard Room', title: '105' },
            { id: 'f', type: 'Deluxe Double Room', title: '106' },
            { id: 'g', type: 'Deluxe Double Room', title: '107' },
            { id: 'h', type: 'Deluxe Double Room', title: '108' },
            { id: 'i', type: 'Deluxe Double Room', title: '109' },
            { id: 'j', type: 'Deluxe Double Room', title: '110' },
            { id: 'k', type: 'King Room With Jacuzzi', title: '201' },
            { id: 'l', type: 'King Room With Jacuzzi', title: '202' },
            { id: 'm', type: 'King Room With Jacuzzi', title: '203' },
            { id: 'n', type: 'King Room With Jacuzzi', title: '204' }
        ]
    });
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/4.0.0-alpha.2/scheduler.css">
<script type="text/javascript" src="https://fullcalendar.io/releases/fullcalendar-scheduler/1.9.4/scheduler.min.js"></script>

<div id="calendar"></div>

​

Answer 1

由于您使用的是水平流动的时间线视图，所以您所看到的标题被认为是时隙，而不是列。时隙代表(可变的)时间段，而列总是代表一整天，但列只出现在“基本”或“议程”样式视图中。

因此，只需使用slotLabelFormat设置即可。有关完整文档，请参见https://fullcalendar.io/docs/slotLabelFormat。

​

$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            right: 'today',
            left: 'timelineSevenDay,timelineFifteenDay,timelineThirtyDay'
        },
        defaultView: 'timelineSevenDay',
        views: {
            timelineSevenDay: {
                type: 'timeline',
                duration: { days: 7 },
                slotDuration: '24:00',
            },
            timelineFifteenDay: {
                type: 'timeline',
                duration: { days: 15 },
                slotDuration: '24:00'
            },
            timelineThirtyDay: {
                buttonText: '30 days',
                type: 'timeline',
                duration: { days: 30 },
                slotDuration: '24:00'
            }
        },
        slotLabelFormat: 'dddd D M',
        resourceLabelText: 'Room',
        resourceGroupField: 'type',
        resources: [
            { id: 'a', type: 'Standard Room', title: '101' },
            { id: 'b', type: 'Standard Room', title: '102' },
            { id: 'c', type: 'Standard Room', title: '103' },
            { id: 'd', type: 'Standard Room', title: '104' },
            { id: 'e', type: 'Standard Room', title: '105' },
            { id: 'f', type: 'Deluxe Double Room', title: '106' },
            { id: 'g', type: 'Deluxe Double Room', title: '107' },
            { id: 'h', type: 'Deluxe Double Room', title: '108' },
            { id: 'i', type: 'Deluxe Double Room', title: '109' },
            { id: 'j', type: 'Deluxe Double Room', title: '110' },
            { id: 'k', type: 'King Room With Jacuzzi', title: '201' },
            { id: 'l', type: 'King Room With Jacuzzi', title: '202' },
            { id: 'm', type: 'King Room With Jacuzzi', title: '203' },
            { id: 'n', type: 'King Room With Jacuzzi', title: '204' }
        ]
    });
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.css">
<script type="text/javascript" src="https://fullcalendar.io/releases/fullcalendar-scheduler/1.9.4/scheduler.min.js"></script>

<div id="calendar"></div>

​