首页 > 其他 > 详细

基于fullcalendar的日常安排实例

时间：2020-01-09 17:54:00      阅读：99      评论：0      收藏：0      [点我收藏+]

话不多说直接上代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="日程安排,FullCalendar,jquery实例">
<meta name="description" content="Helloweba，在线演示HTML、CSS、jquery、PHP示例DEMO。">
<title>演示：日程安排FullCalendar</title>
<link rel="stylesheet" type="text/css" href="http://www.helloweba.com/demo/css/main.css">
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css">
<style type="text/css">
#calendar{width:960px; margin:20px auto 10px auto}
</style>
<script src=‘js/jquery-1.9.1.min.js‘></script>
<script src=‘js/jquery-ui-1.10.2.custom.min.js‘></script>
<script src=‘js/fullcalendar.min.js‘></script>
<script type="text/javascript">
$(function() {
    
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        
        $(‘#calendar‘).fullCalendar({
            header: {
                left: ‘prev,next today‘,
                center: ‘title‘,
                right: ‘month,agendaWeek,agendaDay‘
            },
            firstDay:1,
            editable: true,
            timeFormat: ‘H:mm‘,
            axisFormat: ‘H:mm‘,
            events: [
                {
                    title: ‘全天计划\r\n#####\r\n写代码‘,
                    start: new Date(y, m, 1)
                },
                {
                    title: ‘张家界四日游‘,
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                },
                {
                    id: 999,
                    title: ‘电话回访客户‘,
                    start: new Date(y, m, d-6, 16, 0),
                    allDay: false
                },
                {
                    id: 999,
                    title: ‘电话回访客户‘,
                    start: new Date(y, m, d+4, 16, 0),
                    allDay: false
                },
                {
                    title: ‘视频会议‘,
                    start: new Date(y, m, d, 10, 30),
                    allDay: false
                },
                {
                    title: ‘中秋放假‘,
                    start: ‘2013-09-19‘,
                    end: ‘2013-09-21‘,
                },
                {
                    title: ‘午饭‘,
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                },
                {
                    title: ‘生日聚会‘,
                    start: new Date(y, m, d+1, 19, 0),
                    end: new Date(y, m, d+1, 22, 30),
                    allDay: false
                },
                {
                    title: ‘访问Helloweba主页‘,
                    start: new Date(y, m, 28),
                    end: new Date(y, m, 29),
                    url: ‘http://helloweba.com/‘
                },
                {
                    title: ‘实战训练课‘,
                    start: new Date(y, m, d+23)
                },
            ]
        });
        
    });
</script>
</head>

<body>
<div id="header">
   <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div>
</div>

<div id="main" style="width:1060px">
   <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-230.html">日程安排FullCalendar</a></h2>
   <div id=‘calendar‘></div>
   <div class="ad_76090"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br/>
</div>
<div id="footer">
    <p>Powered by helloweba.com  允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p>
</div>

<p id="stat"><script type="text/javascript" src="/js/tongji.js"></script></p>

</body>
</html>

运行结果如图所示

技术分享图片

 

 

 

 再说几个触发事件,使用方法是直接在Event方法后面直接写

1、日期点击

dayClick: function (date, allDay, jsEvent, view) {
alert("日期点击")
}）

2、事件点击（有时需要双击才行，只是个BUG，没找到问题所在）

eventClick: function (event) {
alert("事件点击")
})

3、事件拖动

eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
alert("事件拖动")
})

以下内容是我自己写的扩展

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="日程安排,FullCalendar,jquery实例">
    <meta name="description" content="Helloweba，在线演示HTML、CSS、jquery、PHP示例DEMO。">
    <title>演示：日程安排FullCalendar</title>
    <link href="../../script/Plugins/datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../../script/Plugins/helloweba_fullcalendar/css/fullcalendar.css">
    


    <script src=‘../../script/Plugins/helloweba_fullcalendar/js/jquery-1.9.1.min.js‘></script>
    <script src=‘../../script/Plugins/helloweba_fullcalendar/js/jquery-ui-1.10.2.custom.min.js‘></script>
    <script src=‘../../script/Plugins/helloweba_fullcalendar/js/fullcalendar.min.js‘></script>
    <link href="../../script/Plugins/sweetalert/sweetalert.css" rel="stylesheet" />
    <script src="../../script/Plugins/sweetalert/sweetalert-dev.js" charset="gb2312"></script>
    <link href="../../script/Plugins/select2/select2.css" rel="stylesheet" />

    <link rel="stylesheet" href="../../script/Plugins/hDialog/css/common.css" /><!-- 基本样式 -->
    <link rel="stylesheet" href="../../script/Plugins/hDialog/css/animate.min.css" /> <!-- 动画效果 -->

    <script src="../../script/Common/appConfig.js"></script>

    <script src=‘../../script/Plugins/My97DatePicker/WdatePicker.js‘></script>

    <script src="../../script/Plugins/select2/select2.js"></script>
    <script src="../../script/Plugins/select2tree-master/select2tree.js"></script>

    <script type="text/javascript">

        var doUrl = "";
        var id = "";
        $(function () {
            bindAllDay();

            var orgId=GetQueryString("OrgId");
            var $el = $(‘.dialog‘);
            $el.hDialog();

            $(‘#calendar‘).fullCalendar({
                header: {
                    left: ‘prev,next today‘,
                    center: ‘title‘,
                    //right: ‘month,agendaWeek,agendaDay‘
                    right: ‘month‘
                },
                firstDay: 1,
                editable: true,
                timeFormat: ‘H:mm‘,
                axisFormat: ‘H:mm‘,
                height: 550,
                events: function (start, end, callback) {
                    var url = appConfig.sysInfo.sysServiceUrl + ‘NoticeManagemnetService.asmx/GetNoticeListByOrgId‘;
                    var para = { OrgId: orgId };
                    $.ajax({
                        data: JSON.stringify(para),
                        url: url,
                        type: "POST",
                        global: true,
                        cache: true,
                        async: false,
                        dataType: ‘text‘,
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
                        },
                        cache: false,
                        success: function (data) {
                            data = $.parseJSON($.parseJSON(data).d);
                            if (data.Flag != "-1") {
                                data = data.Result;
                                var events = [];
                                //alert("进入到events内部")
                                $.each(data, function (key, value) {
                                    events.push({
                                        title: value.TITLE,
                                        start: value.STARTDATE,
                                        end: value.ENDDATE,
                                        confcolor: ‘#fff‘,
                                        allDay: value.ALLDAY == "0" ? false : true,
                                        topic: value.TITLE,
                                        id: value.ID,
                                        orgid: value.ORGID,
                                        //userid: value.USERID
                                    });
                                });
                            }
                            callback(events);
                        },
                        error: function (xml, status) {

                        }
                    });
                }, //日期点击
                dayClick: function (date, allDay, jsEvent, view) {
                    //bindUserSel("");
                    var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd");
                    $(this).hDialog({ modalHide: false });
                    doUrl = appConfig.sysInfo.sysServiceUrl + ‘NoticeManagemnetService.asmx/AddNotice‘;
                    //清空内容
                    $("#btnDel").hide();
                    $("#userId").val("").select2();
                }, //事件点击
                eventClick: function (event) {
                    //bindUserSel(event.userid);
                    var fstart = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm");
                    var fend = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm");
                    id = event.id;
                    //$(this).hDialog({ modalHide: false });
                    $(this).hDialog({
                        modalHide: false,
                        beforeShow: function () {
                            //回填内容
                            $("#startTime").val(fstart);
                            $("#endTime").val(fend);
                            //$("#userId").val(event.userid);
                            $("#userId").val(event.userid).select2();
                            $("#title").val(event.title);
                            $("#btnDel").show();
                            var allday = event.allDay == false ? "0" : "1";
                            $("#isAllDay").val(allday).select2();
                        }

                    });

                    doUrl = appConfig.sysInfo.sysServiceUrl + ‘NoticeManagemnetService.asmx/UpdNotice‘;
                }, //事件拖动
                eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
                    var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
                    var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
                    var id = event.ID;
                    var para = {
                        ID: event.id,
                        STARTDATE: $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss"),
                        ENDDATE: $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss"),
                        ORGID: event.orgid,
                        TITLE: event.title,
                        //USERID: event.userid,
                        ALLDAY: event.allDay == false ? "0" : "1"
                    }

                    var url = appConfig.sysInfo.sysServiceUrl + ‘NoticeManagemnetService.asmx/UpdNotice‘;
                    var json = { json: JSON.stringify(para) };
                    $.ajax({
                        data: JSON.stringify(json),
                        url: url,
                        type: "POST",
                        global: true,
                        cache: true,
                        async: false,
                        dataType: ‘text‘,
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
                        },
                        cache: false,
                        success: function (data) {
                            data = $.parseJSON($.parseJSON(data).d);
                            if (data.Flag != "-1") {
                                swal({
                                    title: "保存成功！",
                                    type: "success",
                                    text: "2秒后自动关闭。",
                                    timer: 2000,
                                    showConfirmButton: true
                                });
                            } else {
                                swal({
                                    title: "保存失败！",
                                    type: "error",
                                    text: "2秒后自动关闭。",
                                    timer: 2000,
                                    showConfirmButton: true
                                });
                            }
                        },
                        error: function (xml, status) {

                        }
                    });
                }
            });

        });
    </script>
</head>

<body>
    <div id="main" style="width:98%">
        <div id=‘calendar‘></div>
    </div>

    <div id="HBox">
        <form action="" method="post" onsubmit="return false;">
            <ul class="list">
                <li>
                    <strong>开始时间<font color="#ff0000">*</font></strong>
                    <div class="fl"><input type="text" class="ipt datapicker" id="startTime"
                            onClick="WdatePicker({dateFmt:‘yyyy-MM-dd HH:mm‘})" />
                    </div>
                </li>
                <li>
                    <strong>结束时间<font color="#ff0000">*</font></strong>
                    <div class="fl"><input type="text" class="ipt" id="endTime"
                            onClick="WdatePicker({dateFmt:‘yyyy-MM-dd HH:mm‘})" /></div>
                </li>
                <!-- <li>
                    <strong>人 员<font color="#ff0000">*</font></strong>
                    <div class="fl">
                        <select id="userId" class="select2" style="width: 100%;">

                        </select>
                    </div>
                </li> -->
                <li>
                    <strong>工作内容<font color="#ff0000">*</font></strong>
                    <div class="fl"><textarea class="ipt" id="title" rows="3"></textarea></div>
                    <!-- <input type="text" class="ipt" id="title" /> -->
                </li>
                <li>
                    <strong>是否全天 <font color="#ff0000">*</font></strong>
                    <div class="fl">
                        <select id="isAllDay" class="select2" style="width: 100%;">
                        </select>
                    </div>
                </li>

                <li><input type="button" value="确认提交" id="btnSub"
                        style="background-color: deepskyblue;color: #FFF;height: 30px;" />
                    <input type="button" value="取消日程" id="btnDel"
                        style="background-color: deepskyblue;color: #FFF;height: 30px;" /></li>
            </ul>
        </form>
    </div><!-- HBox end -->

    <script src="../../script/Plugins/hDialog/js/jquery.hDialog.min.js"></script>

    <script src="../../script/Plugins/moment/moment.js"></script>
    <script src="../../script/Plugins/datetimepicker/bootstrap-datetimepicker.js"></script>

    <script>

        $("#btnSub").on(‘click‘, function () {
            if ($("#startTime").val() == "" || $("#endTime").val() == "" || $("#title").val() == "" ||  $("#isAllDay").val() == "") {
                $("#HCloseBtn").click();
                swal({
                    title: "所有必填项均不能为空",
                    type: "error",
                    text: "2秒后自动关闭。",
                    timer: 2000,
                    showConfirmButton: true
                });
                
                return false;
            }

            var doSub = {
                ID: id,
                STARTDATE: $("#startTime").val(),
                ENDDATE: $("#endTime").val(),
                //ORGID: event.orgid,
                TITLE: $("#title").val(),
                ORGID: GetQueryString("OrgId"),
                ALLDAY: $("#isAllDay").val()
            }
            var json = { json: JSON.stringify(doSub) };
            $.ajax({
                data: JSON.stringify(json),
                url: doUrl,
                type: "POST",
                global: true,
                cache: true,
                async: false,
                dataType: ‘text‘,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
                },
                cache: false,
                success: function (data) {
                    data = $.parseJSON($.parseJSON(data).d);
                    if (data.Flag != "-1") {
                        $("#HCloseBtn").click();
                        swal({
                            title: "保存成功！",
                            type: "success",
                            text: "2秒后自动关闭。",
                            timer: 2000,
                            showConfirmButton: true
                        }, function () {
                            location.href = location.href;
                        });

                    } else {
                        swal({
                            title: "保存失败！",
                            type: "error",
                            text: "2秒后自动关闭。",
                            timer: 2000,
                            showConfirmButton: true
                        });
                    }
                },
                error: function (xml, status) {

                }
            });
        })

        $("#btnDel").on(‘click‘, function () {
            var url = appConfig.sysInfo.sysServiceUrl + ‘NoticeManagemnetService.asmx/DelNoticeByID‘;
            var para = { ID: id };
            $.ajax({
                data: JSON.stringify(para),
                url: url,
                type: "POST",
                global: true,
                cache: true,
                async: false,
                dataType: ‘text‘,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
                },
                cache: false,
                success: function (data) {
                    $("#HCloseBtn").click();
                    data = $.parseJSON($.parseJSON(data).d);
                    if (data.Flag != "-1") {
                        swal({
                            title: "删除成功！",
                            type: "error",
                            text: "2秒后自动关闭。",
                            timer: 2000,
                            showConfirmButton: true
                        }, function () {
                            location.href = location.href;
                        });
                    } else {
                        swal({
                            title: "删除失败！",
                            type: "error",
                            text: "2秒后自动关闭。",
                            timer: 2000,
                            showConfirmButton: true
                        }, function () {
                            location.href = location.href;
                        });
                    }
                },
                error: function (xml, status) {

                }
            });
        })

        //判断参数
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        //绑定是否全天下拉
        function bindAllDay() {
            var d = [];
            d.push({ id: 1, text: "是" },{ id: 0, text: "否" });
            $(‘#isAllDay‘).empty();
            $(‘#isAllDay‘).select2({
                data: d,
                allowClear: true,
                minimumResultsForSearch: Infinity
            });
        }
        
    </script>
</body>

</html>

效果如下

技术分享图片

 

 技术分享图片

 

 

 

 

 

 

fullcalendar+hDialog资源下载地址：https://download.csdn.net/download/duangufei/12092735

 

基于fullcalendar的日常安排实例

原文：https://www.cnblogs.com/dushaojun/p/12172342.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！