FullCalendar中文文档:Event日程事件

原创文章 作者:月光光 2017年11月15日 20:40helloweba.com 标签:Fullcalendar 

FullCalendar用作日程安排,其日程中的事件是日历中的主体内容。FullCalendar提供了很多日程事件的属性设置、方法调用以及回调函数,方便开发者快速掌握FullCalendar。

Event Object

Event Object 是一个 js 对象,存储日历表的日程事件信息,支持以下属性:

属性 说明
id string 或者 int 类型,事件的唯一标识。重复事件的不同实例应该都具有相同的ID。
title String,必选,事件名称。
allDay 布尔型,truefalse,可选项。
事件是否发生在特定的时间。 该属性影响是否显示事件的时间。 此外,在议程视图中,确定是否显示在“全天”部分。
start 事件开始日期/时间,必选。格式为ISO8601字符串或UNIX时间戳
end 事件结束日期/时间,可选。格式为ISO8601字符串或UNIX时间戳
url 事件链接地址,字符串,可选。
当单击事件的时候会跳转到对应的url。
className string 或者 Array 类型,可选。
一个css类(或者一组),附加到事件的 DOM 元素上。
editable truefalse,可选。
只针对当前的单个事件,其他事件不受影响。
startEditable truefalse,可选。
覆盖当前事件的eventStartEditable选项
durationEditable truefalse,可选。
覆盖当前事件的eventDurationEditable选项
resourceEditable truefalse,可选。
覆盖当前事件的 eventResourceEditable选项
rendering 允许渲染事件,如背景色等。可以为空,也可以是"background", or"inverse-background"
overlap truefalse,可选。
覆盖当前事件的eventOverlap选项。
如果设置为false,则阻止此事件被拖动/调整为其他事件。 还可以防止其他事件在此事件中被拖动/调整大小。
constraint 事件id,"businessHours",对象,可选。
覆盖当前事件的eventConstraint选项。
source Event Source Object事件源
color 和 eventColor 作用一样,设置事件的背景色和边框。
backgroundColor 和 eventBackgroundColor 作用一样,设置事件的背景色。
borderColor 和 eventBorderColor 作用一样,设置事件的边框。
textColor 和 eventTextColor 作用一样,设置事件的文字颜色

除上述属性外,你还可以自定义非标准的属性字段,FullCalendar不会修改或删除这些字段。

Event Source Object

"event source"是Fullcalendar的事件数据源events,可以是你定义的一个数组,一个函数,一个返回json的接口,或者google calendar。

数组类型:

{
    events: [
        {
            title: 'Event1',
            start: '2011-04-04'
        },
        {
            title: 'Event2',
            start: '2011-05-05'
        }
        // etc...
    ],
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

函数:

{
    events: function(start, end, timezone, callback) {
        // ...
    },
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

json数据:

{
    url: '/myfeed.php',
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

Google日历咱就不说了。

Events事件源提供了很多属性可以设置:

属性 说明
id 当前事件源的id。可选,见getEventSourceById.
color 设置事件对象的color(颜色)属性。
backgroundColor 设置事件对象的backgroundColor(背景色)属性。
borderColor 设置事件对象的borderColor(边框色)属性。
textColor 设置事件对象的textColor(文本色)属性。
className 设置事件对象的className(class类名)属性。
editable 设置事件对象的editable(可编辑)属性。
startEditable 设置事件对象的startEditable属性。
durationEditable 设置事件对象的durationEditable属性。
backgroundColor 设置事件对象的resourceEditable属性。
rendering 设置事件对象的rendering属性。
overlap 设置事件对象的overlap属性。
constraint 设置事件对象的constraint属性。
allDayDefault 设置allDayDefault选项,仅限当前事件源。
eventDataTransform 设置eventDataTransform回调,仅限当前事件源。

events (as an array)

数组类型的事件数据源。事件数据以数组的形式给FullCalendar调用。

$('#calendar').fullCalendar({
    events: [
        {
            title  : 'event1',
            start  : '2017-11-01'
        },
        {
            title  : 'event2',
            start  : '2017-11-05',
            end    : '2017-11-07'
        },
        {
            title  : 'event3',
            start  : '2017-11-09T12:30:00',
            allDay : false // will make the time show
        }
    ]
});

请确保最后一个事件后不能有逗号,否则IE会出错。

你也可以使用eventSources属性设置多个数据源。

$('#calendar').fullCalendar({

    eventSources: [
        // your event source
        {
            events: [ // put the array in the `events` property
                {
                    title  : 'event1',
                    start  : '2010-01-01'
                },
                {
                    title  : 'event2',
                    start  : '2010-01-05',
                    end    : '2010-01-07'
                },
                {
                    title  : 'event3',
                    start  : '2010-01-09T12:30:00',
                }
            ],
            color: 'black',     // an option!
            textColor: 'yellow' // an option!
        }
        // any other event sources...
    ]
});

events (as a json feed)

返回json格式数据的接口,每当FullCalendar需要的数据的时候就会访问这个地址(例如用户在当前视图前进或者后退,或者切换视图),FullCalendar会判断需要的时间段,并且把这个时间放在get请求参数中。参数的命名由 startParam 和 endParam 选项决定(默认 start 和 end),参数的值采用ISO8601格式如:2013-12-01。

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

以上代码执行后,Fullcalendar会访问URL:

/myfeed.php?start=2013-12-01&end=2014-01-12&_=1386054751381

最后一个参数是为了防止浏览器缓存,也可以在events中设置cache参数来决定是否缓存。

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

最终myfeed.php返回的应该是json格式的数据。如果涉及到跨域的请求,可以使用JSONP

看一下是不是像jQuery的$.ajax方法:

$('#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
    }
});

多个事件源可以使用eventSources

官方英文文档:https://fullcalendar.io/docs/event_data/events_json_feed/

events (as a function)

自定义函数返回 Event Objects

function( start, end, timezone, callback ) { }

FullCalendar 会在需要数据的时候调用这个自定义函数,例如当用户切换视图的时候。

此函数会传入 startend参数(Date对象)来表示时间范围。timezone是指Fullcalendar当前使用的时区。另外还有 callback 函数,当自定义函数生成日程之后必须调用,callback的入参是 Event Objects 数组。

以下代码告诉我们如何使用事件函数加载XML格式的数据。

$('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) {
        $.ajax({
            url: 'myxmlfeed.php',
            dataType: 'xml',
            data: {
                // our hypothetical feed requires UNIX timestamps
                start: start.unix(),
                end: end.unix()
            },
            success: function(doc) {
                var events = [];
                $(doc).find('event').each(function() {
                    events.push({
                        title: $(this).attr('title'),
                        start: $(this).attr('start') // will be parsed
                    });
                });
                callback(events);
            }
        });
    }
});

多个事件源可以使用eventSources

eventSources

eventSources 是一种指定多个数据源的途径,值为数组类型。eventSources 是 events选项的一种替代。

在eventSources里可以是数组数据JSON数据函数数据数据源对象(Event Source Object)

$('#calendar').fullCalendar({
    eventSources: [
        '/feed1.php',
        '/feed2.php'
    ]
});

allDayDefault

allDayDefault 决定了在 Event Object 的 allday属性未指定时的默认值。allDayDefault 值为布尔类型,默认true

startParam

使用json接口的时候,定义开始时间(ISO8601时间字符串)的属性名。值为字符串类型的,默认为'start'

endParam

使用json接口的时候,定义结束时间(ISO8601时间字符串)的属性名。值为字符串类型的,默认为'end'

timezoneParam

使用json接口的时候,定义时区。值为字符串类型的,默认为'timezone'

lazyFetching

是否延迟加载数据,值为布尔类型,默认值为true

当定义为true的时候,FullCalendar 只有在真正需要的时候才去加载数据。例如,当你的日程表现在在月视图的二月,FullCalendar 会取整个二月的数据,在内部缓存起来,当用户切换到二月的周视图或者天视图的时候,FullCalendar 会自动从缓存中取得需要的数据。

当设置为false的时候,每次切换 FullCalendar 都会重新加载数据(不使用缓存)。

defaultTimedEventDuration

当没有设置事件的结束时间end时指定事件的持续时间,默认'02:00:00'即2小时。

defaultAllDayEventDuration

当事件为全天事件而没有设置结束end时间时指定事件的持续时间。默认是{ days: 1 }

forceEventDuration

如果未指定事件end结束时间,是否强制使用结束时间。默认false

eventDataTransform

回调函数,将自定义数据转换为标准的事件对象Event Object

function( eventData ) {}

该钩子函数(hook)允许您从JSON提要或其他事件源接收任意事件数据,并将其转换为FullCalendar接受的数据类型。 这让您轻松接受替代数据格式,而无需编写完全自定义的事件功能。

loading

回调函数,当获取数据开始和结束的时候触发:

function( isLoading, view )

AJAX开始获取数据的时候 isLoading 是true,结束的时候是false。view是当前的 View Object。此函数常常用来显示或隐藏加载图标。

updateEvent

方法,当更新事件时将事件渲染在日历上。

.fullCalendar( 'updateEvent', event )

event必须是日程的原生Event Object,可以通过 eventClick 回调或者 clientEvents 方法获得:

$('#calendar').fullCalendar({
    eventClick: function(event, element) {
        event.title = "CLICKED!";
        $('#calendar').fullCalendar('updateEvent', event);
    }
});

updateEvents

方法,当要更新多个事件并且渲染到日历时使用。

.fullCalendar( 'updateEvents', events )

clientEvents

方法,从FullCalendar 的缓存的数据中取得日历事件。

.fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array

此方法会从客户端缓存中获取 Event Objects 数组。

如果忽略idOrFilter参数的话,会取得全部数据。如果idOrFilter 是ID的话,会返回该ID的所有日程。idOrFilter 也可以是一个筛选函数,接受 Event Object 参数,返回布尔类型参数。

removeEvents

方法,删除Fullcalendar中的事件。

.fullCalendar( 'removeEvents' [, idOrFilter ] )

如果忽略idOrFilter参数的话,删除所有日程。如果 idOrFilter是ID的话,会删除该ID的所有日程。idOrFilter 也可以是一个筛选函数,接受 Event Object 参数,返回布尔类型参数(如果是true的话就删除)。

refetchEvents

方法,从各个数据源重新获取并且渲染数据。

.fullCalendar( 'refetchEvents' )

refetchEventSources

方法,重新获取一个或多个数据源。

.fullCalendar( 'refetchEventSources', sources )

sources可以是单个事件id或者多个事件数组。

addEventSource

方法,动态的添加一个数据源。

.fullCalendar( 'addEventSource', source )

数据源可以是一个数组,函数或者json接口。FullCalendar 会立刻从这个数据源获取日程并且渲染。

removeEventSource

方法,动态删除一个数据源。

.fullCalendar( 'removeEventSource', source )

该数据源的事件会立刻从日历中移除。

removeEventSources

方法,动态删除所有事件源或多个指定的事件源。

.fullCalendar( 'removeEventSources', optionalSourcesArray )

optionalSourcesArray未指定,将删除所有的事件源。

getEventSources

方法,获取所有的事件源对象(Event Source Object),返回数组。

.fullCalendar( 'getEventSources' )

getEventSourceById

方法,根据给定的时间id,检索获取事件源对象(Event Source Object)

.fullCalendar( 'getEventSourceById', id )
声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/454.html

0条评论