程序员经验分享-hwhale

FullCalendar Scheduler 列标题格式

2024-03-12

我正在使用 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>

由于您使用的是水平流动的时间轴视图，因此您正在查看的标题被认为是slots而不是columns。时段代表（可变）时间段，而列始终代表整天，但列仅出现在“基本”或“议程”样式视图中。

因此您可以简单地使用slotLabelFormat设置代替。看https://fullcalendar.io/docs/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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

html

fullcalendar

fullcalendarscheduler

FullCalendar Scheduler 列标题格式 的相关文章

  • 两列表：一列尽可能小，另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr

  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s

  • JavaScript 中的 Promise 有什么意义？

    一个承诺是一个 可能现在可用 或将来可用 或永远不可用的值 来源 MDN 假设我有一个想要处理图片的应用程序 图片已加载 例如在算法在后台使用它之后 或某种其他类型的延迟 现在我想检查一下图片是否可以在future 通过使用承诺 而不是回调

  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com

  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可

  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显

  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障？

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么

  • 如何停止TinyMCE删除span标签？

    在我的工作中 前一位程序员决定使用公司网站上精彩的TinyMCE 我遇到的数千个问题之一是 如果原文有的话span标签 当我按下退格键删除一行 p仅标签 全部span标签已从文本中删除 这个错误比另一个错误更具体 我可以删除anything

  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div

  • 使用单击事件调用“trigger”方法时的复选框值

    如何在点击事件中获取正确的当前值以通过触发器调用 Html

  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden

  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象？

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style

  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图

  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J

  • $resource.query 返回分割字符串（字符数组）而不是字符串

    我正在使用像下面这样的 Angular resource angular module app factory data function resource var Con resource api data update method P

  • 从 PHP 数组生成 HTML 表

    我不明白这一点 我需要解决看似简单的问题 但这超出了我的逻辑 我需要编写一个函数 table columns input cols 它将输出一个表 示例 input array apple orange monkey potato chee

  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I

  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component

  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np

  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u

随机推荐

热门标签