现在的位置: 首页 > web前端 > 正文

FullCalendar中文文档:点击和选中

2020年02月12日 web前端 ⁄ 共 3781字 ⁄ 字号 评论关闭

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 是当前点击那个日程的<p>,示例:

$('#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 是当前点击那个日程的<p>


eventMouseout

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

function( event, jsEvent, view ) { }

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

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

view 是当前的 View Object 。

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


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' )

以上就上有关FullCalendar中文文档:点击和选中的相关介绍,要了解更多Fullcalendar内容请登录学步园。

抱歉!评论已关闭.