fullcalendar日历组件应用

最新推荐文章于 2023-08-21 16:19:35 发布
最新推荐文章于 2023-08-21 16:19:35 发布
阅读量782 收藏 1
点赞数 2
分类专栏： Fullcalender日历组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaoshili001/article/details/42640955
版权

代码实现（在项目中我用的是MySql数据库，在代码中所访问的各个action（这个就不用多说了吧？）中的代码就是用来和数据库进行关联的，大家可以根据自己所使用的数据库灵活的变动）：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>">
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <meta name="description" content="jQuery fullcalendar demo">
    <meta name="keywords" content="gbin1.com, jQuery full calendar">
    <meta name="author" content="terry li">
    <link rel="stylesheet" href="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/css/mainstructure.css">
    <link rel="stylesheet" href="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/css/maincontent.css">
    <!-- Jquery and Jquery UI -->
    <script type="text/javascript" src="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/js/jquery-ui-1.8.6.custom.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/js/jquery-ui-timepicker-addon.js"></script>
    <link rel="stylesheet" href="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/css/redmond/jquery-ui-1.8.1.custom.css">
    <!-- Jquery and Jquery UI -->
    <script src="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/js/formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>
    <script src="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/js/formValidator/js/jquery.validationEngine-en.js" type="text/javascript"></script>
    <link rel="stylesheet" href="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/js/formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
    <!-- FullCalender -->
<link href='<%=basePath%>/Backstage/Style/fullcalendar-1.6.1/fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='<%=basePath%>/Backstage/Style/fullcalendar-1.6.1/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='<%=basePath%>/Backstage/Style/fullcalendar-1.6.1/fullcalendar/fullcalendar.min.js'></script>
<script src='<%=basePath%>/Backstage/Style/fullcalendar-1.6.1/fullcalendar/gcal.js'></script>
<style>


body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}


#calendar {
width: 900px;
margin: 0 auto;
}


</style>
</head>
<body>
   <script type="text/javascript">


$(document).ready(function() {

var date = new Date();
var d = date.getDate();
var m = date.getMonth()+1;
var y = date.getFullYear();
//alert(title);
   $("#start").timepicker({ dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm', hourMin: 0, hourMax: 24, hourGrid: 3, minuteGrid: 15 });
        $("#end").timepicker({ dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm', hourMin: 0, hourMax: 24, hourGrid: 3, minuteGrid: 15 });


        $("#addhelper").hide();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'prevYear, title ,nextYear',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
weekMode : "liquid",
theme:true,
viewDisplay: function (view) {//动态把数据查出，按照月份动态查询
               var viewStart = $.fullCalendar.formatDate(view.start, "yyyy-MM-dd HH:mm:ss");
               var viewEnd = $.fullCalendar.formatDate(view.end, "yyyy-MM-dd HH:mm:ss");
               $("#calendar").fullCalendar('removeEvents');
               $.post("<%=basePath%>/EventsAction!search.do", { start: viewStart, end: viewEnd }, function (data) {
                   var resultCollection = jQuery.parseJSON(data);
                   $.each(resultCollection, function (index, term) {
                       $("#calendar").fullCalendar('renderEvent',term, true);
                   });

               }); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
           },
select: function (date,start, end, allDay) {
                var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd");


                $("#reservebox").dialog({
                    autoOpen: false,
                    height: 450,
                    width: 400,
                    title: '信息中心大事件 ',
                    modal: true,
                    position: "center",
                    draggable: false,
                    beforeClose: function (event, ui) {
                        /* $.validationEngine.closePrompt("#meeting");
                        $.validationEngine.closePrompt("#start");
                        $.validationEngine.closePrompt("#end"); */
                    },
                    buttons: {
                        "关闭": function () {
                            $(this).dialog("close");
                        },
                        "添加": function () {
//                            if ($("#reserveformID").validationEngine({ returnIsValid: true })) {
                                var startdatestr = $("#start").val(); //开始时间
                            var enddatestr = $("#end").val(); //结束时间
                            var confid = $("#title").val(); //标题
                            var det = $("#details").val(); //内容 
                            var id2;
                            var startdate = $.fullCalendar.parseDate(selectdate + "T" + startdatestr);//时间和日期拼接
                            var enddate = $.fullCalendar.parseDate(selectdate + "T" + enddatestr);
                            var schdata = { title: confid, description: det, start: selectdate + ' ' + startdatestr, end: selectdate + ' ' + enddatestr };
                            $.ajax({
                                type: "post", //使用post方法访问后台
                                url: "<%=request.getContextPath() %>/EventsAction!addEvents.do", //要访问的后台地址
                                data: schdata, //要发送的数据
                                success: function (data) {
                                   //对话框里面的数据提交完成，data为操作结果
                                    //alert(data);
                                    //id2 = data.eventId;
                                    //var schdata2 = { title: confid, description: det, start: selectdate + ' ' + startdatestr, end: enddatestr, id: id2 };
                                    //$('#calendar').fullCalendar('renderEvent', schdata2, true);
                                    $("#start").val(''); //开始时间
                                    $("#end").val(''); //结束时间
                                    $("#title").val(''); //标题
                                    $("#details").val(''); //内容 
                                    window.location = '<%=basePath%>/Backstage/Sysi/Events/selectable.jsp';
                                }
                            });
                                $(this).dialog("close");
                            }
                    }
                });
                $("#reservebox").dialog("open");
                return false;
            },
editable: false,
allDaySlot:true,
loading: function (bool) {
                if (bool) $('#loading').show();
                else $('#loading').hide();
            },
            eventAfterRender: function (event, element, view) {//数据绑定上去后添加相应信息在页面上
                var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");
                var fend = $.fullCalendar.formatDate(event.end, "HH:mm");


                var confbg = '';
                if (event.confid == 1) {
                    confbg = confbg + '<span class="fc-event-bg"></span>';
                } else if (event.confid == 2) {
                    confbg = confbg + '<span class="fc-event-bg"></span>';
                } else if (event.confid == 3) {
                    confbg = confbg + '<span class="fc-event-bg"></span>';
                } else if (event.confid == 4) {
                    confbg = confbg + '<span class="fc-event-bg"></span>';
                } else if (event.confid == 5) {
                    confbg = confbg + '<span class="fc-event-bg"></span>';
               } else if (event.confid == 6) {
                    confbg = confbg + '<span class="fc-event-bg"></span>';
                } else {
                    confbg = confbg + '<span class="fc-event-bg"></span>';
                }


                if (view.name == "month") {//按月份
                    var evtcontent = '<div class="fc-event-vert"><a>';
                    evtcontent = evtcontent + confbg;
                    evtcontent = evtcontent + '<span class="fc-event-titlebg">' + fstart + " - " + fend + "  (" + event.title + ")" + '</span>';


                    element.html(evtcontent);
                } else if (view.name == "agendaWeek") {//按周
                    var evtcontent = '<a>';
                    evtcontent = evtcontent + confbg;
                    evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + "-" + fend  + '</span>';
                    evtcontent = evtcontent + '<span>'+ event.title + '</span>';
    
                    element.html(evtcontent);
                } else if (view.name == "agendaDay") {//按日
                    var evtcontent = '<a>';
                    evtcontent = evtcontent + confbg;
                    evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + " - " + fend +  '</span>';
                    evtcontent = evtcontent + '<span>'+ event.title + '</span>';
                    element.html(evtcontent);
                }
            },
            eventMouseover: function (calEvent, jsEvent, view) {
                var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm");
                var fend = $.fullCalendar.formatDate(calEvent.end, "yyyy/MM/dd HH:mm");
                $(this).attr('title', fstart + " - " + fend + " " + "标题" + " : " + calEvent.title);
                $(this).css('font-weight', 'normal');
                $(this).tooltip({
                    effect: 'toggle',
                    cancelDefault: true
                });
            },
eventClick: function (event) {
                 var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");
                 var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
                 //  var schdata = { sid: event.sid, deleted: 1, uid: event.uid };
                 var selectdate = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd");
                 $("#start").val(fstart); ;
                 $("#end").datetimepicker('setDate', event.end);
 
                 $("#title").val(event.title); //标题
                 $("#details").val(event.description); //内容 


                 $("#reservebox").dialog({
                     autoOpen: false,
                     height: 450,
                     width: 400,
                     title: '信息中心事件编辑器',
                     modal: true,
                     position: "center",
                     draggable: false,
                     beforeClose: function (event, ui) {
                         //$.validationEngine.closePrompt("#meeting");
                         //$.validationEngine.closePrompt("#start");
                         //$.validationEngine.closePrompt("#end");
                         $("#start").val(''); //开始时间
                         $("#end").val(''); //结束时间
                         $("#title").val(''); //标题
                         $("#details").val(''); //内容 
                         $("#chengdu").val(''); //重要程度 
                     },
                     timeFormat: 'HH:mm{ - HH:mm}',
 
                     buttons: {
                         "删除": function () {
                             var aa = window.confirm("警告：确定要删除记录，删除后无法恢复！");
                             if (aa) {
                                var para = { id: event.id };
                                 $.ajax({
                                    type: "POST", //使用post方法访问后台
                                    url: "<%=basePath%>/EventsAction!delete.do", //要访问的后台地址
                                    data: para, //要发送的数据
                                     success: function (data) {
                                         //对话框里面的数据提交完成，data为操作结果
                                         //$('#calendar').fullCalendar('removeEvents', event.id);
                                    window.location = '<%=basePath%>/Backstage/Sysi/Events/selectable.jsp';
                                     }
                                 });
 
                             }
                             $(this).dialog("close");
                     },
                         "修改": function () {
                             var startdatestr = $("#start").val(); //开始时间
                             var enddatestr = $("#end").val(); //结束时间
                             var confid = $("#title").val(); //标题
                             var det = $("#details").val(); //内容 
                             var cd = $("#chengdu").val(); //重要程度 
                             var startdate = $.fullCalendar.parseDate(selectdate + "T" + startdatestr);
                             var enddate = $.fullCalendar.parseDate(enddatestr);
 
                             event.fullname = confid;
                             event.confname = cd;
                             event.start = startdate;
                             event.end = enddate;
                             event.description = det;
                          var id2;
 
                             var schdata = { title: confid, description: det, start: selectdate + ' ' + startdatestr, end: selectdate + ' ' + enddatestr, id: event.id };
                             $.ajax({
                                 type: "POST", //使用post方法访问后台
                                 url: "<%=basePath%>/EventsAction!updateEvents.do", //要访问的后台地址
                                 data: schdata, //要发送的数据
                                 success: function (data) {
                                window.location = '<%=basePath%>/Backstage/Sysi/Events/selectable.jsp';
                                     //对话框里面的数据提交完成，data为操作结果
                                     //var schdata2 = { title: confid, fullname: confid, description: det, confname: cd, confshortname: 'M1', start: selectdate + ' ' + startdatestr, end: enddatestr, id: event.id };
                                     //$('#calendar').fullCalendar('updateEvent', event);
                                 }
                             });
                             $(this).dialog("close");
                         }
 
                     }
             });
                 $("#reservebox").dialog("open");
                 return false;
             },
events: []
});

});


</script>
        <div id="calendar">
        </div>
        <div id="reserveinfo" title="Details">
            <div id="revtitle">
            </div>
            <div id="revdesc">
            </div>
        </div>
        <div style="display: none" id="reservebox" title="Reserve meeting room">
           
            <div class="sysdesc">
                &nbsp;</div>
           <!-- <div class="rowElem">
                <label>
                    meeting room:</label>
              
                <select id="meeting"   name="meeting">
                </select>
            </div>-->
           <%--  <div class="rowElem">
                <label>
                    Repeated weeks:</label>
                <select id="repweeks" name="repweeks">
                    <option selected value="0">Not repeated</option>
                    <option value="2">1 week</option>
                    <option value="3">2 weeks</option>
                    <option value="4">3 weeks</option>
                    <option value="5">4 weeks</option>
                    <option value="9">8 weeks</option>
                    <option value="17">16 weeks</option>
                    <option value="33">32 weeks</option>
                </select>
            </div> --%>
            <div class="rowElem">
                <label>开始时间:</label>
                <input id="start" name="start">
            </div>
            <div class="rowElem">
                <label>结束时间:</label>
                <input id="end"   name="end">
            </div>
            <div class="rowElem">
                <label>标题:</label>
                <input id="title" name="title">
            </div>
            <div class="rowElem">
                <label>事件详细:</label>
                <textarea id="details" rows="3" cols="43" name="details"></textarea>
            </div>
            <div class="rowElem">
            </div>
            <div class="rowElem">
            </div>
            <div id="addhelper" class="ui-widget">
                <div style="padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px"
                    class="ui-state-error ui-corner-all">
                    <div id="addresult">
                    </div>
                </div>
            </div>
         
        </div>
    </div>
</body>
</html>


效果图如下：





说明:头文件中需要的css和js，可以用下面的链接下载。

http://pan.baidu.com/s/1qW0VoWc


我爱喝可乐
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
FullCalendar日历组件集成实战（2）
学海无涯，行者无疆
05-14 1026
有一些应用系统或应用功能，如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件，但功能比较简单，用来做数据展现勉强可用。但如果需要进行复杂的数据展示，以及互动操作如通过点击添加事件，则需要做大量的二次开发。FullCalendar是一款备受欢迎的开源日历组件，以其强大的功能而著称。其基础功能不仅免费且开源，为开发者提供了极大的便利，仅有少量高级功能需要收费。
FullCalendar日历插件的简单使用(版本4.2.0)
云兮莫愁的博客
07-05 8396
最近开的一个项目，涉及到了日历日程安排的功能，所以选用了一个免费的日历插件：FullCalendar 1.首先去官网将官方的demo下载下来，通过官方的demo进行一个初步的了解，下面正式开始 PS:中文文档的可能不太全，不清楚的可以去官网看看 2.建议先试试官方的示例： document.addEventListener('DOMContentLoaded', function()...
fullcanlendar-1.6.4主题改装版.zip
09-13
fullcanlendar-1.6.4主题改装版，可以自定义周月的视图，通过render将日程改成自己想要的样式，方便显示不同类型或者不同紧急程度的日程，可直接用于自己的项目管理。
日历插件Fullcalendar使用
俊人呀的博客
11-18 1036
<div class="layui-body-header"> <div id='calendar'></div> </div> $(function() { var data_ri = []; var calendarEl = document.getElementById('calendar'); var ca...
fullcalendar月份切换监听点击事件
qq_27161847的博客
08-25 3660
这里写自定义目录标题fullcalendar月份切换监听点击事件 fullcalendar月份切换监听点击事件 //以下是fullcalendar各个属性和方法解释和用法
在vue中使用FullCanlendar实现日历预约会议室功能
白云苍狗
11-02 5591
在Vue项目是使用FullCalendar插件,完成一个预约会议室的功能~
fullcalendar日历插件使用手册
Ronux的专栏
01-04 6794
我是在angularjs框架下使用的，看到下面的代码不要一味照搬，不过差别不大，依葫芦画瓢即可。引用//安装angular-ui-calendar插件，目前最新版本是1.0.2 bower install angular-ui-calendar界面展示功能说明：拖拽左侧节假日到日历控件，一天不允许有两个节假日，可以拖拽添加，可以移动，shift+click表示删除节假日。 html<div cla
使用el-calendar组件完成日历
小柠檬爱编程
09-01 1926
效果图 直接贴上这个功能,这个样式所有的代码,有需要可自行拿取,修改 <template> <div class="life-record"> <!-- 头部搜索,及添加按钮 --> <div class="header"> <div class="date-picker"> <el-button icon="el-icon-arrow-left" t
FullCalendar日历组件
02-26
FullCalendar日历重要的js和css文件
FullCalendar日历组件任务增删改完整代码+后端
最新发布
02-26
FullCalendar日历组件任务增删改完整代码+后端代码
FullCalendar日历插件应用之数据展现(一)
11-23
开发者可以使用FullCalendar创建强大的日历日程应用，FullCalendar提供了丰富的选项设置和方法调用，使得开发者可以轻松的创建各种功能的日历程序。 由于项目需求，需要通过日历的方式展现某些数据，在网上搜索了很...
CocosCreator开发简易日历
10-10
使用CocosCreator开发的一个简易的日历，其样式类似于电脑上显示的日历，不过没有那么完善
fullcalendar-react:FullCalendar的官方React组件
04-29
FullCalendar React组件 React的官方FullCalendar组件。 这不仅仅是一个“连接器”。 它告诉核心FullCalendar包开始使用React虚拟DOM节点（而不是通常使用的节点）进行渲染，从而将转换为“真实的” React组件。 您可以中学到更多（更多信息）。
fullCalendar 日历
09-19
fullCalendar 日历
日程表组件FullCalendar(V4.4.1)使用小结
06-08 1377
FullCalendar是一款功能强大，用法简单的js日程表组件，目前已支持React，Vue和Angular三大主流框架。最近Vue项目需要日程表进行数据的增删改查，通过官方文档和demo顺利完成，在此特意记录下使用FullCalendar的踩坑过程。 1.组件下载 FullCalendar属于用啥下啥模式，官网罗列了各组件包详情，支持Package，zip和CDN三种下载方式，直接npm下载 npm install --save @fullcalendar/vue @fullcalendar/i
【日历组件】前端使用fullcalendar组件实现会议室预约功能
柠檬加冰
04-23 1万+
框架描述 使用框架技术 使用fullcalendar，作为日历组件的基本框架 使用layer弹出框，作为填写会议室预约详情的组件 关键技术讲解 日历组件的点击事件 点击事件使用eventClick函数实现 函数中，能够通过event获取当前点击的日程详细信息 eventClick: function (event, jsEvent, view) { ...
React日历组件fullcalendar使用指北
棉花没有糖的博客
08-21 1471
react中的日历插件fullcalender的使用说明
fullCalendar插件的使用简单教程
热门推荐
Reborn_Chang的博客
01-19 5万+
最近项目中想实现一个基于日历的事件提醒,百度众多资源后选定使用fullCalendar进行实现,那首先来说下fullCalendar的官网:https://fullcalendar.io/在这上面有简单的demo以及API,但是是英文的,那么英文不太好的朋友可以选择翻译或者来看这个中文版的API:http://www.jb51.net/article/104841.htm,相对于官网的API,这个...
jquery.validationEngine
王旭东
12-04 173
           在项目中表单的验证的选择是 JQuery.validationEngine 倒是一个不错的选择，无论在 Java or .NET 上都还不错，可以满足一般表单提交验证的需求，但是通过这个项目做的发现有时候怎么都想不起比如说下拉框怎么用 validationEngine 进行验证，所以今天想想还是好好总结总结吧，免得犯怂。...
移动端功能强大的日历组件
08-19
推荐您使用 FullCalendar，它是一个功能强大的移动端日历组件。FullCalendar支持多种视图模式，包括月、周、日、列表等，可以轻松切换视图以满足不同的需求。它还提供了丰富的API和事件，允许您自定义样式、添加事件、拖拽调整事件等。FullCalendar还支持响应式设计，适应不同大小的屏幕，并且提供了多语言支持。 另外，如果您使用React开发移动端应用，可以考虑使用React Big Calendar。它是一个基于React的日历组件，具有类似FullCalendar的功能和灵活性。React Big Calendar可以方便地集成到React应用中，并且支持自定义样式和事件处理。 这两个日历组件都具有强大的功能和良好的用户体验，可以满足您在移动端上实现强大日历功能的需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值