FullCalendar: 动态获取数据

项目中需要用到日历插件,在进行一番比较之后选择了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 &#
  • 2
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
### 回答1: FullCalendar可以通过多种方式获取动态数据,以下是其中几种常见的方式: 1. 使用AJAX请求获取数据:可以通过AJAX请求从服务器获取动态数据,然后将数据传递给FullCalendar进行渲染。 2. 使用JSON数据源:FullCalendar支持使用JSON数据源来获取动态数据,可以将数据源的URL传递给FullCalendar,然后FullCalendar会自动从该URL获取数据并进行渲染。 3. 使用函数返回数据:可以通过编写一个函数来返回动态数据,然后将该函数传递给FullCalendarFullCalendar会调用该函数来获取数据并进行渲染。 总之,FullCalendar提供了多种获取动态数据的方式,可以根据具体需求选择合适的方式来获取数据。 ### 回答2: Fullcalendar是一款强大的日历插件,它支持多种视图模式,如月视图、周视图、日视图等,并且允许用户针对不同的事件进行操作,如添加、编辑、删除等。在使用Fullcalendar时,通常需要从服务器端获取动态数据,并将其渲染到相应的视图中。以下是Fullcalendar获取动态数据的一些方法和步骤: 1. 确定数据源格式:在使用Fullcalendar时,需要将数据源以JSON格式返回到客户端。数据源应该包含事件的相关属性,如标题、开始时间、结束时间、重复性等。 2. 将数据源嵌入Fullcalendar:可以使用Fullcalendar提供的事件数组或AJAX调用将数据源嵌入到Fullcalendar中。 3. 配置Fullcalendar属性:在将数据源嵌入Fullcalendar之前,需要设置Fullcalendar的一些属性,如视图类型、事件颜色、排序方式等。 4. 渲染数据源到Fullcalendar:一旦配置了Fullcalendar的属性和数据源,就可以将事件数据渲染到Fullcalendar中,以呈现出日历事件。 以上是Fullcalendar获取动态数据的一些方法和步骤。需要注意的是,Fullcalendar提供了丰富的API和插件,可以帮助开发人员更加灵活地调整日历的样式和功能,以满足不同的需求。同时,Fullcalendar还支持多语言、跨浏览器和响应式设计等特性,使它成为一款优秀的日历插件。 ### 回答3: fullcalendar 是一个功能强大的日历插件,它支持在网站上轻松添加交互性的全屏日历和事件日历。fullcalendar 使用标准日历显示,并提供了许多配置选项和 API,以便显示和操作事件数据。 要获取动态数据并在 fullcalendar 中显示它们,需要使用 fullcalendar 提供的 API。有三种方法可以获取动态数据:JSON,数组和函数。 1. JSON 数据 可以通过使用 fullcalendar 的 events 属性来提供 JSON 格式的事件数据。例如: ``` $('#calendar').fullCalendar({ events: '/events.json' }); ``` 在这种情况下,fullcalendar 会从 "/events.json" URL 中获取 JSON 数据,并将其显示在日历上。JSON 数据必须遵循特定的格式,具体可参考 fullcalendar 官方文档。 2. 数组 可以通过使用 fullcalendar 的 events 属性和数组来提供事件数据。例如: ``` $('#calendar').fullCalendar({ events: [ { title: 'Event 1', start: '2021-06-01' }, { title: 'Event 2', start: '2021-06-05', end: '2021-06-07' }, ] }); ``` 在这种情况下,fullcalendar 会直接使用提供的事件数据,并将其显示在日历上。 3. 函数 可以通过使用 fullcalendar 的 events 属性和函数来提供事件数据。例如: ``` $('#calendar').fullCalendar({ events: function(start, end, timezone, callback) { // AJAX 请求获取事件数据 $.ajax({ url: '/events.json', success: function(events) { callback(events); } }); } }); ``` 在这种情况下,函数会在 fullcalendar 初始化时执行,它通过 AJAX 请求从"/events.json" URL 获取事件数据。一旦成功获取数据,它将通过回调函数传递给 fullcalendar,以便显示在日历上。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值