javascript - FullCalendar Scheduler 列标题格式

Question

我正在使用 FullCalendar 和调度程序(最新版本)。我想将列标题格式替换为“DM 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

由于您使用的是水平流动的时间轴 View ，因此您正在查看的标题被视为插槽 而不是列。槽表示(可变的)时间段，而列始终表示整天，但列只会出现在“基本”或“议程”样式 View 中。

因此您可以简单地使用 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>