FullCalendar Scheduler columnHeaderFormat

谁说我不能喝 提交于 2019-12-11 10:51:48

问题


I'm using FullCalendar and scheduler (the most updated version). I want to replace the column header format to 'D M dddd'. I tried using the columnHeaderFormat but It doesn't seem to work. I also tried using the old one which is the columnFormat and it still didn't work.

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

回答1:


Since you're using the horizontal-flowing Timeline views, the headings you're looking at are considered to be slots rather than columns . Slots represent (variable) time periods, whereas columns always represent whole days, but columns only ever appear in in "basic" or "agenda" style views.

Therefore you can simply use the slotLabelFormat setting instead. See https://fullcalendar.io/docs/slotLabelFormat for full documentation.

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


来源:https://stackoverflow.com/questions/50635408/fullcalendar-scheduler-columnheaderformat

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!