数据之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/