fullCalendar插件的使用简单教程

fullCalendar插件的使用简单教程最近项目中想实现一个基于日历的事件提醒 百度众多资源后选定使用 fullCalendar 进行实现 那首先来说下 fullCalendar 的官网 https fullcalendar io 在这上面有简单的 demo 以及 API 但是是英文的 那么英文不太好的朋友可以选择翻译或者来看这个中文版的 API http www jb51 net article 104841 htm 相对于官网的 API 这个

转载请标明出处:

原文首发于: http://www.zhangruibin.com
本文出自 RebornChang的博客





厚颜打广告

亲,博主的微信公众号

‘程序员小圈圈’开始持续更新了哟~~

关注公众号回复 fullCalendar 或者 full 即可获取下载链接自行下载呦,省的等博主手动发送哟~~

还能不公开邮箱哟~~

长按图片识别二维码或者微信扫描二维码或者直接搜索名字 ‘CXYX’ 即可关注本公众号哟~~

不只是有技术哟~~

还可以学下教育知识以及消遣娱乐哟~~

求关注哟~~

有好的文章可以联系投稿哟~

fullCalendar插件的使用简单教程
(追加于:2019-08-16))

正文开始

 
         
   
    
     
      
       
        
         
         Title 
          
           
            
             
             
              
              
              
             
            
           
          
         
        
       
      
     
    
  

这里写图片描述

 
  
 $('#calendar').fullCalendar({
            header:{
                right: 'prev,next today',
                center: 'title',
                left: 'month,agendaWeek,agendaDay'
            },
            theme: true,
            editable: true,
            allDaySlot : false,
            eventLimit: true,
            events:  function(start, end ,  callback){

                var now = new Date();
                //初始化参数
                var name = "songyuan";
                var title = "";
                var content = "";
                var noteType = "";
                    //alert("进入到查询日程的方法里.内部")
                    $.ajax({
                        type : "post",
                        url : "${ctx}/memo/getNotepad",
                        success : function(data) {
                            var events = [];
                            //alert("进入到events内部")
                            $.each(data,function (key,value) {
                                var noteType ="";
                                if (value.noteType==1){
                                    noteType = "工作";
                                }else if (value.noteType==2){
                                    noteType = "生活";
                                }else if (value.noteType==3){
                                    noteType = "家庭";
                                }else if (value.noteType==4){
                                    noteType = "私密";
                                }else {
                                    noteType = "其他";
                                }
                                events.push({
                                    sid: 2,
                                    uid: 3,
                                    title: '记事簿',
                                    start: value.starTime,
                                    end: value.endTime,
                                    fullname: value.name,
                                    confname: noteType,
                                    confshortname: 'M1',
                                    confcolor: '#ff3f3f',
                                    confid: value.noteType,
                                    allDay: false,
                                    topic: value.title,
                                    description : value.content,
                                    id: value.id,
                                });
                            });
                            callback(events);
                        }
                    });
            },
            dayClick: function(date, allDay, jsEvent, view) {
                var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd");

                $( "#reservebox" ).dialog({
                    autoOpen: false,
                    height: 450,
                    width: 400,
                    title: '建立记事簿 ' + selectdate,
                    modal: true,
                    position: "center",
                    draggable: false,
                    beforeClose: function(event, ui) {
                        $.validationEngine.closePrompt("#thingsType");
                        $.validationEngine.closePrompt("#start");
                        $.validationEngine.closePrompt("#end");
                    },
                    buttons: {
                        "取消": function() {
                            $( this ).dialog( "close" );
                        },
                        "添加": function() {
                           // alert("这就是点击了reserve的方法")
                           /* if($("#reserveformID").validationEngine({returnIsValid:true})){*/
                                var startdatestr = $("#start").val();
                                var enddatestr = $("#end").val();
                                var confid = $("#thingsType").val();
                                var repweeks = $("#repweeks").val();
                                if(repweeks==null){
                                    repweeks=0;
                                }
                                var startdate =  $.fullCalendar.parseDate(selectdate+"T"+startdatestr);
                                var enddate =  $.fullCalendar.parseDate(selectdate+"T"+enddatestr);
                                var schdata = {startdate:startdate, enddate:enddate, confid:confid, repweeks:repweeks};
                                var title = $("#title").val();
                                var content = $("#details").val();
                                /*}*/
                            //alert("startdatestr=="+startdatestr+"enddatestr=="+enddatestr+"enddatestr=="+enddatestr+"confid=="+confid+"repweeks=="+repweeks+"startdate=="+startdate+"enddate=="+enddate+"schdata=="+schdata)
                            $.ajax({
                                type : "post",
                                data :{
                                    title : title,
                                    content : content,
                                    starTime : selectdate+" "+startdatestr+":00",
                                    endTime : selectdate+" "+enddatestr+":00",
                                    repeatWeeks :repweeks,
                                    thingsType : confid
                                },
                                url : "${ctx}/memo/addNotepad",
                                success : function(data) {
                                    //alert("添加数据完成"+data)
                                    //closewait();
                                    window.location.reload();
                                    //若执行成功的话,则隐藏进度条提示
                                    if (data != null && data != 'undefined'
                                        && data == 1) {
                                        layer.msg('记事本添加成功!', {icon: 6,time:1000});
                                        parent.flushParent();
                                        layer_close();
                                        window.location.reload();
                                    }else if (data == -1) {
                                        layer.msg('记事本名称已经存在!', {icon: 5,time:1000});
                                    }else if (data == 0) {
                                        layer.msg('很抱歉!添加失败!', {icon: 5,time:1000});
                                    }else{
                                        layer.msg('系统异常!请与系统管理员联系!', {icon: 5,time:1000});
                                    }
                                }
                            });
                        }
                    }
                });
                $( "#reservebox" ).dialog( "open" );
                return false;
            },
            timeFormat: 'HH:mm{ - HH:mm}',
            eventClick: function(event) {
                var fstart  = $.fullCalendar.formatDate(event.start, "yyyy/MM/dd HH:mm");
                var fend  = $.fullCalendar.formatDate(event.end, "HH:mm");
                var schdata = {sid:event.sid, deleted:1, uid:event.uid};

                $( "#reserveinfo" ).dialog({
                    autoOpen: false,
                    height: 280,
                    width: 400,
                    modal: true,
                    position: "center",
                    draggable: false,
                    buttons: {
                        "close": function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });

                if(1==1||2==schdata.uid){
                    $("#reserveinfo").dialog("option", "buttons", {
                        "取消": function() {
                            $( this ).dialog( "close" );
                        },

                        "取消日程": function() {
                           // var answer = confirm("确定取消日程吗?");
                          /*  layer.confirm("确定取消日程吗?",{
                                btn: ['确定', '取消'] //按钮
                            },function () {
                                alert("进入到了confirm里面")
                            });*/
                            /*if(answer){*/
                             // alert("eventId===="+event.id)
                                $.ajax({
                                    type : "post",
                                    data :{
                                        id :event.id
                                    },
                                    url : "${ctx}/memo/cancleNotepad",
                                    success : function(data) {
                                        window.location.reload();
                                        //若执行成功的话,则隐藏进度条提示
                                        if (data != null && data != 'undefined'
                                            && data == 1) {
                                            layer.msg('记事本取消成功!', {icon: 6,time:1000});
                                            parent.flushParent();
                                            layer_close();
                                            window.location.reload();
                                        }else if (data == -1) {
                                            layer.msg('记事本名称已经存在!', {icon: 5,time:1000});
                                        }else if (data == 0) {
                                            layer.msg('很抱歉!添加失败!', {icon: 5,time:1000});
                                        }else{
                                            layer.msg('系统异常!请与系统管理员联系!', {icon: 5,time:1000});
                                        }
                                    }
                                });

                            /*}*/
                        }
                    });
                }

                var showtopic = '';

                if(event.topic.length>15){
                    showtopic = event.topic.substring(0, 15) + '...';
                }else{
                    showtopic = event.topic;
                }


                $("#revdesc").html('
  
  
  
  
  
  
  
' + showtopic + "
" + '
' + '
' +' '+'事件类型:'+'' + ' '+ event.confname + '
' + event.confshortname + ' '+ event.confname+'记事' + ' 由 ' + event.fullname +' 创建'+'
'+' '+'内容:'+'' + event.description+ '
'); $( "#reserveinfo" ).dialog( { title: fstart + "-" + fend + " " + showtopic } ); $( "#reserveinfo" ).dialog( "open" ); return false; }, loading: function(bool) { if (bool) $('#loading').show(); else $('#loading').hide(); }, eventMouseover: function(calEvent, jsEvent, view) { var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm"); var fend = $.fullCalendar.formatDate(calEvent.end, "HH:mm"); $(this).attr('title', fstart + " - " + fend + " " + calEvent.topic + " : " + calEvent.description); $(this).css('font-weight', 'normal'); $(this).tooltip({ effect:'toggle', cancelDefault: true }); }, eventMouseout: function(calEvent, jsEvent, view) { $(this).css('font-weight', 'normal'); }, eventRender: function(event, element) { var fstart = $.fullCalendar.formatDate(event.start, "HH:mm"); var fend = $.fullCalendar.formatDate(event.end, "HH:mm"); // Bug in IE8 //element.html('' + fstart + "-" + fend + '
' + event.title + "
"); }, eventAfterRender : function(event, element, view) { /* alert("event===="+event.toString()); alert("element===="+element.toString()); alert("view===="+view.name);*/ var fstart = $.fullCalendar.formatDate(event.start, "HH:mm"); var fend = $.fullCalendar.formatDate(event.end, "HH:mm"); //element.html('
Time: ' + fstart + "-" + fend + '
Room:' + event.confname + '
Host:' + event.fullname + "
"); var confbg=''; if(event.confid==1){ confbg = confbg + ''; }else if(event.confid==2){ confbg = confbg + ''; }else if(event.confid==3){ confbg = confbg + ''; }else if(event.confid==4){ confbg = confbg + ''; }else if(event.confid==5){ confbg = confbg + ''; }else if(event.confid==6){ confbg = confbg + ''; }else{ confbg = confbg + ''; } var titlebg = '' + event.confshortname + ''; if(event.repweeks>0){ titlebg = titlebg + 'R'; } if(view.name=="month"){ var evtcontent = ' '; element.html(evtcontent); }else if(view.name=="agendaWeek"){ var evtcontent = ''; evtcontent = evtcontent + confbg; evtcontent = evtcontent + '' + fstart + "-" + fend + titlebg + ''; evtcontent = evtcontent + '' + event.confname + ' 由 ' + event.fullname + '  创建 '+ ''; //evtcontent = evtcontent + '' + event.fullname + ''; evtcontent = evtcontent + '
'; element.html(evtcontent); }else if(view.name=="agendaDay"){ var evtcontent = ''; evtcontent = evtcontent + confbg; evtcontent = evtcontent + '' + fstart + " - " + fend + titlebg + ''; evtcontent = evtcontent + '事件类型: ' + event.confname + ''; evtcontent = evtcontent + '人员: ' + event.fullname + ''; evtcontent = evtcontent + 'Topic: ' + event.topic + ''; evtcontent = evtcontent + '
'; element.html(evtcontent); } }, eventDragStart: function( event, jsEvent, ui, view ) { ui.helper.draggable("option", "revert", true); }, eventDragStop: function( event, jsEvent, ui, view ) { }, eventDrop: function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { console.log("进行时间拖拽的时候触发的事件"); console.log("event.start"+event.start) console.log("event.end"+event.end) console.log("event.id"+event.id) //拖拽的时候进行时间的改变 var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss"); var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss"); $.ajax({ type : "post", data :{ id :event.id, start :start, end :end }, url : "${ctx}/memo/updateNotepad", success : function(data) { if (data == 1){ console.log("拖拽事件成功") }else { console.log("拖拽事件失败") } } }); if(1==1||2==event.uid){ var schdata = {startdate:event.start, enddate:event.end, confid:event.confid, sid:event.sid}; }else{ revertFunc(); } }, eventResizeStart: function( event, jsEvent, ui, view ) { //alert('resizing'); }, eventResize: function(event,dayDelta,minuteDelta,revertFunc) { if(1==1||2==event.uid){ var schdata = {startdate:event.start, enddate:event.end, confid:event.confid, sid:event.sid}; }else{ revertFunc(); } } });

现在对以上代码进行简单的介绍,因为具体的使用方法可以查看API进行设置:

 header:{ right: 'prev,next today', center: 'title', left: 'month,agendaWeek,agendaDay' }, 
events: function(start, end , callback){ var now = new Date(); //初始化参数 var name = "songyuan"; var title = ""; var content = ""; var noteType = ""; //alert("进入到查询日程的方法里.内部") $.ajax({ type : "post", url : "${ctx}/memo/getNotepad", success : function(data) { var events = []; //alert("进入到events内部") $.each(data,function (key,value) { var noteType =""; if (value.noteType==1){ noteType = "工作"; }else if (value.noteType==2){ noteType = "生活"; }else if (value.noteType==3){ noteType = "家庭"; }else if (value.noteType==4){ noteType = "私密"; }else { noteType = "其他"; } events.push({ sid: 2, uid: 3, title: '记事簿', start: value.starTime, end: value.endTime, fullname: value.name, confname: noteType, confshortname: 'M1', confcolor: '#ff3f3f', confid: value.noteType, allDay: false, topic: value.title, description : value.content, id: value.id, }); }); callback(events); } }); }, 
dayClick: function(date, allDay, jsEvent, view) { var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd"); $( "#reservebox" ).dialog({ autoOpen: false, height: 450, width: 400, title: '建立记事簿 ' + selectdate, modal: true, position: "center", draggable: false, beforeClose: function(event, ui) { $.validationEngine.closePrompt("#thingsType"); $.validationEngine.closePrompt("#start"); $.validationEngine.closePrompt("#end"); }, buttons: { "取消": function() { $( this ).dialog( "close" ); }, "添加": function() { // alert("这就是点击了reserve的方法") /* if($("#reserveformID").validationEngine({returnIsValid:true})){*/ var startdatestr = $("#start").val(); var enddatestr = $("#end").val(); var confid = $("#thingsType").val(); var repweeks = $("#repweeks").val(); if(repweeks==null){ repweeks=0; } var startdate = $.fullCalendar.parseDate(selectdate+"T"+startdatestr); var enddate = $.fullCalendar.parseDate(selectdate+"T"+enddatestr); var schdata = {startdate:startdate, enddate:enddate, confid:confid, repweeks:repweeks}; var title = $("#title").val(); var content = $("#details").val(); /*}*/ //alert("startdatestr=="+startdatestr+"enddatestr=="+enddatestr+"enddatestr=="+enddatestr+"confid=="+confid+"repweeks=="+repweeks+"startdate=="+startdate+"enddate=="+enddate+"schdata=="+schdata) $.ajax({ type : "post", data :{ title : title, content : content, starTime : selectdate+" "+startdatestr+":00", endTime : selectdate+" "+enddatestr+":00", repeatWeeks :repweeks, thingsType : confid }, url : "${ctx}/memo/addNotepad", success : function(data) { //alert("添加数据完成"+data) //closewait(); window.location.reload(); //若执行成功的话,则隐藏进度条提示 if (data != null && data != 'undefined' && data == 1) { layer.msg('记事本添加成功!', {icon: 6,time:1000}); parent.flushParent(); layer_close(); window.location.reload(); }else if (data == -1) { layer.msg('记事本名称已经存在!', {icon: 5,time:1000}); }else if (data == 0) { layer.msg('很抱歉!添加失败!', {icon: 5,time:1000}); }else{ layer.msg('系统异常!请与系统管理员联系!', {icon: 5,time:1000}); } } }); } } }); $( "#reservebox" ).dialog( "open" ); return false; }, 
 eventClick: function(event) {
                var fstart  = $.fullCalendar.formatDate(event.start, "yyyy/MM/dd HH:mm");
                var fend  = $.fullCalendar.formatDate(event.end, "HH:mm");
                var schdata = {sid:event.sid, deleted:1, uid:event.uid};

                $( "#reserveinfo" ).dialog({
                    autoOpen: false,
                    height: 280,
                    width: 400,
                    modal: true,
                    position: "center",
                    draggable: false,
                    buttons: {
                        "close": function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });

                if(1==1||2==schdata.uid){
                    $("#reserveinfo").dialog("option", "buttons", {
                        "取消": function() {
                            $( this ).dialog( "close" );
                        },

                        "取消日程": function() {
                           // var answer = confirm("确定取消日程吗?");
                          /*  layer.confirm("确定取消日程吗?",{
                                btn: ['确定', '取消'] //按钮
                            },function () {
                                alert("进入到了confirm里面")
                            });*/
                            /*if(answer){*/
                             // alert("eventId===="+event.id)
                                $.ajax({
                                    type : "post",
                                    data :{
                                        id :event.id
                                    },
                                    url : "${ctx}/memo/cancleNotepad",
                                    success : function(data) {
                                        window.location.reload();
                                        //若执行成功的话,则隐藏进度条提示
                                        if (data != null && data != 'undefined'
                                            && data == 1) {
                                            layer.msg('记事本取消成功!', {icon: 6,time:1000});
                                            parent.flushParent();
                                            layer_close();
                                            window.location.reload();
                                        }else if (data == -1) {
                                            layer.msg('记事本名称已经存在!', {icon: 5,time:1000});
                                        }else if (data == 0) {
                                            layer.msg('很抱歉!添加失败!', {icon: 5,time:1000});
                                        }else{
                                            layer.msg('系统异常!请与系统管理员联系!', {icon: 5,time:1000});
                                        }
                                    }
                                });

                            /*}*/
                        }
                    });
                }

                var showtopic = '';

                if(event.topic.length>15){
                    showtopic = event.topic.substring(0, 15) + '...';
                }else{
                    showtopic = event.topic;
                }


                $("#revdesc").html('
  
  
  
  
  
  
  
' + showtopic + "
" + '
' + '
' +' '+'事件类型:'+'' + ' '+ event.confname + '
' + event.confshortname + ' '+ event.confname+'记事' + ' 由 ' + event.fullname +' 创建'+'
'+' '+'内容:'+'' + event.description+ '
'); $( "#reserveinfo" ).dialog( { title: fstart + "-" + fend + " " + showtopic } ); $( "#reserveinfo" ).dialog( "open" ); return false; },

然后还有鼠标悬浮事件之类的更多的方法,这里就不一一赘述了,有兴趣的朋友可以自行研究,接下来就是本jsp页面的所有代码:

<%--
  Created by IntelliJ IDEA.
  User: zhangrui
  Date: 2018/1/16
  Time: 11:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

  
  
  
  
  
  
   
   
    
     
      
       
        
         
         Title 
          
           
            
             
             
              
              
               
               
               
               
               
               
               
               <%--layer弹出框--%> 
               <%-- 
              --%> 
              

关注公众号回复 fullCalendar 即可获取下载链接自行下载呦,省的等博主手动发送哟~~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/205777.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月19日 下午5:13
下一篇 2026年3月19日 下午5:13


相关推荐

  • 权限与路径管理

    权限与路径管理

    2026年3月13日
    3
  • Linux 下查看java进程

    Linux 下查看java进程Linux下查看和停止所有java进程1.ps-ef|grepjava在Linux下查看所有java进程命令:ps-ef|grepjava停止特定java进程命令:kill-9java进程序号停止所有java进程命令:pkill-9java2.jpsjps-l-v比较常用的参数:-q只显示pid,不显示class名称,jar文件名和传递给main方…

    2022年8月24日
    11
  • java字节序、主机字节序和网络字节序扫盲贴

    java字节序、主机字节序和网络字节序扫盲贴java 程序员是幸福 因为相对于 C C 的不跨平台 JVM 为我们屏蔽了大量的底层细节和复杂性 让我们能够将精力放在实现特定的业务逻辑上 所以使用 java 开发项目效率是比较高的 同时 java 程序员是悲哀的 就是因为 JVM 屏蔽了很多技术细节 导致 java 程序员基本功普遍较差 对一些基本概念理解不深 甚至根本没有听说过 作为一个 java 程序员 我深深的感到自己知识面的狭窄 无意中看到了字节序 以前竟然

    2026年3月18日
    2
  • IplImage中的widthStep大小计算及原理[通俗易懂]

    IplImage中的widthStep大小计算及原理[通俗易懂]一直以为IplImage结构体中的widthStep元素大小等于width*nChannels,大错特错!查看OpenCV2.1的源码,在src/cxcore/cxarray.cpp文件中,找到cvInitImageHeader函数,函数中对widthStep大小赋值如下:image->widthStep=(((image->width*image->nChannels*

    2022年4月30日
    52
  • QComboBox样式设置——Qt

    QComboBox样式设置——Qt前言我对 qss 只会一些简单的 所以每次都得查资料 自己调 好麻烦 特别是之前一篇博客关于菜单样式的设置 这次以为两者相似 结果不是的 这个 QComboBox 下拉框的样式设置有稍微复杂 有些关键点得记住 所以用这篇博客记录下 代码和说明有图有真相 我现在将 QComboBox 样式表中的部分关键词标出来 更直观一些 QComboBox 常规样式图中 QComboBox 我只圈出了上面一部分 按理说整个都是属于 QComboBox 但

    2026年1月16日
    4
  • EVE模拟器教程之如何设置预配[通俗易懂]

    EVE模拟器教程之如何设置预配[通俗易懂]很多时候我们想把EVE所有的配置都清空,但是又想在清空时保存最基本的预配,比如IP地址,Hostname等等,以下为设置预配详细步骤:1)配置好每台设备的IP地址,计算机名,以及你想预配的信息,然后保存。2)选择菜单选项栏Moreactions—ExportallCFGs注意右边消息窗口弹出configexported并且无错误,此导出步骤请重复2-3遍。…

    2022年6月10日
    39

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号