数据之events(json)
优质
小牛编辑
132浏览
2023-12-01
返回json格式数据的接口,每当FullCalendar需要的数据的时候就会访问这个地址(例如用户在当前视图前进或者后退,或者切换视图),FullCalendar会判断需要的时间段,并且把这个时间放在get请求
$('#calendar').fullCalendar({ events: '/myfeed.php' });
/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下 |
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_json_feed/