fullcalendar 日程插件demo使用

最新推荐文章于 2024-05-17 15:12:07 发布
最新推荐文章于 2024-05-17 15:12:07 发布
阅读量2.6w 收藏 31
点赞数 12
分类专栏： javascript html+css json 文章标签： 插件 fullCalend js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012986962/article/details/51782411
版权
javascript 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
json
3 篇文章 0 订阅
订阅专栏
html+css
1 篇文章 0 订阅
订阅专栏

效果图

以月显示
以周显示
以日显示
添加日程
编辑日程

HTML

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<%@ include file="../common/addEdit.jsp"%>
<link rel="stylesheet" href="${ctx}/common/assets/plugins/fullcalendar/fullcalendar.css" />
<%-- <script src="${ctx}/common/assets/js/jquery-2.0.3.min.js"></script> --%>
<script src="${ctx}/common/assets/plugins/fullcalendar/jquery-ui-1.10.2.custom.min.js"></script>
<script src="${ctx}/common/assets/plugins/fullcalendar/fullcalendar.min.js"></script>
<script src="${ctx}/common/demo_js/jquery.formautofill.min.js"></script>
<script src="${ctx}/common/demo_js/fullcalendar_demo.js"></script>
<script src="${ctx}/common/demo_js/commonUtil.js"></script>
</head>
<body>
<div id="calendar" style="height: 750px;width: 950px;margin: 10px auto;"></div>
<!-- style="display: none;" -->
<div class="layer-hidden-line">
        <form role="form" class="m-t-form" id="Form" >
            <input name="id" id="id" type="hidden" value="">
            <div class="row">
                <div class="col-xs-12 layer-condensed-case">
                    <div class="form-group">
                        <label for="classroomId"> 日程内容 </label> 
                        <span class="input-icon icon-left"> 
                            <input type="text" class="form-control" id="content" name="title"
                            placeholder="请输入日程内容" data-required="true"
                            data-descriptions="content" maxlength="50"> 
                            <i class="spl-icon-book-open"> </i>
                        </span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 layer-condensed-case">
                    <div class="form-group">
                        <label for="classroomId"> 开始时间 </label> 
                        <span class="input-icon icon-left">

                            <input type="text" readonly="readonly" class="form-control date-picker-text" id="startTime" name="start"
                            placeholder="请输入开始时间" data-required="true" data-descriptions="startTime" maxlength="50"> 
                            <i class="spl-icon-book-open"> </i>
                        </span>
                    </div>
                </div>
            </div>
            <div class="row" id="divEndTime" style="display: none;">
                <div class="col-xs-12 layer-condensed-case">
                    <div class="form-group">
                        <label for="classroomId">结束时间</label> 
                        <span class="input-icon icon-left"> 
                        <input type="text" readonly="readonly" class="date-picker-text form-control" id="endTime" name="end"
                            placeholder="请输入结束时间" maxlength="50"> 
                            <i class="spl-icon-book-open"> </i>
                        </span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 layer-condensed-case">
                    <div class="form-group">
                            <label> 
                            <input type="checkbox" name="wholeChk" id="wholeChk" checked="checked" > 
                            <span class="text">全天</span>
                            </label>
                            <label> 
                            <input type="checkbox" name="endTimeChk" id="endTimeChk" onclick="changeState(this)" >
                            <span class="text">结束时间</span>
                            </label>
                    </div>
                </div>
            </div>
            <div class="row margin-top-10">
                    <div class="col-xs-4 form-action-left" id="del" style="display: none;" onclick="del()">
                        <input type="button" value="删&nbsp;&nbsp;除"
                            class="btn btn-default btn-sm" />
                    </div>
                    <div class="col-xs-4 form-action-left">
                        <input type="reset" value="重&nbsp;&nbsp;置"
                            class="btn btn-default btn-sm" />
                    </div>
                    <div class="col-xs-4 form-action-right">
                        <input type="submit" value="提&nbsp;&nbsp;交"
                            class="btn btn-primary btn-sm" />
                    </div>
                </div>
        </form>
    </div>
</body>
</html>

JS

$(function(){
    initFullCalendar();
    initForm();
    initDate();
})
 //页面加载完初始化日历   
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var dataSource=[
                {
                    id:1,
                    title: '全天计划写代码',
                    start:  '2016-06-09',
                },
                {
                    id:2,
                    title: '张家界四日游',
                    start: '2016-06-07',
                    end: '2016-06-08',
                },
                {
                    id: 3,
                    title: '电话回访客户',
                    start: '2016-06-06',
                    allDay: false
                },
                {
                    id: 4,
                    title: '电话回访客户',
                    start: '2016-06-05',
                    allDay: false
                },
                {
                    id:5,
                    title: 'qwrdsf',
                    start: '2016-06-04',
                    allDay: false
                },
                {
                    id:6,
                    title: '中秋放假',
                    start: '2016-06-17',
                    end: '2016-06-19',
                },
                {
                    id:7,
                    title: 'qwer',
                    start: '2016-06-01',
                    end: '2016-06-02',
                    allDay: false
                },
                {
                    id:8,
                    title: '生日聚会',
                    start: '2016-06-11',
                    end: '2016-06-12',
                    allDay: false
                },
                {
                    id:9,
                    title: '访问Helloweba主页',
                    start: '2016-06-14',
                    end: '2016-06-15',
                    url: 'http://helloweba.com/'
                },
                {
                    id:10,
                    title: '实战训练课',
                    start: '2016-06-28',
                }
            ];

//选中事件
function changeState(dom){
    if($(dom).prop("checked")){
        $('#Form').parent().parent().css('height','400px');
        $('#Form').parent().css('height','366px');
        $("#divEndTime").show();
    }else{
        $('#Form').parent().parent().css('height','330px');
        $('#Form').parent().css('height','296px');
        $("#divEndTime").hide();
    }
}
var addIndex;
//打开弹出层
function openLayer(date){
    $("#id").val("");
    $("#del").hide();
    $('#Form')[0].reset();
    $('#endTimeChk').prop("checked",false);
    changeState('#endTimeChk');
    $('#startTime').val(new Date(date).Format("yyyy-MM-dd hh:mm:ss"));
    addIndex=layer.open({
        title : '<i class="fa fa-plus"></i>&nbsp;新增日程',
        type : 1,
        fix : false,
        skin : 'layui-layer-rim',
        // 加上边框
        area : [ '470px', '330px' ],
        // 宽高
        content : $('#Form')
    });
}
function openEditLayer(data){
    $("#del").show();
    $('#Form')[0].reset();
    $('#endTimeChk').prop("checked",false);
    changeState('#endTimeChk');
    $('#Form').autofill(data);
    $('#startTime').val(data.start.Format("yyyy-MM-dd hh:mm:ss"));
    $('#endTime').val(data.start.Format("yyyy-MM-dd hh:mm:ss"));
    /*$('#startTime').val(new Date(date).Format("yyyy-MM-dd hh:mm:ss"));*/
    addIndex=layer.open({
        title : '<i class="fa fa-plus"></i>&nbsp;编辑日程',
        type : 1,
        fix : false,
        skin : 'layui-layer-rim',
        // 加上边框
        area : [ '470px', '330px' ],
        // 宽高
        content : $('#Form')
    });
}
//关闭弹出层
function closeLayer(){
    layer.close(addIndex);
}
//初始化日程视图
function initFullCalendar(){
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,//可以拖动   
        firstDay:1,
        timeFormat: 'H:mm',
        axisFormat: 'H:mm',
        events:urlRootContext + '/demo/getDataList.do',//
        dayClick: function(date, allDay, jsEvent, view) { //当单击日历中的某一天时，触发callback
            /*var views = $('#calendar').fullCalendar('getView'); */
            console.log(date);
            openLayer(date);
            /*alert("The view's title is " + view.title);
            console.log(this);
            alert('a day has been clicked!');  */ 
        },
        eventClick:function(event, jsEvent, view){//当点击日历中的某一日程（事件）时，触发此操作
            openEditLayer(event);
            console.log(this);
        },
        eventMouseover:function (event, jsEvent, view){//鼠标划过的事件
            console.log(event);
        },eventMouseout:function( event, jsEvent, view ) { //鼠标离开的事件
            console.log(event);
        }
    });
}
//进入下一个月视图
function next(){
    $('#calendar').fullCalendar('next'); 
}
//初始化表单
function initForm(){
    $("#Form").mvalidate({
        type: 1,
        onKeyup: true,
        sendForm: false,
        autoFocus: true,
        firstInvalidFocus: true,
        // 点击提交按钮时,表单通过验证触发函数
        valid: function(event, options) {

            //根据自己的编辑添加业务保存数据，不需要参考一下方法，只需要参考我标注的两个方法；
            if($('#endTimeChk').prop("checked")){
                if($('#endTime').val()==null||$('#endTime').val()==''){
                    layer.msg('<i class="spl-icon-volume-1"></i>&nbsp;请选择结束时间');
                    return;
                }
            }
            var obj=$('#Form').serializeObject();
            if($('#wholeChk').prop("checked")){
                obj.allDay=true;
                delete obj.end;
            }else{
                obj.allDay=false;
            }

            /
            //方法二 编辑添加
            if(obj.id==null||obj.id==''){
                dataSource.push(obj);
            }else{
                for (var i = 0; i < dataSource.length; i++) {
                    if(dataSource[i].id==obj.id){
                        dataSource.splice(i,1,obj);
                    }
                }
            }

            //自己写提交数据库数据，我这里是模拟提交数据
            //读取的也是本地数据
            var jsonStr=JSON.stringify(dataSource);
            $.ajax({//获取数据
                type : "POST",
                url : urlRootContext + '/demo/addData.do',
                data:{jsonStr:jsonStr},
                dataType : 'json',
                success : function(data) {
//                  方法一
//                  if(obj.id==null||obj.id==''){
//                      //数据入库之后调用一下方法
//                      $('#calendar').fullCalendar('renderEvent', obj, true);
//                  }else{
//                      //数据入库之后调用一下方法
//                      $('#calendar').fullCalendar('updateEvent', obj);
//                  }
//                  方法二
                    $('#calendar').fullCalendar('refetchEvents'); 
                    closeLayer();
                    layer.msg("获取数据成功", { time : 2000});
                }
            });

        },
        // 点击提交按钮时,表单未通过验证触发函数
        invalid: function(event, status, options) {

        },
        // 点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域，是jquery对象
        eachField: function(event, status, options) {

        },
        eachValidField: function(val) {},
        eachInvalidField: function(event, status, options) {},
        conditional: {

        },
        descriptions : {
        content : {
            required : '<i class="spl-icon-volume-1"></i>&nbsp;请填写日程内容'
        },
        startTime : {
            required : '<i class="spl-icon-volume-1"></i>&nbsp;请选择开始时间'
        }
        }
    });
}
//初始化datetimepicker日期控件
function initDate(){
    $('#startTime,#endTime').datetimepicker({
        timepicker : true,
        format : 'Y-m-d H:i:s',
        formatDate : 'Y-m-d'
    });
}


function del(){
    var id=$("#id").val();
    for (var i = 0; i < dataSource.length; i++) {
        if(dataSource[i].id==id){
            dataSource.splice(i,1);
            break;
        }
    }
    var jsonStr=JSON.stringify(dataSource);

    layer.confirm('您确定删除该日程吗?', function(){ 
        $.ajax({//获取数据
            type : "POST",
            url : urlRootContext + '/demo/addData.do',
            data:jsonStr,
            dataType : 'json',
            success : function(data) {
                closeLayer();
                layer.msg("获取数据成功", { time : 2000});
                /
                //方法一
                 //$('#calendar').fullCalendar('removeEvents', id);
                /
                //方法二
                $('#calendar').fullCalendar('refetchEvents'); 
            }
        });
    });
}

java

java代码只是简单的增删改查，这里贴代码了；

感谢大家阅读我的代码，有什么疑问，可以留言，我们讨论一下。

这里有不错的中文帮助文档：http://justcoding.iteye.com/blog/2028252

PerfectGo
关注
  • 12
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 74
    评论
专栏目录
Vue中使用Fullcalendar日历开发日程安排代码完整版
02-08
本项目示例将详细阐述如何在Vue中集成并使用FullCalendar，以实现一个完整的日程安排系统。 首先，我们需要安装FullCalendar及相关依赖。在你的Vue项目中，打开终端，确保你已经在项目根目录下，然后运行以下命令来...
FullCalendar demo实例
chentanpo8678的博客
03-20 2220
HTML结构 <body> <!--容器--> <div id='calendar'></div> <!--弹出层--> <div id='box'> <form class='form-in...
jQuery插件实战之fullcalendar（日历插件）Demo
热门推荐
顾丽江的专栏
10-11 7万+
jQuery的插件非常多，应用的场景也非常丰富，今天我这里给大家介绍一款非常实用的日历页面开发插件 - fullcalendar，目前最新版本是1.5.1，使用这款插件能够快速帮助你快速编程实现基于web的日历查看功能，大家可能都使用过outlook的日历项功能，使用日历界面能更
FullCalendar--使用教程及问题解决
最新发布
Schaffer的博客
05-17 1203
FullCalendar官网本文主要介绍如何在原生html项目中使用FullCalendar。网上有许多在Vue中使用FullCalendar的文章，写的都很详细，如果您使用的vue项目可以简单看一下，毕竟FullCalendar的api是相同的。本项目基于：Layui + FullCalendar 6.1.1(v6版本)实现复杂日历效果。展示下FullCalendar复杂的应用，看起来挺好看也挺复合需求，所以选用这个插件。
FullCalendarDemo5 控件的实例讲解—拖拽实现值班排班（一）
lanhai96的专栏
08-03 1157
通过一个简单的项目实例，来说明FullCalendar 5.11 日历插件在asp.net上的用法
FullCalendar-vue demo例子
qq_45433217的博客
03-18 1214
FullCalendar-vue demo例子一、 样图1. 月视图2. 周视图3. 日视图二、 依赖1. 在package.json中引入依赖2. 执行以下命令下载依赖三、代码1. demo代码2. event-utils.js 一、 样图 1. 月视图 2. 周视图 3. 日视图 二、 依赖 1. 在package.json中引入依赖 "dependencies": { "@fullcalendar/core": "^4.3.1", "@fullcalendar/moment":
FullCalendar说明文档
yuan_jie
11-27 5278
FullCalendar提供了丰富的属性设置和方法调用，开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发，本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档，方便参阅。当前版本1.6.4。 普通显示设置 属性 描述 默认值 header 设置日历头部信息。 如果设置为false，则不显示
fullcalendar-demo
01-31
"fullcalendar-demo"是一个基于FullCalendar的演示项目，旨在展示该插件的基本用法和可能的定制效果。在这个压缩包中，我们很可能会找到一个完整的示例代码文件，用于演示如何在网页中集成并使用FullCalendar。 ...
fullcalendar使用demo（访问数据库）
03-06
全历(fullcalendar)是一款流行的JavaScript日历插件，它提供了丰富的功能和自定义选项，用于在网页中展示日程和事件。本示例是关于如何将全历与数据库集成，以便动态地显示、添加和管理事件。以下是关于如何实现这一...
FullCalendar日历插件应用之数据展现(一)
11-23
开发者可以使用FullCalendar创建强大的日历日程应用，FullCalendar提供了丰富的选项设置和方法调用，使得开发者可以轻松的创建各种功能的日历程序。 由于项目需求，需要通过日历的方式展现某些数据，在网上搜索了很...
vue2-fullcalendar-demo
01-31
2. **项目初始化**：使用`vue-cli`或者手动创建一个新的Vue2项目，如果你选择使用`vue-cli`，可以运行`vue create vue2-fullcalendar-demo`命令来快速生成项目结构。 3. **安装FullCalendar**：在项目中，通过npm...
fullcalendar中文版(含demo)
07-18
fullcalendar中文版(含demo)
FullCalendar的使用demo
12-05
可根据自己的实际需要进行修改，这里改为我自己所需样式，汉化版。 里面有html页面和所需js，汉化包
fullcalendar-4.4.0官方示例demo.zip
09-13
fullcalendar-4.4.0官方示例demo，包含了所有的官方demo示例，里面包括20左右个例子，拖拽、本地化、日视图、月视图、周视图、代办视图、谷歌日历集成、自定义视图等
fullcalendar demo
04-02
fullcalendar是对Google Calendar的一种扩展，可随意更改日程，简单方便，界面简约，最新版fullcalendar-3.9.0， 文档和持续更新，有条件的请登录官网 https://fullcalendar.io/， 该资源解压可直接打开查看demo
fullcalendar插件(含demo)
01-08
全历插件（FullCalendar）是一款广泛应用于网页端的日历组件，主要由JavaScript编写，专为Web应用中的日程管理而设计。它以其强大的功能、灵活的定制性和友好的用户界面，深受开发者喜爱。在本资源包中，包含了...
django+ajax+fullcalendar 中文版demo
Donmino的博客
03-21 303
django+ajax+fullcalendar 中文版demo
FullCalendarDemo5 控件的实例讲解—拖拽实现值班排班(五)
lanhai96的专栏
08-10 612
点击导出按钮，弹出参数指定对话框，选择要导出数据的起始日期，点击导出按钮，程序将指定日期内的值班员数据按照值班日志模板文件进行导出下载
FullCalendar 插件是如何使用的
06-06
FullCalendar 是一个非常流行的日历插件，可以用来显示日程安排、事件等。它支持各种不同的视图（月视图、周视图、日视图等），并且可以自定义事件的颜色、标签等。 使用 FullCalendar 插件，你需要先在页面中引入 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 74
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值