FullCalendar中文文档:点击和选中

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

FullCalendar提供了丰富的事件交互选项设置,FullCalendar日历中的每个元素包括头部、日期、事件等都可以设置点击事件触发各种回调,还有日期范围的选择设置也有很多个性化选项。

允许天/周名称是否可点击,包括周次weekNumber,点击之后可以跳转到对于的天/周视图,默认false

$('#calendar').fullCalendar({
    navLinks: true
});

查看demo

navLinkDayClick

当点击天名称的时候触发回调函数,触发函数后不会跳转到对应的视图。

$('#calendar').fullCalendar({
    navLinks: true,
    navLinkDayClick: function(date, jsEvent) {
        console.log('day', date.format()); // date is a moment
        console.log('coords', jsEvent.pageX, jsEvent.pageY);
    }
});

查看demo

navLinkWeekClick

当点击日历左侧的周数(第几周)时,触发回调函数。触发函数后不会跳转到对应的视图。

$('#calendar').fullCalendar({
    navLinks: true,
    navLinkWeekClick: function(weekStart, jsEvent) {
        console.log('week start', weekStart.format()); // weekStart is a moment
        console.log('coords', jsEvent.pageX, jsEvent.pageY);
    }
});

查看demo

dayClick

当用户点击日历上面某一天的时候触发,回调方法:

function( date, jsEvent, view, [ resourceObj ] ) { }

date是用户点击的那一天的Date对象,用户点击日程周视图和日程天视图的时间槽也一样的。

当用户点击日程周视图和日程天视图的时间槽时,allDay是false,其他全是true。

jsEvent 是原生的 javascript 事件,包含“点击坐标”之类的信息。

view 是当前的 View Object 。

在dayClick回调函数内部,this 是当前点击那天的<td>标签

$('#calendar').fullCalendar({
    dayClick: function(date, jsEvent, view) {
        alert('Clicked on: ' + date.format());
        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
        alert('Current view: ' + view.name);
        // change the day's background color just for fun
        $(this).css('background-color', 'red');
    }
});

查看demo

eventClick

当点击日历中某个事件的时候触发 eventClick 回调:

function( event, jsEvent, view ) { }

event 是 Event Object 对象,包含了日程的信息(例如日期,标题等)

jsEvent 是原生的 javascript 事件,包含“点击坐标”之类的信息。

view 是当前的 View Object 。

在 eventClick 回调函数内部,this 是当前点击那个日程的<div>,示例:

$('#calendar').fullCalendar({
    eventClick: function(calEvent, jsEvent, view) {
        alert('Event: ' + calEvent.title);
        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
        alert('View: ' + view.name);

        // change the border color just for fun
        $(this).css('border-color', 'red');

    }
});

查看demo

eventMouseover

当鼠标移动到某个事件上的时候触发:

function( event, jsEvent, view ) { }

event 是 Event Object 对象,包含了日程的信息(例如日期,标题等)

jsEvent 是原生的 javascript 事件,包含“点击坐标”之类的信息。

view 是当前的 View Object 。

在 eventClick 回调函数内部,this 是当前点击那个日程的<div>

eventMouseout

当鼠标移出到某个事件上的时候触发:

function( event, jsEvent, view ) { }

event 是 Event Object 对象,包含了日程的信息(例如日期,标题等)

jsEvent 是原生的 javascript 事件,包含“点击坐标”之类的信息。

view 是当前的 View Object 。

在 eventClick 回调函数内部,this 是当前点击那个日程的<div>

Touch Support

支持触控。可用于拖动事件等效果。详情请参考:Touch Support

selectable

是否允许用户单击或者拖拽日历中的天和时间隙。默认false

selectHelper

设置是否在用户拖拽事件的时候绘制占位符。值是布尔值,默认值为false。此选项只对日程周视图有效。

置为 true 的时候,当用户拖拽事件的时候,会绘制一个占位符(和google calendar比较像),设置为 false (默认)的时候,和所有单元格一样。

unselectAuto

设置当点击页面其他地方的时候,是否清除已选择的区域,值为布尔类型,默认值 true。只有当 selectable 设置为true的时候才有效。

unselectCancel

指定某些元素忽略 unselectAuto选项(貌似必须是form表单)。值为字符串类型,默认为空。遵循 Jquery selecter,点击元素,不会清除选中状态。例如页面上有一个“创建日程”按钮(class为btn)的时候,用户点击此按钮,就不能清除当前已经选中的。因此你要有个form表单:

<form class="my-form">
    <button onclick="return false">创建日程</button>
</form>

然后设置unselectCancel:

unselectCancel: ".my-form"

之后你点击“创建日程”按钮,已经在日程表中选中的就不会被清除。

selectOverlap

确定是否允许用户选择事件占用的时间段。值可以是布尔型和函数,默认false

如果selectable是激活的,并且当前选项设置为false,则用户不能选择日历中的事件占用的时间段,而如果当前选项设置为true,则可以任意选择事件占用的时间段。

selectConstraint

将用户选择限制到某些时间窗口。仅当selectable选项是激活状态时可用。值为事件id或对象。

selectAllow

使用回调函数精确控制可选区域。

function(selectInfo)

selectInfo 对象有3个属性:

start:开始时间

end:结束时间

resourceId:资源id

selectMinDistance

在鼠标按下后允许滑行一定的距离可以选择。值为整型,默认是0,即不限制鼠标必须移动的距离。

selectLongPressDelay

在可触屏设备上,按下日期多长时间后可选择,默认1000,单位ms。

select

在日历中选择某个时间之后触发该回调函数。

function( start, end, jsEvent, view, [ resource ] )

start:表示你选中区域的开始时间,Date对象。

end:表示你选中区域的结束时间,Date对象。当allday为true的时候,endDate可以包括最后一天(其实就是<和<=的区别)。

jsEvent:是原始Js event对象,包含鼠标坐标等。如果是通过 select方法 选中的,jsEvent是undefined。

unselect

当前选中的时间段被清除时触发unselect回调函数:

function( jsEvent, view )

选中状态被清除,有可能有以下几种原因:

1.用户点击空白位置(unselectAuto 设置为false的时候无效)

2.用户重新选择新的区域,旧区域清除。在新区域创建之前 unselect 就触发了。

3.前进或者后退当前的视图,或者切换到别的视图。

4.通过API调用了 unselect方法。

jsEvent 是原始Js event对象,包含鼠标坐标等。如果是通过 unselect方法 选中的,jsEvent是undefined。

select

方法名,用来选中一个时间段。

.fullCalendar( 'select', start, [ end ], [ resource ] )

startend至选中的开始时间和结束时间。

unselect

方法名,清除所有的选中区域。

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

2条评论

  • 向往远方

    怎么多选日期 求大神指点

  • ℡城府°

    怎么更改 日期字体的颜色 求大神指点