数据之events(json) – FullCalendar中文文档

2014-02-27 · 10 min read

FullCalendar 中文文档目录

返回 json 格式数据的接口,每当 FullCalendar 需要的数据的时候就会访问这个地址(例如用户在当前视图前进或者后退,或者切换视图),FullCalendar 会判断需要的时间段,并且把这个时间放在 get 请求参数中。参数的命名由 startParamendParam 选项决定(默认 start 和 end),参数的值总是 UNIX 时间戳(从 1970 年开始的时间戳)。

$('#calendar').fullCalendar({
  events: '/myfeed.php',
})

对于上面的代码,FullCalendar 会访问如下地址:

/myfeed.php?start=1262332800&end=1265011200&_=1263178646

_参数是自动生成的,防止接口缓存数据。跨域请求使用 JSONP。

1.5 版本之后,可以使用 Event Source options,如下:

$('#calendar').fullCalendar({
  eventSources: [
    // your event source
    {
      url: '/myfeed.php', // use the `url` property
      color: 'yellow', // an option!
      textColor: 'black', // an option!
    },

    // any other sources...
  ],
})

常用的 Event Source 设置可以查看这里。但是对于 json 数据源,还有以下两个属性:

字段说明
startParam设置此 Event Source 下的 startParam
endParam设置此 Event Source 下的 endParam

JQuery $.ajax#

你可以使用任何的 JQuer ajax 属性在 eventSource 对象中:

$('#calendar').fullCalendar({
  eventSources: [
    // your event source
    {
      url: '/myfeed.php',
      type: 'POST',
      data: {
        custom_param1: 'something',
        custom_param2: 'somethingelse',
      },
      error: function () {
        alert('there was an error while fetching events!')
      },
      color: 'yellow', // a non-ajax option
      textColor: 'black', // a non-ajax option
    },

    // any other sources...
  ],
})

上面是例子用单一 event 的写法是:

$('#calendar').fullCalendar({
  events: {
    url: '/myfeed.php',
    type: 'POST',
    data: {
      custom_param1: 'something',
      custom_param2: 'somethingelse',
    },
    error: function () {
      alert('there was an error while fetching events!')
    },
    color: 'yellow', // a non-ajax option
    textColor: 'black', // a non-ajax option
  },
})

动态 data 属性#

通过 GET 或者 POST 发送出去的 data 属性,可以通过函数动态的设置:

$('#calendar').fullCalendar({
  events: {
    url: '/myfeed.php',
    data: function () {
      // a function that returns an object
      return {
        dynamic_value: Math.random(),
      }
    },
  },
})

startParam 和 endParam 依然会自动添加。

缓存#

默认的,会有个_参数来防止缓存的影响。FullCalendar 通过设置 $.ajax 来实现这一点。如果你不想这么用,可以把 cache 设置为 true:

$('#calendar').fullCalendar({
  events: {
    url: '/myfeed.php',
    cache: true,
  },
})

官方英文文档:http://arshaw.com/fullcalendar/docs/event_data/events_array/