我的第一篇博客之fullcalendar的使用

最新推荐文章于 2024-06-13 09:59:09 发布

置顶

乘风浪漫

最新推荐文章于 2024-06-13 09:59:09 发布

阅读量5.3k

点赞数 2

分类专栏：技术文章标签：日历 fullcalendar 源码技术日程控件

本文链接：https://blog.csdn.net/qq_38116108/article/details/72427836

版权

第一篇博客，可能会很丑，可能会很蠢，可能会没人看，看了也可能不想看(因为一个人写的所以很乱哈哈，如果有问题懒得看的同学欢迎加入fullcalendar交流群： 620796673

有些注释也懒得写),但是这没关系，谁让我现在这么闲呢，哈哈！！！好吧虽然我是个菜鸡，但是还是得有一颗分享并且乐于助人的心的，接下来进入主题

由于工作中一个项目要用到一个预约功能，翻来覆去(在大牛的推荐下)还是决定使用fullcalendar这个日程管理控件，fullcalendar是一个非常强大并且API齐全的日程控件，官网上说是可以定制，原谅我修改只会改源码和重写QAQ，确实是还需要提升下自己的技术，接下来上代码跟效果图

嗯，丑了点，但是基本功能还是都能满足的，创建，修改，新增，删除，日历跳转，都OK

 var event=[];//数据源
        var isModifyDate=dialog({});//是否修改预约弹窗
        var doc=[];//医生源
        var msgShow=dialog({});//数据展示吸附窗
        var newBookingdialog=dialog({});//创建新预约弹窗
        var classState=['预约','已确认','咨询中','已挂号','治疗中','治疗完成','已结账','已离开','失约'];//预约状态
        var docmsg=``; //医生Select
        var statemsg=``;//治疗状态Select
        $('#makeCalendar').fullCalendar({
            header:{
                left:'agendaDay,agendaWeek  prev,next',
                center:'title',
                right:'today'
            },
            views: {
                agenda: {
                    eventLimit: 3, // 现在全天最多显示三个资源在agenda视图里
                },
                agendaDay: {
                    groupByResource: true,// 天视图  才显示医生资源视图
                },
            },
            //theme:true,
            //monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            //monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            defaultView:'agendaDay',
            editable:true,//是否可拖拽和改变大小
            height:'parent',//高度根据父元素
            slotEventOverlap:false,//议程视图中的定时事件是否可重叠。
            slotLabelFormat:'h:mma',//议程视图的垂直轴上显示的时间文本格式。
            slotLabelInterval:'00:20:00',//显示插槽的日期/时间的文本标记时间轴的频率。
            slotDuration:'00:10:00',//时隙的频率。
            minTime:'06:00:00',
            maxTime:'19:10:00',
            selectable: true, //允许用户拖动
            //weekNumbers:true,//左上角显示第几总周数
            dragRevertDuration:200,//拖动不成功后恢复到原始位置所需的时间。
            eventStartEditable:true,//允许事件的开始时间通过拖动进行编辑。
            groupByResource:false,//多日议程或基本视图是否应显示资源列。如果是这样，将资源标题放在日期标题之上。
            groupByDateAndResource:false,//多日议程或基本视图是否应显示资源列。如果是，将资源标题放在日期标题之下。
            businessHours:[{//强调日历上的某些时间段。
                dow:[1,2,3], //周
                start:'10:00',
                end:'13:10'
            }],//强调的时间段
            navLinks:true,//周视图可点击并跳转
            eventLimit:true,//设置全天显示多少个日程项 具体数值在views的agenda的eventLimit设置默认为5
            allDaySlot:false,//全天插槽 隐藏
            unselectAuto:false,//单击页面上的其他位置将导致当前选择被清除
            schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',//隐藏试用版的提示
            selectHelper: true,//当点击或拖动选择时间时，显示默认加载的提示信息，该属性只在周/天视图里可用。
            selectMinDistance:10,//在选择之前，用户鼠标在鼠标移动后必须行进的最