资讯专栏INFORMATION COLUMN

FullCalendar插件的基本使用

import. / 1156人阅读

摘要:插件的依赖文件插件的使用页面结构设置日历头部信息,如果设置为,则不显示头部信息。设置日历的高度,包括日历头部,默认未设置,高度根据值自适应。

先说一下我的另一博客地址: https://home.cnblogs.com/u/bllx/

FullCalendar的选择

前段时间,一直在开发考勤系统,当时为满足设计的需求,选了好几个插件,最后决定采用Fullcanlendar的插件。感觉这个插件可以满足现阶段的功能开发需求;因为设计图是日历块的展示以及每天的日历还有功能需求点,因此,想到了可以实现备忘录的功能的FullCalendar插件。

插件的使用

为了实现设计图,插件自身的样式还是有些丑的,因此,很多样式细节需要修改,插件的使用难点在于实现数据的渲染。

1、插件的依赖文件

  
  
  
  
  
2、插件的使用
$("#calendar").fullCalendar({
                    /*设置日历头部信息,如果设置为false,则不显示头部信息。
                     * 包括left,center,right左中右三个位置都可以对应一下配置
                     * title:显示当前月份/周、日信息
                     * prev:用于切换到上一月/周/日视图的按钮
                     * next:用于切换到下一月/周/日视图的按钮
                     * prevYear:用于切换到上一年视图的按钮
                     * nextYear:用于切换到下一年视图的按钮
                     * */
                    header:{
                            left: "",
                            center: "Fullcanlendar示例demo",
                            right: "today prev,next"
                            },
                    theme:false,//如果设置为true,则需要加载jquery ui相关css和js文件,默认值为false
                    firstDay:1,//设置一周中显示的第一天是哪天,周日是0,周一是1,类推
                    isRTL:false,//设置为ture时则日历从右往左显示
                    weekends:true,//是否显示周末,设为false则不显示周六和周日。默认值为true
                    hiddenDays:[],//隐藏一周中的某一天或某几天,数组形式,如隐藏周二和周五:[2,5],默认不隐藏,除非weekends设置为false。
                    weekMode:"fixed",//在月视图里显示周的模式,因为每月周数可能不同,所以月视图高度不一定。fixed:固定显示6周高,日历高度保持不变liquid:不固定周数,高度随周数变化variable:不固定周数,但高度固定
                    weekNumbers:false,//是否在日历中显示周次(一年中的第几周),如果设置为true,则会在月视图的左侧、周视图和日视图的左上角显示周数。
                    weekNumberCalculation:"iso",//周次的显示格式。
                    //height:600,//设置日历的高度,包括header日历头部,默认未设置,高度根据aspectRatio值自适应。
                    //contentHeight://设置日历主体内容的高度,不包括header部分,默认未设置,高度根据aspectRatio值自适应。
                    aspectRatio:1.35,//设置日历单元格宽度与高度的比例。
                    handleWindowResize:true,//是否随浏览器窗口大小变化而自动变化。
                    render:function(view){
                        console.log("render",view)
                    },//method,绑定日历到id上。$("#id").fullCalendar("render");
                    destroy:function(){
                        
                    },
                    weekNumbers : false,     //是否在视图左边显示这是第多少周,默认false
            
                    eventLimit: true,       //数据条数太多时,限制各自里显示的数据条数(多余的以“+2more”格式显示),默认false不限制,支持输入数字设定固定的显示条数
     
                    viewRender : function(view,element){//在视图被渲染时触发(切换视图也触发) 参数view为视图对象,参数element为Jquery的视图Dom
                            
                    },
      
                    dayRender : function(date, cell){//日期格式Render钩子函数(我没理解清楚)
                        console.log("↓↓↓dayRender↓↓↓");
                        console.log(date);
                        console.log(cell);
                    },
                    windowResize : function(){//浏览器窗体变化时触发
                        console.log("---windowResize---");
                    },
    
                    allDayText : "全天",            //自定义全天视图的名称
                    slotDuration : "01:00:00",      //一格时间槽代表多长时间,默认00:30:00(30分钟)
                    slotLabelFormat : "H(:mm)a",    //日期视图左边那一列显示的每一格日期时间格式
                    slotLabelInterval : "02:00:00", //日期视图左边那一列多长间隔显示一条日期文字(默认跟着slotDuration走的,可自定义)
                    snapDuration : "05:00:00",      //其实就是动态创建一个日程时,默认创建多长的时间块
      
                    slotEventOverlap : false,       //相同时间段的多个日程视觉上是否允许重叠,默认true允许
    
                    noEventsMessage : "L没数据啊",   //listview视图下,无数据时显示提示
                    defaultDate  : "2018-09-10",    //默认显示那一天的日期视图getDates(true)
                    nowIndicator : true,            //周/日视图中显示今天当前时间点(以红线标记),默认false不显示
                    monthNames : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份自定义命名
                    monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份缩略命名(英语比较实用:全称January可设置缩略为Jan)
                    dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],       //同理monthNames
                    dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  //同理monthNamesShort
                    weekNumberTitle : "周",         //周的国际化,默认为"W"
    
                    eventLimitText  : "更多",       //当一块区域内容太多以"+2 more"格式显示时,这个more的名称自定义(应该与eventLimit: true一并用)
                    dayPopoverFormat : "YYYY年M月d日", //点开"+2 more"弹出的小窗口标题,与eventLimitClick可以结合用
                    navLinks : true,                // “xx周”是否可以被点击,默认false,如果为true则周视图“周几”被点击之后进入日视图。本地测试:没什么效果
                      
                    dayClick: function(date, jsEvent, view) {//空白的日期区,单击时触发
                        console.log("↓↓↓dayClick↓↓↓");
                        console.log("Clicked on: " + date.format());
                        console.log("Coordinates: " + jsEvent.pageX + "," + jsEvent.pageY);
                        console.log("Current view: " + view.name);
                        
                        //$(this).css("background-color", "red");
                    },
                    eventClick: function(calEvent, jsEvent, view) {//日程区块,单击时触发
                        console.log(jsEvent.target)
                        alert(jsEvent.target.innerHTML)
                        console.log("↓↓↓eventClick↓↓↓");
                        console.log("Event: " + calEvent.title);
                        console.log("Coordinates: " + jsEvent.pageX + "," + jsEvent.pageY);
                        console.log("Current view: " + view.name);
                        
                        return false;  //return false可以阻止点击后续事件发生(比如event中的url跳转事件)
                    },
                    eventMouseover: function(calEvent, jsEvent, view){//鼠标在日程区块上时触发
                            
                        console.log(jsEvent)
                        console.log(calEvent.start._i)
                        $(".hover-dateStr").html(calEvent.start._i)
                        console.log(jsEvent.pageY,jsEvent.pageX)
                        $(".hover-container").removeClass("none").animate({"top":jsEvent.pageY,"left":jsEvent.pageX})
                        if(!canRun){
                            // 判断是否已空闲,如果在执行中,则直接return
                            return;
                        }
                    },
                    eventMouseout: function(calEvent, jsEvent, view){//鼠标从日程区块离开时触发
                        $(".hover-container").addClass("none")
                    },
                    selectable: false,           //允许用户可以长按鼠标选择多个区域(比如月视图,可以选中多天;日视图可以选中多个小时),默认false不能选择多区域的
                    selectHelper: true,         //接selectable,周/日视图在选择时是否预先画出“日程区块”的样式出来
                    unselectAuto : true,        //是否点击页面上的其他地方会导致当前的选择被清除,默认true
                    unselectCancel : "",        //一种方法来指定元素,会忽略unselectauto选项,默认""
                    selectOverlap : true,       //确定用户是否被允许选择被事件占用的时间段,默认true可占用时间段
                    
                    selectAllow : function(selectInfo){ //精确的编程控制用户可以选择的地方,返回true则表示可选择,false表示不可选择
                        console.log("↓↓↓selectConstraint↓↓↓");
                        console.log("start:"+selectInfo.start+"|end:"+selectInfo.end+"|resourceId:"+selectInfo.resourceId);
                        return true;
                    },
                    select: function(start, end,jsEvent,view) { //点击空白区域/选择区域内容触发
    
                    },
                    unselect : function(view, jsEvent){//选择操作取消时触发
                        console.log("↓↓↓unselect↓↓↓");
                        console.log("view:"+view);
                    },
                      
                    lazyFetching : true,        //是否启用懒加载技术--即只取当前条件下的视图数据,其它数据在切换时触发,默认true只取当前视图的,false是取全视图的
                    defaultTimedEventDuration : "02:00:00",     //在Event Object中如果没有end参数时使用,如start=7:00pm,则该日程对象时间范围就是7:00~9:00
                    defaultAllDayEventDuration : { days: 1 },  //默认1天是多长,(有的是采用工作时间模式,所以支持自定义)
                    loading : function(isLoading, view){ //视图数据加载中、加载完成触发
                            console.log("↓↓↓loading↓↓↓");
                            if(isLoading == true){
                                console.log("view:"+view+",开始加载");
                            }else if(isLoading == false){
                                console.log("view:"+view+",加载完成");
                            }else{
                                console.log("view:"+view+",除非天塌下来否则不会进这个分支");
                            }
                        },
          
                        eventOrder : "title",           //多个相同的日程数据排序方式,String / Array / Function, 默认值: "title"
                        eventRender : function(event, element, view) {          //当Event对象开始渲染时触发
                            console.log("eventRender():"+event.title);
                        },
                        eventAfterAllRender : function(view){console.log("eventAfterAllRender();");},   //当所有Event对象渲染完成时触发
                        editable: true,                 //支持Event日程拖动修改,默认false
                        eventStartEditable : true,      //Event日程开始时间可以改变,默认true,如果是false其实就是指日程块不能随意拖动,只能上下拉伸改变他的endTime
                        eventDurationEditable : false,  //Event日程的开始结束时间距离是否可以改变,默认true,如果是false则表示开始结束时间范围不能拉伸,只能拖拽
         
                        dragOpacity:0.2,                //拖拽时不透明度,0.0~1.0之间,数字越小越透明
                        dragScroll : true,              //是否在拖拽时自动移动容器,默认true
                        eventOverlap : true,            //拖拽时是否重叠
                        eventConstraint : {     //限制拖拽拖放的位置(即限制有些地方拖不进去):an event ID, "businessHours", object
                            start: "10:00",     // a start time (10am in this example)
                            end: "18:00",       // an end time (6pm in this example)
                            dow: [ 1, 2, 3, 4 ] // days of week. an array of zero-based day of week integers (0=Sunday)  (Monday-Thursday in this example)
                        },
                        longPressDelay : 1000,  //面向可touch设备(如移动设备),长按多少毫秒即可拖动,默认1000毫秒(1S)
                        eventDragStart : function(event, jsEvent, ui, view){    //日程开始拖拽时触发
                            console.log("eventDragStart():"+event.title);
                        },
                        eventDragStop : function(event, jsEvent, ui, view){     //日程拖拽停止时触发
                            console.log("eventDragStop():"+event.title);
                        },
                        eventDrop : function(event, delta, revertFunc, jsEvent, ui, view){  //日程拖拽停止并且已经拖拽到其它位置了
                            console.log("eventDrop():"+event.title);
                        },
                        eventResizeStart : function( event, jsEvent, ui, view ) {       //日程大小调整开始时触发
                            console.log("eventResizeStart():"+event.title);
                        },
                        eventResizeStop : function(event, jsEvent, ui, view){           //日程大小调整停止时触发
                            console.log("eventResizeStop():"+event.title);
                        },
                        eventResize : function(event, delta, revertFunc, jsEvent, ui, view){    //日程大小调整完成并已经执行更新时触发
                            console.log("eventResize():"+event.title);
                        },
                        events:[
                                    {
                                        "time": "9:20--18:20",
                                        "antualTime":"9:40--18:40",
                                        "start": "2018-09-01"
                                        
                                    },
                                    {
                                        "time": "9:40--18:40",
                                        "antualTime":"9:40--18:40",
                                        "start": "2018-09-02"
                                    }
                                ]
                    });
3、获取数据

如果将数据源向上述代码中放置的话,是直接一次渲染所有数据,在切换不同月份的时候,将不会再次渲染,这就会在页面一开始加载时请求服务器,渲染所有数据,源码中在切换前后相邻月份的时候,也是重新渲染了数据,我们想要的是在切换月份的时候,再去请求服务器获取该月份的数据

//初始化日程表  
                   events:function(start, end, timezone,callback){ 
                        var date = this.getDate().format("YYYY-MM");
                        var arr=date.split("-");
                        var events = loopMonthDay(arr[0],arr[1]);// loopMonthDay(arr[0],arr[1]);是自己封装的函数
                        callback(events);//回调中执行渲染
                   }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98876.html

相关文章

  • FullCalendar插件基本使用

    摘要:插件的依赖文件插件的使用页面结构设置日历头部信息,如果设置为,则不显示头部信息。设置日历的高度,包括日历头部,默认未设置,高度根据值自适应。 先说一下我的另一博客地址: https://home.cnblogs.com/u/bllx/ FullCalendar的选择 前段时间,一直在开发考勤系统,当时为满足设计的需求,选了好几个插件,最后决定采用Fullcanlendar的插件。感觉这...

    qpal 评论0 收藏0
  • 前端插件

    摘要:原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库,目的是强化表格操作如搜索排序,并自动加入组件引入表格中,使用非常灵活简便。由推出,灵活扎实的建议列表函数库。 原文链接:前端插件库站点:前端开发文档博客:前端插件库 前端插件库 DataTables 官网:https://www.datatables.net/ DataTables是jQuery的JavaScr...

    高胜山 评论0 收藏0
  • 前端插件

    摘要:原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库,目的是强化表格操作如搜索排序,并自动加入组件引入表格中,使用非常灵活简便。由推出,灵活扎实的建议列表函数库。 原文链接:前端插件库站点:前端开发文档博客:前端插件库 前端插件库 DataTables 官网:https://www.datatables.net/ DataTables是jQuery的JavaScr...

    shusen 评论0 收藏0
  • OA管理系统 - SpringBoot + AmazeUi

    摘要:本项目由共同开发完成前端后端截图展示登录首页人员信息系统监控模块系统日志建议去在线浏览一下在线浏览地址地址码云地址设计书环境框架插件工具内置用于记录日志文件内置用户缓存前端使用的模板用于标签的代码高亮内置用于显示统一图标内置一个带备注 showImg(https://segmentfault.com/img/bVbnFyA?w=1920&h=949); 本项目由 zzzmh & csy...

    enrecul101 评论0 收藏0
  • Bootstrap 之 Metronic 模板学习之路 - (4)源码分析之脚本部分

    摘要:修复后得到合法的后在由布局引擎建立相应的对象。在标签放置于标签之后时,源码被所有浏览器泛指上常见的修复为正常形式,即。上一篇之模板的学习之路源码分析之部分下一篇之模板的学习之路主题布局配置 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门。 页面结尾部分(Javascripts 脚本文件) 我们来看看代码最后的代码,摘取如下: ...

    piglei 评论0 收藏0

发表评论

0条评论

import.

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<