zoukankan      html  css  js  c++  java
  • JS插件:fullCalendar图解

    1.首先看下效果:

     官网下载链接 https://fullcalendar.io/download
    .官方效果图:https://fullcalendar.io/

    2.准备工作,引入对应的 css和 js文件

    calendar/theme.css
    fullcalendar.css
    fullcalendar.print.css
    
    https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
    https://momentjs.com/downloads/moment.min.js
    https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js
    

     3.实际操作:

    对fullCalendar的理解

    实例化后的图像:

     

    附上带注解的代码

    $('#calendar').fullCalendar({
        //是否展示主题
        theme: true,
        header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: time,
        //月视图下日历格子宽度和高度的比例
        aspectRatio: 1.35,
        //月视图的显示模式,fixed:固定显示6周高;liquid:高度随周数变化;variable:         高度固定
        weekMode: 'variable',
        //初始化时的默认视图,month、agendaWeek、agendaDay
        defaultView: 'month',
         //agenda视图下是否显示all-day
        allDaySlot: false,
        //agenda视图下all-day的显示文本
        allDayText: '全天',
        //agenda视图下两个相邻时间之间的间隔
        slotMinutes: 30,
        //区分工作时间
        businessHours: true,
        //非all-day时,如果没有指定结束时间,默认执行120分钟
        defaultEventMinutes: 50,
        //内容高度
        contentHeight: 500,
        //设置为true时,如果数据过多超,显示为 +...more ,点击后才会完整显示所有的数据
        eventLimit: true,
        //设置是否可被单击或者拖动选择
        selectable: true,
        //点击或者拖动选择时,是否显示时间范围的提示信息,该属性只在agenda视图里可用
        selectHelper: true,
        //点击日历外的空白区域是否取消选中状态 true为取消 false为不取消,只有重新选择时才会取消
        unselectAuto: true,
        //Event是否可被拖动或者拖拽
        editable: true,
        //Event被拖动时的不透明度
        dragOpacity: 0.5,
        editable: true,
        events: [
            {
            title: '事件1',//事件内容
            start:'2018-12-27 20:18',//事件开始时间
            end:‘2018-12-27 22:00’,//事件结束时间
            color:'blue',//事件框背景的颜色
            textColor: 'white',//文字的颜色
            borderColor: 'LightGreen',//事件框的颜色
            //url: 'www.test.com',//设置事件的url链接
            className: 'done'//加类名
            },
            {   
             事件二
            },
            {
            事件3
            }
       ],
    })                            

    这些参数 header,events 必须设置,其他的都有默认值

  • 相关阅读:
    HTML5 WebSocket 权威指南 学习一 (第二章 WebSocket API)
    VM虚拟机 Centos7 lnmp环境 配置域名问题 windows浏览器访问的问题
    https方式下 git push 每次都要输入密码的解决办法
    浏览器禁用Cookie
    使用Nginx反向代理进行负载均衡
    使用Ajax异步上传文件
    装配Bean
    关于Struts2配置文件名修改的问题
    NIO
    部署描述符
  • 原文地址:https://www.cnblogs.com/lelexiu/p/10195441.html
Copyright © 2011-2022 走看看