广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    FullCalendar日历插件说明文档

    2018-04-13 09:16:59 次阅读 稿源:互联网
    零七广告

    FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档,方便参阅。当前版本1.6.4。 属性header title: 显示当前月份/周/日信息
    prev: 用于切换到上一月/周/日视图的按钮
    next: 用于切换到下一月/周/日视图的按钮
    prevYear:用于切换到上一年视图的按钮
    nextYear:用于切换到下一年视图的按钮{
    left: 'title',
    center: '',
    right: 'today prev,next'
    }themefalsebuttonIcons { prev: 'circle-triangle-w', next: 'circle-triangle-e' }firstDay0isRTLfalseweekends truehiddenDays []weekMode 'fixed'weekNumbersfalseweekNumberCalculation"iso"height  contentHeight  aspectRatio1.35handleWindowResizetruewindowResizecallback,当浏览器窗口变化时触发function,使用:
    $('#calendar').fullCalendar({
    windowResize: function(view) {
    alert('The calendar has adjusted to a window resize');
    }
    });
     rendermethod,绑定日历到id上。
    $('#id').fullCalendar('render');destroymethod,销毁id日历,把日历回复到初始化前状态。
    $('#id').fullCalendar('destroy');

    视图

    View视图对象的属性: 属性name titlestart end visStart visEnd

    View其他属性和方法 属性defaultView'month'getViewmethod,取得视图对象信息,如获取当前视图的标题内容:
    var view = $('#calendar').fullCalendar('getView'); alert("The view's title is " + view.title);changeViewmethod,切换视图
    .fullCalendar('changeView',viewName)
    viewName为5种视图中的一种

    日程选项
    属性allDaySlot trueallDayText'all-day'axisFormat 'h(:mm)tt'slotMinutes 30defaultEventMinutes120firstHour 6minTime0maxTime24slotEventOverlaptrue

    当前日期设置

    属性year month date prevmethod,进入到上一月(周、天)视图
    $('#calendar').fullCalendar('prev');nextmethod,进入到下一月(周、天)视图
    $('#calendar').fullCalendar('next');prevYearmethod,进入上一年视图nextYearmethod,进入下一年视图todaymethod,进入当天gotoDatemethod,指定进入日历中的某一天
    $('#calendar').fullCalendar( 'gotoDate', year [, month, [ date ]] )incrementDatemethod, 以当前时间为轴, 将日历向前, 或向后移动指定长度的时间, 比如: $('#calendar').fullCalendar(‘incrementDate’, -3, 2, -5)就表示将日历年份向前移动3年, 月份向后移动2月, day(天数)向前移动5天。getDatemethod,返回当前日历中的日期

    文本与时间定制

    属性timeFormat {agenda: ‘h:mm{ - h:mm}}columnFormat 见描述titleFormat day: 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2013
    }见描述buttonText next: '›', // ›
    prevYear: '«', // «
    nextYear: '»', // »
    today: 'today',
    month: 'month',
    week: 'week',
    day: 'day'
    }见描述monthNames
    见描述monthNamesShort 见描述dayNames 见描述dayNamesShort 见描述weekNumberTitle"W"

    鼠标单击和滑过
    属性dayClick $('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
    do something...
    }
    });
    date是点击的day的时间(如果在agenda view, 还包含时间),在月view下点击一天时,allDay是true,在agenda模式下,点击all-day的窄条时,allDay是true,点击其他的agenda view下的day则为false,jsEvent就是一个普通的javascript事件,包含的是click事件的基础信息。eventClick eventClick: function(calEvent, jsEvent, view) {
    do something...
    }
    });
    calEvent是日程(事件)对象,jsEvent是个javascript事件,view是当前视图对象。eventMouseover
    eventMouseout

    选择操作

    属性selectablefalseselectHelperfalseunselectAutotrueunselectCancel''selectcallback,被选中的函数回调,使用方法:
    function( startDate, endDate, allDay, jsEvent, view )
    startDate:被选中区域的开始时间
    endDate:被选中区域的结束时间
    allDay:是否为全天事件
    startDate:jascript对象
    startDate:当前视图对象
     unselectcallback,选中被取消时的回调,使用方法:
    function( view, jsEvent )selectmethod,选中某个时间,使用方法:
    $('#calendar').fullCalendar( 'select', startDate, endDate, allDay )unselectmethod,取消选中,使用方法:
    $('#calendar').fullCalendar( 'unselect' )

    日程事件数据

    Event Object,事件对象,用来存储一个日历事件信息的标准对象,只有title和start是必须的

    属性idtitleallDay startendurlclassNameeditablesourcecolorbackgroundColorborderColortextColor

    事件源对象

    以下是Event事件相关的参数属性说明。

    属性eventSources  allDayDefaulttrueignoreTimezonetruestartParam'start'endParam 'end'lazyFetchingtrueeventDataTransformcallback,将外部数据源转换成Fullcalendar可以处理的数据loadingcallback,日历开始加载的时候,isLoading参数为true触发一次,日历加载完毕,isLoading参数为false触发一次,用法:
    function(isLoading, view)updateEventmethod,更新日历空间中的一个日程事件,如果是重复的日程事件,则都更新。用法:
    $('#calendar').fullCalendar( 'updateEvent', event )clientEventsmethod,返回FullCalendar已经存储到客户端的CalEvents对象数组, 第二个参数和removeEvents方法的第二个参数意义相同, 只不过在过滤器中, 如果返回true, 则该CalEvent对象将被加入到返回的数组中。removeEventsmethod,从日历中删除一个日程事件. 第二个参数可以不填, 可以填id, 可以是一个过滤器(一个函数, 接受CalEvent对象作为参数)。用法:
    $('#calendar').fullCalendar( 'removeEvents' [, idOrFilter ] )refetchEventsmethod,重新抓取所有的日程事件源上的日程事件并渲染它们。addEventSourcemethod,添加一个日程事件源,添加之后, FullCalendar会马上从该源获取日程事件, 并加载到日历中。第二个参数和定义Calendar时候使用的url参数一致。removeEventSourcemethod,移除一个日程事件源,该源上获取得到的日程时间也将被马上从日历中移除。

    事件渲染

    属性eventColor
    eventBackgroundColor
    eventBorderColor
    eventTextColoreventRender function(calEvent, element, view)eventAfterRender function( event, element, view ) { }eventDestroy function( event, element, view ) { }renderEventrerenderEvents

    日程事件拖动和缩放
    属性editablefalseeventStartEditabletruedragRevertDuration500dragOpacity '':1.0 //其他视图
    }见描述eventDragStart,
    eventDragStopcallback,日程事件被拖动之前和之后触发。这里的拖动不一定是一个有效的拖动,只要日程事件的控件被拖着动了,事件就触发。 可以从该对象中获取位移,位置等数据。用法: function( event, jsEvent, ui, view ) { }eventDropcallback,当拖拽完成并且时间改变时触发,用法:
    function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { }
    ayDelta 保存日程向前或者向后移动了多少天
    minuteDelta 这个值只有在agenda视图有效,移动的时间
    allDay 如果是月视图,或者是agenda视图的全天日程,此值为true,否则为falseeventResizeStart,
    eventResizeStopcallback,在一个日程事件改变大小之前之后发生(不一定要改变成功),用法:
    function( event, jsEvent, ui, view ) { }eventResizecallback,在日程事件改变大小并成功后调用, 参数和eventDrop参数用法一致。用法:
    function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { }

    日期工具

    函数formatDate $.fullCalendar.formatDate( date,formatString [,options ] )formatDates $.fullCalendar.formatDates( date1,date2,formatString [,options ] )parseDate $.fullCalendar.parseDate( string )parseISO8601 $.fullCalendar.parseISO8601( string [,ignoreTimezone ] )

    参考文献:

    FullCalendar 官方文档翻:http://www.cnblogs.com/mycoding/archive/2011/05/20/2052152.html

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告