javascript - 全日历星期三数字

Question

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

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

$(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/fullcalendar@3.10.1/dist/fullcalendar.min.css" rel="stylesheet" />
<link href="https://unpkg.com/fullcalendar-scheduler@1.10.0/dist/scheduler.min.css" rel="stylesheet" />
<script src="https://unpkg.com/moment@2.24.0/min/moment.min.js"></script>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/fullcalendar@3.10.1/dist/fullcalendar.min.js"></script>
<script src="https://unpkg.com/fullcalendar-scheduler@1.10.0/dist/scheduler.min.js"></script>
<div id='calendar'></div>

Answer 1

您可以查看 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/fullcalendar@3.10.1/dist/fullcalendar.min.css" rel="stylesheet" />
<link href="https://unpkg.com/fullcalendar-scheduler@1.10.0/dist/scheduler.min.css" rel="stylesheet" />
<script src="https://unpkg.com/moment@2.24.0/min/moment.min.js"></script>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/fullcalendar@3.10.1/dist/fullcalendar.min.js"></script>
<script src="https://unpkg.com/fullcalendar-scheduler@1.10.0/dist/scheduler.min.js"></script>
<div id='calendar'></div>