FullCalendar调度器columnHeaderFormat [英] FullCalendar Scheduler columnHeaderFormat
本文介绍了FullCalendar调度器columnHeaderFormat的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用FullCalendar和调度程序（最新版本）。我想将列标题格式替换为'D M dddd'。我尝试使用columnHeaderFormat，但它似乎没有工作。
<$ （）{$（'＃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'，期间：{days：30}，slotDuration：'24：00'}}，columnHeaderFormat：{timelineSevenDay：'dddd D M'，timelineFifteenDay：'dddd D M'，timelineThirtyDay：'dddd D M'}，resourceLabelText：'Room '，resourceGroupField：'type'，资源：[{id：'a'，输入：'Standard Room'，标题：'101'}，{id：'b'，输入：'Standard Room'，标题：'102 '}，{id：'c'，type：'Standard Room'，title：'103'}，{id：'d'，type：'Standard Room'，title：'104'}，{id：'e '，输入：'Standard Room'，标题：'105'}，{id：'f'，输入：'Deluxe Double Room'，标题：'106'}，{id：'g'，type：'Deluxe Double房间'，标题：'107'}，{id：'h'，类型：'Deluxe Double Room'，标题：'108'}，{id：'i'，type：'Delu xe双人间'，标题：'109'}，{id：'j'，类型：'豪华双人间'，标题：'110'}，{id：'k'，类型：'带按摩浴缸的特大号床间'，标题：'201'}，{id：'l'，类型：'带按摩浴缸的大床房'，标题：'202'}，{id：'m'，类型：'带按摩浴缸的大床房'，标题：'203 '}，{id：'n'，type：'King Room With Jacuzzi'，title：'204'}]}）;}）;
< link rel =stylesheettype =text / csshref =https://cdnjs.cloudflare.com/ajax/ libs / fullcalendar / 3.9.0 / fullcalendar.min.css>< script type =text / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery .min.js>< / script>< script type =text / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min .js>< / script>< script type =text / javascriptsrc =https://cdnjs.cloudflare.com/ajax/ libs / fullcalendar / 3.9.0 / fullcalendar.min.js>< / script>< link rel =stylesheettype =text / csshref =https://cdnjs.cloudflare.com/ajax /libs/fullcalendar-scheduler/4.0.0-alpha.2/scheduler.css\">< script type =text / javascriptsrc =https://fullcalendar.io/releases/fullcalendar-scheduler/1.9。 4 / scheduler.min.js>< / script>< div id =calendar>< / div>
解决方案
由于您使用横向流动的时间轴视图，因此您正在查看的标题被认为是插槽而不是栏。插槽代表（可变）时间段，而列始终代表整天，但列只出现在基本或议程风格视图中。
因此，您可以只需使用 slotLabelFormat 设置即可。有关完整文档，请参阅 https://fullcalendar.io/docs/slotLabelFormat 。
< link rel =stylesheettype =text / csshref =https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css>< script type =text / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script>< script type = text / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js>< / script>< script type =text / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js>< / script> < link rel =stylesheettype =text / csshref =https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.css><脚本类型=text / javascriptsrc =https://fullcalendar.io/releases/fullcalendar-scheduler/1.9.4/scheduler.min.js>< / script>< div id =calendar> < / div>
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>
解决方案
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>
这篇关于FullCalendar调度器columnHeaderFormat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
