FullCalendar中文文档:事件渲染和拖放

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

FullCalendar提供丰富的参数和事件回调函数的设置,方便开发者进行日程的快速开发。FullCalendar支持对日程事件进行渲染输出,支持对事件的拖放。

Coloring Events

你可以使用eventColor设置日程事件的颜色,例如:

$('#calendar').fullCalendar({
    events: [
        // my event data
    ],
    eventColor: '#378006'
});

eventBackgroundColoreventBorderColor,和 eventTextColor属性同样用来设置日程的颜色。如果要为特定的数据源设置颜色,参考 Event Source options。

Background Events

设置日程事件中的高亮背景色,可以参照Event Object中的rendering 属性设置值为:"background"

$('#calendar').fullCalendar({
    defaultDate: '2014-11-10',
    defaultView: 'agendaWeek',
    events: [
        {
            start: '2014-11-10T10:00:00',
            end: '2014-11-10T16:00:00',
            rendering: 'background'
        }
    ]
});

eventColor

设置所有日程事件的背景色和边框颜色,值为字符串类型。

你可以使用任何css的颜色格式,例如#f00#ff0000rgb(255,0,0)或者red

此设置可以被每个数据源(Event Source Object)的color属性和每个日程(Event Object)的color属性覆盖。

eventBackgroundColor

设置日程事件的背景色,值为字符串类型。

你可以使用任何css的颜色格式,例如#f00#ff0000rgb(255,0,0)或者red

此设置可以被每个数据源(Event Source Object)的backgroundColor属性和每个日程(Event Object)的backgroundColor属性覆盖。

eventBorderColor

设置日程事件的边框颜色,值为字符串类型。

你可以使用任何css的颜色格式,例如#f00#ff0000rgb(255,0,0)或者red

此设置可以被每个数据源(Event Source Object)的 borderColor 属性和每个日程(Event Object)的 borderColor 属性覆盖。

eventTextColor

设置日程事件的文字颜色,值为字符串类型。使用方法同上。

nextDayThreshold

当一个事件的结束时间跨越到第二天的时间时,就像一天中的时间呈现最短的持续时间。默认:“09:00:00”(上午9点)

eventOrder

确定具有相同日期/时间的的垂直排序方式。

String / Array / Function, default: "title"

默认情况下,FullCalendar决定具有较长持续时间和较早开始时间的事件被排序在其他事件之上。 但是,事件往往具有相同的确切的开始时间和持续时间,对于全天事件尤其如此。 默认情况下,当发生这种情况时,事件按标题按字母顺序排序。 eventOrder提供了覆盖此行为的功能。

eventRenderWait

在渲染事件之前,操作后等待的毫秒数。整型,默认关闭。

当此值指定为毫秒数值时,日历将在任何可能导致事件重新渲染的操作(例如renderEvent和updateEvent)之后开始等待。 在这段时间过后,日历将一起呈现所有事件。 由于性能的原因,这会减少重新使用的次数。

eventRender

回调函数,当日程事件被渲染的时候触发:

function( event, element, view ) { }

event是被渲染的Event Object

element是被创建的jquery <div>对象,用来渲染日程。标题和时间已经被填充进去。

eventRender函数可以修改 element 元素,返回一个新的DOM元素插入到日程表中。或者返回false,阻止该日程的插入。

eventRender可以用来附加jquery 插件到dom元素上,例如 gTip 插件:

$('#calendar').fullCalendar({
    events: [
        {
            title: 'My Event',
            start: '2010-01-01',
            description: 'This is a cool event'
        }
        // more events here
    ],
    eventRender: function(event, element) {
        element.qtip({
            content: event.description
        });
    }
});

eventAfterRender

回调函数,当日程事件被渲染到日程表后触发:

function( event, element, view ) { }

eventAfterAllRender

回调函数,当所有事件完成渲染后触发:

function( view ) { }

eventDestroy

回调函数,当事件元素从DOM中删除之前触发:

function( event, element, view ) { }

event是 Event Object 对象。

element是要被移除的 jQuery 对象。

renderEvent

方法,渲染一个新的日程事件到日程表上:

.fullCalendar( 'renderEvent', event [, stick ] )

event是 Event Object 对象,至少含有 title 和 start 属性。

通常,用 renderEvent 方法添加的日程会在日程表重载数据(refetches)之后消失。可以将stick设置为true

renderEvents

方法,批量渲染新的事件到日程表上。方法同上,只是多个事件以数组的形式呈现。

.fullCalendar( 'renderEvents', events [, stick ] )

rerenderEvents

重新渲染所有事件到日程表中。

.fullCalendar( 'rerenderEvents' )

Touch Support

自2.7.0版以来,FullCalendar改进了对触摸设备的支持。 Scheduler v1.3.0及更高版本中也提供触摸支持。 触摸支持包括:

平滑滚动

通过longPressDelay进行时间范围选择

事件通过longPressDelay进行拖放/调整大小

为了让最终用户开始拖放事件,他们必须先点击并按住事件才能“选择”它!

editable

是否允许事件可以被编辑,值为布尔类型,默认值为false。 editable 决定了日程是否可以被调整和拖拽,这个过程会同时调整开始和结束时间。如果想单独设置是否可以拖拽和调整,可以使用eventStartEditableeventDurationEditable代替。

eventStartEditable

是否允许通过拖拽调整日程的开始时间,值为布尔类型,默认值为true。此设置可以覆盖数据源(Event Source Object)的 startEditable 属性和单个日程(Event Object)的 startEditable 属性。

eventDurationEditable

是否允许通过resize调整日程的结束时间,值为布尔类型,默认值为true。此设置可以覆盖数据源(Event Source Object)的 durationEditable 属性和单个日程(Event Object)的 durationEditable 属性。

dragRevertDuration

当拖动事件失败后,恢复到原来的位置所需时间,默认500ms。

dragOpacity

当事件被拖动时呈现的透明度,浮点型,默认0.75。取值范围0.0~1.0。

dragScroll

是否在事件拖放或选择时自动移动滚动容器。布尔值,默认值:true 如果启用,一旦鼠标靠近边缘,滚动容器将自动滚动。

eventOverlap

当拖动或缩放时,是否允许日历中的时间相互重叠。默认:true。如果为false则不允许重叠。

eventConstraint

限制事件拖动和调整到特定的时间窗口。

一个事件ID,“businessHours”,对象 如果给出了一个事件ID(很可能是一个字符串),那么正在被拖动或调整大小的事件必须由至少一个由给定事件ID链接的事件完全包含。

如果提供"businessHours",则被拖动或调整大小的事件必须在本周的营业时间内(默认情况下,周一至周五上午9点至下午5点)完全包含。

eventAllow

事件拖放精准控制。该函数要返回true或者false

function(dropInfo, draggedEvent)

longPressDelay

对于触摸设备,需要按下事件多长时间才可以拖动事件或变为可选状态。默认:1000(1s)。

eventLongPressDelay

对于触摸设备,用户在事件变得可拖动之前最多按下的时间。默认:1000(1s)。

eventDragStart

回调函数,当事件开始拖动时触发:

function( event, jsEvent, ui, view ) { }

event是 Event Object 对象,包含当前日程的信息(时间,标题等)

jsEvent 是原生的js对象,包含鼠标点击坐标等信息。

ui空对象,在2.1版本前是 jQuery UI 对象。

view 是当前的 View Object。

eventDragStop

回调函数,当事件拖动停止后触发:

function( event, jsEvent, ui, view ) { }

这个回调被保证在用户拖动一个事件之后被触发,即使这个事件不改变日期/时间。 在事件信息被修改(如果移动到新的日期/时间)之前,触发eventDrop回调之前触发。

参数说明同上。

eventDrop

回调函数,当拖动结束且日程移动另一个时间时触发:

function( event, delta, revertFunc, jsEvent, ui, view ) { }

event是 Event Object 对象,包含当前日程的信息(时间,标题等)

delta 表示事件被移动的时间量

revertFunc 是一个函数,如果被调用的话,日程会恢复到拖拽前的时间(就是被还原),当ajax失败的时候比较有用。

jsEvent 是原生的js对象,包含鼠标点击坐标等信息。

ui 是 jQuery UI 对象。

view 是当前的 View Object。

$('#calendar').fullCalendar({
    events: [
        // events here
    ],
    editable: true,
    eventDrop: function(event, delta, revertFunc) {

        alert(event.title + " was dropped on " + event.start.format());

        if (!confirm("Are you sure about this change?")) {
            revertFunc();
        }

    }
});

查看DEMO

eventResizeStart

回调函数,当日程事件调整(resize)开始时触发:

function( event, jsEvent, ui, view ) { }

event是 Event Object 对象,包含当前日程的信息(时间,标题等)

jsEvent 是原生的js对象,包含鼠标点击坐标等信息。

ui空对象,在2.1版本前是 jQuery UI 对象。

view 是当前的 View Object。

eventResizeStop

回调函数,当日程事件调整(resize)结束的时候触发:

function( event, jsEvent, ui, view ) { }

用户调整日程之后肯定会触发此回调函数,即使日程没有发生变化。eventResizeStop 在日程信息修改之前触发,并且早于 eventResize 回调。

参数说明同上。

eventResize

回调函数,当日程事件调整(resize)结束并且事件被改变时触发:

function( event, delta, revertFunc, jsEvent, ui, view ) { }

event是 Event Object 对象,包含当前日程的信息(时间,标题等)

delta 表示事件被移动的时间量

revertFunc 是一个函数,如果被调用的话,日程会恢复到拖拽前的时间(就是被还原),当ajax失败的时候比较有用。

jsEvent 是原生的js对象,包含鼠标点击坐标等信息。

ui空对象,在2.1版本前是 jQuery UI 对象。

view 是当前的 View Object。

$('#calendar').fullCalendar({
    events: [
        // events here
    ],
    editable: true,
    eventResize: function(event, delta, revertFunc) {

        alert(event.title + " end is now " + event.end.format());

        if (!confirm("is this okay?")) {
            revertFunc();
        }

    }
});

查看DEMO

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

1条评论

  • 寂丶寞乀香丿烟

    你好 ,在fullcalendar中 点击下一月或周后,按回车键导致跳转下一月(周),有是办法取消回车键等于翻译