FullCalendar: 动态获取数据

最新推荐文章于 2025-04-24 14:13:50 发布

scut_少东

最新推荐文章于 2025-04-24 14:13:50 发布

阅读量1.7w

点赞数 2

分类专栏：前端插件文章标签：前端 FullCalendar

本文链接：https://blog.youkuaiyun.com/qq_33594380/article/details/79738423

版权

本文介绍了在项目中使用FullCalendar日历插件时，如何动态从后台获取数据并根据数据状态显示不同背景颜色，按月份查找并重新渲染日历内容。遇到的问题是gotoDate方法在特定情况下无效，解决办法是遵循官方文档的日期跳转方式。FullCalendar显示日期时，始终保持42天的内容，但能准确跳转到指定月份的任何一天。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中需要用到日历插件，在进行一番比较之后选择了FullCalendar，但是看官方文档的过程中发现文档写得不是很友好（也可能是国人跟老外的思维方式不同，哈哈哈...），所以花了不少时间来完成自己想要的功能。FullCalendar请自行安装，项目中涉及的功能如下：

1. 从后台获取数据并按数据状态显示不同背景颜色

关键点：将ajax请求插入calendar 的初始化代码中，将返回的数据转化为日历所需要的数据格式

FullCalendar 自带的数据渲染方式包括数组、json格式、function，这里只需要设置渲染方式为function即可。

_InitCalendar () {
  var containerEl = $('#calendar')
  // 保存this指针
  var _this = this
  // 渲染日历
  containerEl.fullCalendar({
    header: false, // 不显示头部
    contentHeight: 500, // 设置内容高度
    locale: 'zh-cn', // 语言
    editable: true, // 可编辑
    eventLimit: true, // allow "more" link when too many events
    // 使用function动态获取数据，start为开始时间，end为结束时间，这个不需要我们来设置，日历自动获取
    events: function (start, end, timezone, callback) {
      let from = _this.GmtToStr(start._d)
      let to &#

最低0.47元/天解锁文章