javascript - 全日历星期几三位数

标签 javascript jquery html fullcalendar fullcalendar-3

下面的代码运行良好。我唯一想将列中的日期从 2 位数字更改为 3 位数字(Mo 到 Mon)。

我尝试更改columnFormat:'ddd DD/M',但它不起作用。

screen

$(function() {
  $('#calendar').fullCalendar({
    defaultView: 'timelineWeek',
    contentHeight: 610,
    scrollTime: '00:00',
    displayEventTime: false,
    displayEventEnd: false,
    timeFormat: 'h:mma',
    axisFormat: 'HH:mm',
    //slotDuration: '24:00',
    titleFormat: 'ddd DD MMM YYYY',
    columnFormat: 'ddd DD/M',
    resourceAreaWidth: 200,
    defaultView: 'timelineWeek',
    duration: {
      days: 15
    },
    slotDuration: {
      "hours": 12
    },
    slotLabelInterval: {
      "hours": 24
    },
    minTime: "00:00:00",
    maxTime: "24:00:00",
    height: 610,
    contentHeight: "40",
    header: {
      left: 'prev, today',
      center: 'title',
      right: 'oneweek,twoweek,onemonth,oneyear,next'
    },
    views: {
      oneyear: {
        buttonText: 'One Year',
        type: 'timelineYear'
      },
      onemonth: {
        buttonText: 'One Month',
        type: 'timelineMonth'
      },
    },
    //hiddenDays: [ 10 ],
    businessHours: {
      start: '09:00',
      end: '20:00'
    },
    resourceLabelText: 'Rooms',
    resources: 'https://fullcalendar.io/demo-resources.json',
    events: 'https://fullcalendar.io/demo-events.json?with-resources'
  });
});
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}
<link href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c1d2cbcbc4c6cbc2c9c3c6d5e7948996978996" rel="noreferrer noopener nofollow">[email protected]</a>/dist/fullcalendar.min.css" rel="stylesheet" />
<link href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e385968f8f80828f868d878291ce90808b8687968f8691a3d2cdd2d3cdd3" rel="noreferrer noopener nofollow">[email protected]</a>/dist/scheduler.min.css" rel="stylesheet" />
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="234e4c4e464d5763110d11170d13" rel="noreferrer noopener nofollow">[email protected]</a>/min/moment.min.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5339222636212a13607d677d62" rel="noreferrer noopener nofollow">[email protected]</a>/dist/jquery.min.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8decdd4d4dbd9d4ddd6dcd9caf88b9689889689" rel="noreferrer noopener nofollow">[email protected]</a>/dist/fullcalendar.min.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bfacb5b5bab8b5bcb7bdb8abf4aabab1bcbdacb5bcab99e8f7e8e9f7e9" rel="noreferrer noopener nofollow">[email protected]</a>/dist/scheduler.min.js"></script>
<div id='calendar'></div>

最佳答案

您可以查看 slotLabelFormat参数来定义您的新格式。请注意,此选项仅适用于调度程序 View 。

$(function() {
  $('#calendar').fullCalendar({
    defaultView: 'timelineWeek',
    contentHeight: 610,
    scrollTime: '00:00',
    displayEventTime: false,
    displayEventEnd: false,
    timeFormat: 'h:mma',
    axisFormat: 'HH:mm',
    //slotDuration: '24:00',
    titleFormat: 'ddd DD MMM YYYY',
    columnFormat: 'ddd DD/M',
    slotLabelFormat: 'ddd DD', // <--- I've added this.
    resourceAreaWidth: 200,
    defaultView: 'timelineWeek',
    duration: {
      days: 15
    },
    slotDuration: {
      "hours": 12
    },
    slotLabelInterval: {
      "hours": 24
    },
    minTime: "00:00:00",
    maxTime: "24:00:00",
    height: 610,
    contentHeight: "40",
    header: {
      left: 'prev, today',
      center: 'title',
      right: 'oneweek,twoweek,onemonth,oneyear,next'
    },
    views: {
      oneyear: {
        buttonText: 'One Year',
        type: 'timelineYear'
      },
      onemonth: {
        buttonText: 'One Month',
        type: 'timelineMonth'
      },
    },
    //hiddenDays: [ 10 ],
    businessHours: {
      start: '09:00',
      end: '20:00'
    },
    resourceLabelText: 'Rooms',
    resources: 'https://fullcalendar.io/demo-resources.json',
    events: 'https://fullcalendar.io/demo-events.json?with-resources'
  });
});
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}
<link href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aaccdfc6c6c9cbc6cfc4cecbd8ea99849b9a849b" rel="noreferrer noopener nofollow">[email protected]</a>/dist/fullcalendar.min.css" rel="stylesheet" />
<link href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afc9dac3c3cccec3cac1cbcedd82dcccc7cacbdac3caddef9e819e9f819f" rel="noreferrer noopener nofollow">[email protected]</a>/dist/scheduler.min.css" rel="stylesheet" />
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa7a5a7afa4be8af8e4f8fee4fa" rel="noreferrer noopener nofollow">[email protected]</a>/min/moment.min.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e9f2f6e6f1fac3b0adb7adb2" rel="noreferrer noopener nofollow">[email protected]</a>/dist/jquery.min.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c7d4cdcdc2c0cdc4cfc5c0d3e1928f90918f90" rel="noreferrer noopener nofollow">[email protected]</a>/dist/fullcalendar.min.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ef8ebf2f2fdfff2fbf0faffecb3edfdf6fbfaebf2fbecdeafb0afaeb0ae" rel="noreferrer noopener nofollow">[email protected]</a>/dist/scheduler.min.js"></script>
<div id='calendar'></div>

关于javascript - 全日历星期几三位数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58194236/

相关文章:

javascript - 如何在 Mongoose 模式中添加子文档

javascript - 如何验证表单然后发出 post http 请求 jQuery

javascript - 显示时动态 td 不调整大小

javascript - 浏览器何时/为何执行代码

javascript - 如果单选按钮未在移动设备上正确显示,则 CSS 显示内容

javascript - 在 Twitter Bootstrap 模式对话框中关注文本字段

Javascript - 当我在输入表单中按 Enter 键时代码正在运行

jquery - 如何在表单自动填充时触发 Javascript 表单处理程序?

javascript - jQuery函数参数为图片设置SRC

javascript - 是否可以根据文本区域中的插入符位置来选择元素?