以下主要结构，直接执行即可以使用 ，仅用参考：

html:

<!DOCTYPE html>

<html>

<head>

    <title>test</title>

    <link  type="text/css"  rel="stylesheet" href="https://cdn.bootcss.com/fullcalendar/3.8.2/fullcalendar.min.css">

</head>

<body>

<div id="div_name"></div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script>

<script src="https://cdn.bootcss.com/fullcalendar/3.9.0/fullcalendar.js"></script>

<script src="https://cdn.bootcss.com/fullcalendar/3.9.0/gcal.js"></script>

<script src="https://cdn.bootcss.com/fullcalendar/3.9.0/locale-all.js"></script>

<script src="https://cdn.bootcss.com/artDialog/7.0.0/dialog.js"></script>

<script>

    (function ($) {

        console.log(typeof fullCalendar);

        $("#div_name").fullCalendar(

            {

                header: {

                    left: 'prev today next',

                    center: 'title',

                    // right: 'agendaWeek,agendaDay'

                    right: 'month,agendaWeek,agendaDay'

                },

                monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

                monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

                dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

                dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

                today: ["今天"],

                buttonText:{//设置日历头部各按钮的显示文本信息

                    today:    '今天/本周',

                    month:    '月',

                    week:     '周',

                    day:      '日'

                },

                axisFormat: 'H(:mm)',

                defaultView:'agendaDay',

                allDaySlot:true,

                allDayText:'全天',

                editable: false,//不能进行编辑

                events:function(start, end, timezone, callback) {//ajax请求数据并显示在响应时间段内

                    console.log(timezone);

                    console.log(callback.toString());

                    console.log(end);

                    console.log(start);

                    var events = [];

                    var data = [{

                        date:"2018-03-24T13:15:30Z",

                        isrent:1,

                        is_special:"0",

                        price:"600.00",

                        stock:"1"

                    },{

                        date:"2018-03-24T08:15:30Z",

                        isrent:1,

                        is_special:"5",

                        price:"600.00",

                        stock:"1"

                    },{

                        date:"2018-03-24T04:15:30Z",

                        isrent:1,

                        is_special:"1",

                        price:"600.00",

                        stock:"1"

                    }];

                    $.each(data,function(i,c) {

                        if (c.is_special == '1') {

                            events.push({

                                title: '￥'+c.price+','+c.stock+'套',

                                start: c.date , // will be parsed

                                color: '#F2EB44'

                            });

                        } else {

                            events.push({

                                title: '￥'+c.price+','+c.stock+'套',

                                start: c.date , // will be parsed

                                color: '#B4EABE'

                            });

                        }

                    });

                    console.log(events);

                    callback(events)

                },

                dayClick: function(date, allDay, jsEvent, view) {//点击空白处，添加信息

                    console.log(date);

                    console.log(allDay);

                    console.log(jsEvent);

                    console.log(view);

                    var selDate =date.format('YYYY-MM-DD');//格式化日期

                    var  d = dialog({title:"添加教育场地申请",

                        content:'' ,//"url:"+addnewurl+"",parent:$dialogParent(),

                        cancelVal: "关闭",cancel: true,width: "700",height: "300px",lock:true,

                        close:function(){

                            window.location.href= "${base}/education/list/eduSiteApplyDayList.jsp";

                        }});

                    d.showModal();

                },

                eventClick:function(event){//查看事件

                    var d = dialog({title:"查看教育场地申请",id:"prisonAnaly_detail_dialog",parent:$dialogParent(),

                        content:'' ,//"url:${base}/education/eduSiteApply.do?detail&id=" + event.id,

                        cancelVal: "关闭",cancel: true ,width: "500px",height: "300px",lock:true

                    });

                    d.showModal();

                }

            }

        );

    })(jQuery);

</script>

</body>

</html>

显示效果：

更多请参考官方网站

fullcalendar 日历插件3.9.0 -- 基本插件使用的更多相关文章

  1. fullcalendar日历插件的使用并动态增删改查

    我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...

  2. elasticsearch5.0.0 安装插件及配置过程

    elasticsearch5.0.0 安装插件及配置过程 由于es5.0是里程碑式的更新,所以很多变化的地方,暂时我就插件安装遇到的问题记录一下. 插件安装命令 2.3版本的安装命令 安装Marvel ...

  3. elasticsearch5.0集群+kibana5.0+head插件插件的安装

    elasticsearch5.0集群+kibana5.0+head插件插件的安装 es集群的规划: 两台16核64G内存的服务器: yunva_etl_es1  ip:1.1.1.1 u04es01. ...

  4. MySQL中文全文索引插件 mysqlcft 1.0.0 安装使用文档[原创]

    [文章+程序 作者:张宴 本文版本:v1.0 最后修改:2008.07.01 转载请注明原文链接:http://blog.zyan.cc/post/356/] MySQL在高并发连接.数据库记录数较多 ...

  5. Inno Setup 精灵显示插件 InnoFairy (V2.0 版本)

    原文 http://restools.hanzify.org/article.asp?id=111 一个如影随形的小精灵会令到你的安装程序更加人性化. 就是这样一个功能的Inno Setup插件, 希 ...

  6. 免费高端出辕营，横空出世惊鬼神 Excel插件：ExcelPower_Helper 0.41初出茅庐

    免费高端出辕营,横空出世惊鬼神 Excel插件:ExcelPower_Helper 0.41初出茅庐        隐鹤 倾心开发 2019.4.1 1.   引言 经过前后大约零零散散的一年的开发, ...

  7. Vue2.0 分页插件pagination使用详细说明

    Vue2.0 分页pagination使用 插件下载地址:Vue_Pagination 插件描述:基于jQuery的分页插件大家都用过很多了吧,今天分享一下基于Vue的分页插件pagination.j ...

  8. Eclipse Oxygen(4.7.0)安装插件Eclipse Class Decompiler反编译JAR文件

    引用自官方内容 Eclipse Class Decompiler是一款Eclipse插件,整合了多种反编译器,和Eclipse Class Viewer无缝集成,能够很方便的使用插件查看类库源码,进行 ...

  9. eclipse安装activiti5.18.0工作流插件 以及安装过程中activiti插件出现的问题及解决

    转: eclipse安装activiti5.18.0工作流插件 以及安装过程中activiti插件出现的问题及解决 2017年05月04日 18:44:21 JJ_nan 阅读数:2773   版权声 ...

随机推荐

  1. koa-router

    为了处理URL,我们需要引入koa-router这个middleware,让它负责处理URL映射. 我们把上一节的hello-koa工程复制一份,重命名为url-koa. 先在package.json ...

  2. 《梦断代码》Scott Rosenberg著（三）

    开放与封闭之论: 程序源代码是商业软件公司最重要的资产,所以软件公司售卖二进制文件.这样也就意味着如果微软的软件产品出了问题,即便你是一个程序大牛也无法修复它.你只能等着微软来修正问题,因为只有微软程 ...

  3. 多线程系列之十一：Two-Phase Termination模式

    一,Two-Phase Termination模式 翻译过来就是:分两阶段终止 二,示例程序 public class CountupTread extends Thread { private lo ...

  4. echarts使用笔记二:柱子堆叠

    1.多个柱子堆叠效果,多用于各部分占比 app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : ...

  5. Linux df 与du用法

    df 查看一级目录的大小,但是不能查看文件的大小.du 可以查看目录或者文件大小. 1 df的基本用法 df命令可以显示目前所有文件系统的总空间及当前可用空间,用法如下: -a 全部文件系统列表-h ...

  6. MyBatis映射文件1(增删改、insert获取自增主键值)

    增删改 Mybatis为我们提供了<insert>.<update>.<delete>标签来对应增删改操作 在接口中写增删改的抽象方法 void addEmp(Em ...

  7. phpstorm显示页面不停的在indexing转圈中,并且文件名还一直在刷新

    打开 File下的 Invalidate Caches / Restart...下的 Invalidate and Restart. 便可以了 ......

  8. 图解Python的直接赋值与浅拷贝和深度拷贝三者区别

    直接赋值:其实就是对象的引用(别名). 浅拷贝(copy):拷贝父对象,不会拷贝对象的内部的子对象. 深拷贝(deepcopy): copy 模块的 deepcopy 方法,完全拷贝了父对象及其子对象 ...

  9. MySQL执行语句的顺序

    MySQL的语句一共分为11步,最先执行的总是FROM操作,最后执行的是LIMIT操作.其中每一个操作都会产生一张虚拟的表,这个虚拟的表作为一个处理的输入,只是这些虚拟的表对用户来说是透明的,但是只有 ...

  10. spring boot 启动脚本

    启动的时候 在 boot_class 中有个:com.sankuai.qcs.regulation.shanghai.App  这是spring boot的配置,在 bin/run_main.sh中 ...