FullCalendar Scheduler 列标题格式
FullCalendar Scheduler columnHeaderFormat
我正在使用 FullCalendar 和调度程序(最新版本)。我想将列 header 格式替换为 '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>
由于您使用的是 horizontal-flowing 时间轴视图,因此您正在查看的标题被视为 slots 而不是 columns。槽表示(可变)时间段,而列始终表示整天,但列只出现在 "basic" 或 "agenda" 样式视图中。
因此您可以简单地使用 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>
我正在使用 FullCalendar 和调度程序(最新版本)。我想将列 header 格式替换为 '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>
由于您使用的是 horizontal-flowing 时间轴视图,因此您正在查看的标题被视为 slots 而不是 columns。槽表示(可变)时间段,而列始终表示整天,但列只出现在 "basic" 或 "agenda" 样式视图中。
因此您可以简单地使用 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>