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 必须设置,其他的都有默认值

  • 相关阅读:
    Hive分组取Top N
    Hive 锁 lock
    Hive创建指向HBase表的表
    Hive Serde
    自定义UDF
    Hive使用SequenceFile存储数据
    alter table
    describe命令
    移动端,字体实际大小比设置的大,原因总结
    移动端适配基础总结
  • 原文地址:https://www.cnblogs.com/lelexiu/p/10195441.html
Copyright © 2011-2022 走看看