如何让FullCalendar支持dd-mm-yyyy格式的事件日期？

你的数据库采用DD-MM-YYYY（如21-01-2023）及DD-MM-YYYY HH:mm格式存储日期，但FullCalendar默认仅支持YYYY-MM-DD格式的日期解析，设置lang: 'fr'仅改变界面语言，不会调整日期识别规则。以下是两种直接可行的解决方案：

方案一：手动转换单条事件的日期格式 #

利用项目中已引入的Moment.js，将自定义格式的日期转换为FullCalendar可识别的格式。修改事件数据中的start和end字段即可：

{
  title: '自定义格式日期的长事件',
  start: moment('20-01-2023', 'DD-MM-YYYY').format('YYYY-MM-DD'),
  end: moment('21-01-2023', 'DD-MM-YYYY').format('YYYY-MM-DD')
}

如果是带时间的日期（如21-01-2023 14:55），只需调整Moment.js的解析格式参数：

start: moment('21-01-2023 14:55', 'DD-MM-YYYY HH:mm').toISOString()

方案二：全局统一转换所有事件日期 #

通过FullCalendar的eventDataTransform钩子，批量处理所有事件的日期格式，无需逐个修改事件数据：

<html>
  <head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
  </head>

  <body>
    <h2>Translate FullCalendar v2</h2>
    <center>
    <div id="calendar"></div>
    </center>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/lang-all.js"></script>

<script>
$(document).ready(function(){
     $('#calendar').fullCalendar({
          lang: 'fr',
          // 添加全局日期转换钩子
          eventDataTransform: function(eventData) {
            // 处理start日期，兼容带/不带时间的格式
            if (eventData.start) {
              eventData.start = moment(eventData.start, ['DD-MM-YYYY HH:mm', 'DD-MM-YYYY']).toDate();
            }
            // 处理end日期
            if (eventData.end) {
              eventData.end = moment(eventData.end, ['DD-MM-YYYY HH:mm', 'DD-MM-YYYY']).toDate();
            }
            return eventData;
          },
          events: [
                  {
                    title: '全天事件',
                    start: '2023-01-01'
                  },
                  {
                    title: '长期事件',
                    start: '2023-01-07',
                    end: '2023-01-10'
                  },
                  {
                    title: '自定义格式日期的长事件',
                    start: '20-01-2023',
                    end: '21-01-2023'
                  },
                  {
                    title: '带时间的自定义格式事件',
                    start: '21-01-2023 14:55',
                    end: '21-01-2023 16:30'
                  }
          ]
    });
});
</script>

  </body>
</html>

说明 #

• Moment.js的moment(dateStr, format)方法可以精准解析指定格式的日期字符串，传入格式数组['DD-MM-YYYY HH:mm', 'DD-MM-YYYY']可同时兼容带时间和不带时间的日期。
• toDate()方法将Moment对象转换为原生Date对象，FullCalendar可直接识别。

内容的提问来源于stack exchange，提问作者stratos equation