效果图

html代码，需要引入jquery，layui,fullCalendar

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>fullCalendar</title>
  6.  
  7.     <link rel="stylesheet" href="fullcalendar-3.9.0/fullcalendar.print.css"  media='print' />
  8.     <link rel="stylesheet" href="fullcalendar-3.9.0/fullcalendar.css" />
  9.  
  10.     <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
  11.     <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.js"></script>
  12.     <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css"></script>
  13.     <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.print.css"></script>-->
  14.     <style>
  15.  
  16.         body {
  17.             margin: 40px 10px;
  18.             padding: 0;
  19.             font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  20.             font-size: 14px;
  21.         }
  22.  
  23.         #calendar {
  24.             max-width: 900px;
  25.             margin: 0 auto;
  26.         }
  27.  
  28.     </style>
  29.     <script src="layui/layui.all.js"></script>
  30.     <link rel="stylesheet" href="layui/css/layui.css">
  31. </head>
  32. <body>
  33. <button class="layui-btn" onclick="render()">btn</button>
  34. <button class="layui-btn" onclick="destory()">destory</button>
  35. <div id='calendar'></div>
  36. </body>
  37.  
  38. <script src="fullcalendar-3.9.0/lib/jquery.min.js"></script>
  39. <script src="fullcalendar-3.9.0/lib/moment.min.js"></script>
  40. <script src="fullcalendar-3.9.0/lib/jquery-ui.min.js"></script>
  41. <script src="fullcalendar-3.9.0/fullcalendar.js"></script>
  42. <script>
  43.  
  44.     $(document).ready(function() {
  45.  
  46.         $('#calendar').fullCalendar({
  47.             customButtons: {
  48.                 myCustomButton: {
  49.                     text: '自定义按钮',
  50.                     click: function() {
  51.                         alert('点击了自定义按钮!');
  52.                     }
  53.                 }
  54.             },
  55.             //头工具栏，三个位置，左中右，https://www.helloweba.net/javascript/447.html#fc-header  有固定参数。
  56.             header: {
  57.                 left: 'prev,next today myCustomButton',
  58.                 center: 'title',
  59.                 right: 'month,agendaWeek,agendaDay'
  60.             },
  61.             defaultDate: '2018-11', //默认时间，
  62.             defaultView:'month', //默认视图
  63.             editable: true,//可以被编辑
  64.             weekNumbers:true,//显示周数
  65.             selectable: true,//是否允许用户单击或者拖拽日历中的天和时间隙。默认false。
  66.             firstDay: 1,//设置每周第一天，数字int型，默认0（周日）
  67.             timezone: 'local',//时区
  68.             timeFormat: 'HH:mm:ss',//时间格式
  69.             eventLimit: true, // allow "more" link when too many events
  70.             loading: function( isLoading, view ){
  71.                 //暂时这里没有看到效果
  72.                 console.log("loading回调",view)
  73.             },
  74.             events: [  //日历显示的事件，数组形式显示的
  75.                 {
  76.                     title: 'All Day Event',
  77.                     start: '2018-11-01',
  78.                     color:'red'//不同事件不同颜色
  79.                 },
  80.                 {
  81.                     title: 'Long Event',
  82.                     start: '2018-11-07',
  83.                     end: '2018-11-10',
  84.                     colorl:'blue'
  85.                 },
  86.                 {
  87.                     id: 999,
  88.                     title: 'Repeating Event',
  89.                     start: '2018-11-09T16:00:00',
  90.                     color:'#30ff18'
  91.                 },
  92.                 {
  93.                     id: 999,
  94.                     title: 'Repeating Event',
  95.                     start: '2018-11-16T16:00:00'
  96.                 },
  97.                 {
  98.                     title: 'Conference',
  99.                     start: '2018-11-11',
  100.                     end: '2018-11-13'
  101.                 },
  102.                 {
  103.                     title: 'Meeting',
  104.                     start: '2018-11-12T10:30:00',
  105.                     end: '2018-11-12T12:30:00'
  106.                 },
  107.                 {
  108.                     title: 'Lunch',
  109.                     start: '2018-11-12T12:00:00'
  110.                 },
  111.                 {
  112.                     title: 'Meeting',
  113.                     start: '2018-11-12T14:30:00'
  114.                 },
  115.                 {
  116.                     title: 'Happy Hour',
  117.                     start: '2018-11-12T17:30:00'
  118.                 },
  119.                 {
  120.                     title: 'Dinner',
  121.                     start: '2018-11-12T20:00:00'
  122.                 },
  123.                 {
  124.                     title: 'Birthday Party',
  125.                     start: '2018-11-13T07:00:00'
  126.                 },
  127.                 {
  128.                     title: 'Click for Google',
  129.                     url: 'http://google.com/',
  130.                     start: '2018-11-28'
  131.                 }
  132.             ],
  133.             eventMouseover: function( event, jsEvent, view ) { //鼠标划过的事件
  134.                 layer.tips(event.title, this);
  135.             },
  136.             eventMouseout:function( event, jsEvent, view ) { //鼠标离开的事件
  137.                 var index = layer.tips();
  138.                 layer.close(index);
  139.             },
  140.             selectAllow : function(clickInfo) {//禁止点击的控制,是否允许点击false不让点击，  将用户选择限制到某些时间窗口。仅当selectable选项是激活状态时可用。值为事件id或对象。
  141.                 var start = clickInfo.start.unix();//获取点击的开始时间
  142.                 console.log("点击是否允点击");
  143.                 //如果大于当前时间就让点击，否则就不让点击，提示
  144.                 if(clickInfo.start >= new Date()){
  145.                     return true;
  146.                 }
  147.                 //不让点击了 提示
  148.                 layer.msg("选择时间小于当前时间，不可以点击过去的时间");
  149.                 return false;
  150.             },
  151.             select:function(start, end, jsEvent) {  //点击日历上的某个时间触发的函数
  152.                 //layer.msg("点击时间控件" + JSON.stringify(jsEvent));
  153.                 /*
  154.                 执行顺序，先执行selectAllow:判断是否可以点击
  155.                 然后执行select:点击了时间空间出发的事件，这两个控件其实感觉在上边的那个里边写逻辑就可以
  156.                 如果可以执行的事件，就在上边那个里边直接写，不可以执行的，就直接提示反馈fase，这样就不可以点击了。
  157.                  */
  158.                 layer.msg("点击时间控件");
  159.             },
  160.             eventClick: function(eventObj) {//点击日期控件上显示的事件触发的事件
  161.                 layer.msg("我点击的是：11" +  eventObj.title );
  162.                 console.log("我点击的是",eventObj)
  163.             },
  164.         });
  165.  
  166.     });
  167.  
  168.     /**
  169.      * 重新渲染事件到日程控件上
  170.      * https://www.helloweba.net/javascript/454.html#fc-EventSourceObject
  171.      */
  172.     function render(){
  173.         var json = '{"state":"ok","msg":"操作成功！","calendar":[{"id":1121,"title":"3344-  辅导辅导13 [ 津津]","start":"2018-11-22 15:30:00","remarks":"课程:3344-  辅导辅导13<br>校区:中心校区<br>教室:花样教室<br>教师:米桂<br>时间:15:30:00-16:00:00<br>课时:1<br>上课学员姓名:津津","end":"2018-11-22 16:00:00"}]}';
  174.         var s =  $.parseJSON( json );
  175.         $('#calendar').fullCalendar('renderEvents', s.calendar, true);//批量渲染事件到日程控件上
  176.     }
  177.  
  178.     /**
  179.      * 移除日程插件上的事件
  180.      */
  181.     function destory(){
  182.         $("#calendar").fullCalendar('removeEvents');
  183.     }
  184. </script>
  185. </html>

fullCalendar插件基本使用的更多相关文章

  1. ASP.NET MVC5+EF6+EasyUI 后台管理系统（86）-日程管理-fullcalendar插件用法

    前言 本文分享fullcalendar用法,最后面提供代码下载 说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和调用方式,非常易于扩展!可以用于系统的个人历程管 ...

  2. fullcalendar插件日程管理

    日程管理-fullcalendar插件用法   前言 本文分享fullcalendar用法,最后面提供代码下载 说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和 ...

  3. FullCalendar插件的基本使用

    我的另一博客地址:https://segmentfault.com/u/lyrfighting/articles 前段时间,一直在开发考勤系统,当时为满足设计的需求,选了好几个插件,最后决定采用Ful ...

  4. js jquery 实现 排班,轮班，日历，日程。使用fullcalendar 插件

    如果想用fullcalendar实现排班功能,或者日历.日程功能.那么只需要简单的几步: 这里先挂官网链接: fullcalendar fullcalendar官网下载链接 一.下载及简单配置 1.这 ...

  5. Easyui+MVC+FullCalendar插件实现日程记录功能

    好久好久好久,,,没有写博客了,,久到账号都忘记了....分享一个干货.... 废话少说,先看看效果图. 要实现这样一个功能,先创建一个用于存储日程的记录表(不要问我为什么都是大写,因为初版在orac ...

  6. 日历插件FullCalendar应用：(二)数据增删改

    接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...

  7. FullCalendar应用——整合农历节气和节日

    FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用 ...

  8. FullCalendar Timeline View 使用

    FullCalendar  Timeline View(v4) The Scheduler add-on provides a new view called “timeline view” with ...

  9. Jquery 记一次使用fullcalendar的使用记录

    最近接了一个需求,把excel做的表格开发到系统里,本来想直接做成表格的形式,后来考虑到数据库中的表结构不好设计,最后决定做成日历的形式: 先上成品图 需要引用的js,fullcalendar官网可以 ...

随机推荐

  1. 2018年1月21日--2月4日 NAS

    二十号去比赛时,与同事闲聊时说起家庭服务器,后来搜到nas(网络附着存储器),找到freenas,突然觉得很有用,手机拍了大量的照片视频,存储在电脑,已经换过几次硬盘了,对于这些珍贵的资料,万一硬盘坏 ...

  2. MonGoDB 常见操作, 设置管理员和用户登入

    [ 启动客户端 => ./bin/mongo --host 192.168.200.100 ] 1: 查看所有已经创建的数据库  =>  show dbs   2: 切换或者创建数据库   ...

  3. leetcode1024

    class Solution(object): def videoStitching(self, clips: 'List[List[int]]', T: int) -> int: li = s ...

  4. react-native ios打包 、设置图标 启动图片

    在这里只记录xcode 打包操作,申请证书操作,之前已经记录过了. https://www.cnblogs.com/hellovoidworld/p/4127576.html  参考了这篇文章,只是可 ...

  5. python 阿狸的进阶之路(6)

    常用模块 json # 序列化 #将内存的数据存到硬盘中,中间的格式,可以被多种语言识别,跨平台交互数据 #json 可以将字典之类的数据类型存到字典中 import json dic = {&quo ...

  6. leetcode 题解： Gray Code

    第一眼看到就是枚举,回溯法. n位的ans就是在n-1的ans的基础上,每一个在首位加上1. 但是有个难点,要保证相邻两数之间只有一位在变化,怎么办? 首先 00 00 01 00 01 11 10 ...

  7. cxGrid 颜色设置

    一.cxGrid 根据列值变色(样式) 在使用cxGrid的过程中,某一个单元格经常需要根据其他单元格的值来做相应的变色,如: 在cxGridDBTableView中,选定要变样式(如背景色.字体属性 ...

  8. 4.Python文件操作

    文件内需要写入的内容 Seems the love I’ve ever known 看来,过去我所知道的爱情 Has always been the most destructive kind 似乎总 ...

  9. sql中优化查询

    1.在大部分情况下,where条件语句中包含or.not,SQL将不使用索引:可以用in代替or,用比较运算符!=代替not. 2.在没有必要显示不重复运行时,不使用distinct关键字,避免增加处 ...

  10. Linux安装卸载jdk1.8

    首先到官网下载  Linux x64 182.87 MB jdk-8u191-linux-x64.tar.gz https://www.oracle.com/technetwork/java/java ...