JS实现日程安排 日程安排插件

最新推荐文章于 2024-09-28 16:41:39 发布
最新推荐文章于 2024-09-28 16:41:39 发布
阅读量1.3k 收藏 4
点赞数 1
文章标签： javascript 前端 数据库 ViewUI
原文链接：http://www.cnblogs.com/s0611163/p/5139838.html
版权

    代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EmpWeekPlan.aspx.cs" Inherits="Aepri.InfoDev.DPP.Web.PlanManage.EmpWeekPlan" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>员工周计划</title>
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
            font-size: 12px;
            color: #555;
            background-color: #fff;
        }

        .table-title
        {
            border-collapse: collapse;
            width: 100%;
            border: solid 1px #ddd;
            font-size: 12px;
            font-weight: bold;
            color: #555;
        }

            .table-title td
            {
                text-align: center;
                padding: 5px;
                height: 25px;
            }

        .table-days
        {
            border-collapse: collapse;
            width: 100%;
        }

            .table-days td
            {
                border: solid 1px #ddd;
                height: 150px;
                vertical-align: top;
                width: 14px;
            }

        .td-gray
        {
            color: #ccc;
            background-color: #f7f7f7;
        }

        .div-task-item
        {
            background-color: #bfecff;
            margin-top: 2px;
            padding: 2px;
            height: 14px;
            cursor: default;
            /* margin-left: 5px;
            margin-right: 5px;*/
        }

            .div-task-item:hover
            {
                background-color: #ff5588 !important;
            }

        .div-no-task-item
        {
            margin-top: 2px;
            padding: 2px;
            height: 14px;
        }

        .td-selected
        {
            background-color: #e0f2f8 !important;
        }

        .div-day-title
        {
            text-align: right;
            padding: 3px;
        }

        .td-today
        {
            background-color: #fcd7d7;
        }

            .td-today div:first-child
            {
                border-top: solid 2px #f72f37;
                padding-top: 1px;
            }

        .highlight-task
        {
            background-color: #ff3366 !important;
            color: #fff !important;
        }
    </style>
    <script src="<%=ResolveClientUrl("~/js/jquery-1.7.2.min.js") %>" type="text/javascript"></script>
    <script type="text/javascript">
        var data = {
            empCode: '101',
            list: [
                  //说明：id暂时无用
                  { id: '01', taskCode: '001', title: '任务一', content: '测试内容', year: 2016, month: 1, day: 3 },
                  { id: '02', taskCode: '001', title: '任务一', content: '测试内容', year: 2016, month: 1, day: 4 },
                  //{ id: '02', taskCode: '001', title: '任务一', content: '测试内容', year: 2016, month: 1, day: 5 },
                  { id: '03', taskCode: '002', title: '任务二', content: '测试内容', year: 2016, month: 1, day: 4 },
                  //{ id: '04', taskCode: '002', title: '任务二', content: '测试内容', year: 2016, month: 1, day: 5 },
                  { id: '05', taskCode: '003', title: '任务三', content: '测试内容', year: 2016, month: 1, day: 5 },
                  { id: '06', taskCode: '003', title: '任务三', content: '测试内容', year: 2016, month: 1, day: 6 },
                  { id: '07', taskCode: '004', title: '任务四', content: '测试内容', year: 2016, month: 1, day: 6 },
                  { id: '08', taskCode: '005', title: '任务五', content: '测试内容', year: 2016, month: 1, day: 6 },
                  { id: '09', taskCode: '005', title: '任务五', content: '测试内容', year: 2016, month: 1, day: 7 },
                  { id: '10', taskCode: '006', title: '任务六', content: '测试内容', year: 2016, month: 1, day: 7 },
                  //{ id: '11', taskCode: '006', title: '任务六', content: '测试内容', year: 2016, month: 1, day: 8 },
                  //{ id: '12', taskCode: '006', title: '任务六', content: '测试内容', year: 2016, month: 1, day: 9 },
                  { id: '13', taskCode: '007', title: '任务七', content: '测试内容', year: 2016, month: 1, day: 6 },
                  { id: '13', taskCode: '007', title: '任务七', content: '测试内容', year: 2016, month: 1, day: 7 },
                  { id: '14', taskCode: '007', title: '任务七', content: '测试内容', year: 2016, month: 1, day: 8 },
                  //{ id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 6 },
                  //{ id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 7 },
                  { id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 8 },
                  { id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 9 },
                  { id: '15', taskCode: '009', title: '任务九', content: '测试内容', year: 2016, month: 1, day: 4 },
                  { id: '15', taskCode: '009', title: '任务九', content: '测试内容', year: 2016, month: 1, day: 5 },
                  { id: '15', taskCode: '010', title: '任务十', content: '测试内容', year: 2016, month: 1, day: 10 },
                  { id: '15', taskCode: '010', title: '任务十', content: '测试内容', year: 2016, month: 1, day: 9 },
                  { id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2015, month: 12, day: 31 },
                  { id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2016, month: 1, day: 1 },
                  { id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2016, month: 1, day: 2 },
                  { id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2016, month: 1, day: 3 }
            ]
        };

        var taskCodeList = new Array();
        function createTaskCodeList(data, taskCodeList) {
            for (var i = 0; i < data.list.length; i++) {
                var bl = true;
                for (var j = 0; j < taskCodeList.length; j++) {
                    if (taskCodeList[j] == data.list[i].taskCode) {
                        bl = false;
                    }
                }
                if (bl) {
                    taskCodeList.push(data.list[i].taskCode);
                }
            }
        }
        createTaskCodeList(data, taskCodeList);

        $(function () {
            $(".table-days").parent().height($(window).height() - $(".table-days").parent().position().top - 10);

            $("#year").change(function () {
                var year = $("#year").val();
                var month = $("#month").val();
                createPlanTable(year, month);
            });
            $("#month").change(function () {
                var year = $("#year").val();
                var month = $("#month").val();
                createPlanTable(year, month);
            });
            gotoToday();

            //ie6、7
            if ($.browser.msie) {
                if (parseInt($.browser.version) == 7 || parseInt($.browser.version) == 6) {
                    $("#table-days").width($("#table-days").width() - 20);
                    $("#table-days").parent().height($("#table-days").parent().height() - 15);
                }
            }
        }); //end $

        //创建计划表格
        function createPlanTable(year, month) {
            var html = '';
            var table = $("#table-days");
            var days = getDaysOfMonth(year, month);
            var preDays = getDaysOfPreMonth(year, month);
            var week = getWeek(year, month, 1);
            var day = preDays - week + 1;
            var grayDay = 'td-gray'; //置灰
            var current = false;
            var today = new Date();

            for (var i = 0; i < (days + week - 1) / 7 ; i++) {
                html += '<tr>';
                for (var j = 0; j < 7; j++) {
                    day++;
                    if (current == false && day > preDays) {
                        day = 1;
                        grayDay = '';
                        current = true;
                    }
                    if (current == true && day > days) {
                        day = 1;
                        grayDay = 'td-gray';
                        current = false;
                    }

                    var todayClass = '';
                    if (current && today.getFullYear() == year && today.getMonth() == month - 1 && today.getDate() == day) {
                        todayClass = 'td-today';
                    }
                    html += '<td day="' + day + '" class=" ' + grayDay + ' ' + todayClass + '"><div class="div-day-title">' + day + '</div>';

                    var virtualTaskCount = 0;
                    for (var k = 0; k < data.list.length; k++) {
                        var model = data.list[k];
                        if (grayDay == '' && year == model.year && month == model.month && day == model.day) {
                            var taskIndex = getTaskIndex(taskCodeList, model.taskCode);
                            for (var m = virtualTaskCount; m < taskIndex; m++) {
                                html += '<div class="div-no-task-item"></div>';
                                virtualTaskCount++;
                            }
                            html += '<div class="div-task-item" taskCode="' + model.taskCode + '" style="background-color:#' + getColor(taskCodeList, model.taskCode) + ';">' + model.title + '</div>';
                            virtualTaskCount++;
                        }
                    }

                    html += '</td>';
                }
                html += '</tr>';
            }
            table.html(html);

            //优化显示
            if (true) {
                for (var i = 0; i < taskCodeList.length; i++) {
                    table.find("tr").each(function () {
                        var tr = $(this);

                        var taskItem = tr.find("div[taskCode='" + taskCodeList[i] + "']");
                        if (taskItem.length > 0) {
                            var k = -1;
                            while (k != -2) {
                                k++;
                                var bl = true;
                                taskItem.each(function () {
                                    var prev = $(this).parent().find("div:eq(" + (k + 1) + ")");
                                    if (!prev || prev.length == 0) k = -2;
                                    if (prev && prev.attr("taskCode") == taskCodeList[i]) k = -2;
                                    if (!$(this).parent().attr("class") || !prev || prev.length == 0 || prev.attr("class").indexOf("div-no-task-item") == -1) {
                                        bl = false;
                                    }
                                });
                                if (bl) {
                                    taskItem.each(function () {
                                        var item = $(this);
                                        var prev = item.parent().find("div:eq(" + (k + 1) + ")");
                                        if (prev.length > 0) {
                                            item.after('<div class="div-no-task-item"></div>');
                                            item.wrap("<div></div>");
                                            prev.after(item.parent().html());
                                            prev.remove();
                                            item.parent().remove();
                                        }
                                    });
                                }

                            }
                        }
                    });
                } //end for taskCodeList
                //去空
                table.find("td").each(function () {
                    var td = $(this);
                    while (true) {
                        var div = td.find("div:last");
                        if (div.attr("class").indexOf("div-no-task-item") != -1) {
                            div.remove();
                        }
                        else {
                            break;
                        }
                    }
                });
            } //end 优化显示

            //日期td单击双击
            table.find("td").each(function () {
                var td = $(this);
                var grayDay = td.attr('class').indexOf('td-gray') == -1;
                td.click(function () {
                    if (grayDay) {
                        if (td.attr("class").indexOf("td-selected") != -1) {
                            td.removeClass("td-selected");
                        } else {
                            $(".td-selected").removeClass("td-selected");
                            td.addClass("td-selected");
                        }
                    }
                });
                td.dblclick(function () {
                    if (grayDay) {
                        add(td.attr("day"));
                    }
                });
            });

            //任务单击双击
            $(".div-task-item").each(function () {
                var taskItemDiv = $(this);
                var taskCode = taskItemDiv.attr("taskCode");
                taskItemDiv.click(function (evt) {
                    $(".div-task-item").removeClass("highlight-task");
                    table.find("div[taskCode='" + taskCode + "']").addClass("highlight-task");
                    evt.stopPropagation();
                });
                taskItemDiv.dblclick(function (evt) {
                    evt.stopPropagation();
                });
            });
        }

        //创建新计划
        function add(day) {
            data.list.push({ id: '15', taskCode: '000', title: '测试新增', content: '测试内容', year: 2016, month: 1, day: parseInt(day) });
            createTaskCodeList(data, taskCodeList)
            var scrollTop = $("#div-days").scrollTop();
            $("#month").change();
            $("#div-days").scrollTop(scrollTop);
        }

        //今天
        function gotoToday() {
            var today = new Date();
            $("#year").val(today.getFullYear());
            $("#month").val(today.getMonth() + 1);
            $("#month").change();
            var top = $(".td-today").position().top - $(".table-days").position().top;
            var div = $("#div-days").scrollTop(top);
            var div = $(".td-selected").removeClass("td-selected");
        }

        //上月
        function preMonth() {
            var year = $("#year").val();
            var month = $("#month").val();
            if (month == 1) {
                $("#year").val(parseInt(year) - 1);
                $("#month").val(12);
            } else {
                $("#month").val(parseInt(month) - 1);
            }
            $("#month").change();
            $("#div-days").scrollTop($(window).height());
        }

        //下月
        function nextMonth() {
            var year = $("#year").val();
            var month = $("#month").val();
            if (month == 12) {
                $("#year").val(parseInt(year) + 1);
                $("#month").val(1);
            } else {
                $("#month").val(parseInt(month) + 1);
            }
            $("#month").change();
            $("#div-days").scrollTop(0);
        }

        //获取task索引
        function getTaskIndex(taskCodeList, taskCode) {
            var pos = 0;
            for (var i = 0; i < taskCodeList.length; i++) {
                if (taskCodeList[i] == taskCode) {
                    break;
                }
                pos++;
            }
            return pos;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="padding: 5px;">
            <div style="padding: 10px;">
                <input type="button" value="今天" onclick="gotoToday()" />
                <input type="button" value="<" onclick="preMonth()" />
                <select id="year" name="year">
                    <option value="2017">2017</option>
                    <option value="2016">2016</option>
                    <option value="2015">2015</option>
                    <option value="2014">2014</option>
                </select>
                年
                 <select id="month" name="month">
                     <option value="1">1</option>
                     <option value="2">2</option>
                     <option value="3">3</option>
                     <option value="4">4</option>
                     <option value="5">5</option>
                     <option value="6">6</option>
                     <option value="7">7</option>
                     <option value="8">8</option>
                     <option value="9">9</option>
                     <option value="10">10</option>
                     <option value="11">11</option>
                     <option value="12">12</option>
                 </select>
                月
                <input type="button" value=">" onclick="nextMonth()" />
            </div>
            <div style="margin-top: 5px;">
                <table class="table-title" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>星期一</td>
                        <td>星期二</td>
                        <td>星期三</td>
                        <td>星期四</td>
                        <td>星期五</td>
                        <td>星期六</td>
                        <td>星期日</td>
                    </tr>
                </table>
            </div>
            <div id="div-days" style="height: 350px; overflow: auto; margin-top: -1px; border-bottom: solid 1px #ddd;">
                <table id="table-days" class="table-days" cellpadding="0" cellspacing="0">
                </table>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        //获取当月天数
        function getDaysOfMonth(year, month) {
            var d = new Date(year, month, 0);
            return d.getDate();
        }

        //获取前一个月天数
        function getDaysOfPreMonth(year, month) {
            if (month == 1) {
                month = 12;
                year = year - 1;
            }
            else {
                month = month - 1;
            }
            var d = new Date(year, month, 0);
            return d.getDate();
        }

        //获取当天星期数(0到6)
        function getWeek(year, month, day) {
            var d = new Date(year, month - 1, day);
            return d.getDay();
        }

        //颜色集合
        var myColor = [
            'ccddff',
            'ccffdd',
            'eeccff',
            'eeffcc',
            'ffccee',
            'ffeecc'
        ];

        //获取颜色
        function getColor(taskCodeList, taskCode) {
            var pos = 0;
            for (var i = 0; i < taskCodeList.length; i++) {
                if (taskCodeList[i] == taskCode) {
                    break;
                }
                pos++;
                if (pos > myColor.length - 1) {
                    pos = 0;
                }
            }
            return myColor[pos];
        }
    </script>
</body>
</html>
View Code

   可以运行的html代码(放一个jquery.js在同一目录即可)：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>员工周计划</title>
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
            font-size: 12px;
            color: #555;
            background-color: #fff;
        }

        .table-title
        {
            border-collapse: collapse;
            width: 100%;
            border: solid 1px #ddd;
            font-size: 12px;
            font-weight: bold;
            color: #555;
        }

            .table-title td
            {
                text-align: center;
                padding: 5px;
                height: 25px;
            }

        .table-days
        {
            border-collapse: collapse;
            width: 100%;
        }

            .table-days td
            {
                border: solid 1px #ddd;
                height: 150px;
                vertical-align: top;
                width: 14px;
            }

        .td-gray
        {
            color: #ccc;
            background-color: #f7f7f7;
        }

        .div-task-item
        {
            background-color: #bfecff;
            margin-top: 2px;
            padding: 2px;
            height: 14px;
            cursor: default;
            /* margin-left: 5px;
            margin-right: 5px;*/
        }

            .div-task-item:hover
            {
                background-color: #ff5588 !important;
            }

        .div-no-task-item
        {
            margin-top: 2px;
            padding: 2px;
            height: 14px;
        }

        .td-selected
        {
            background-color: #e0f2f8 !important;
        }

        .div-day-title
        {
            text-align: right;
            padding: 3px;
        }

        .td-today
        {
            background-color: #fcd7d7;
        }

            .td-today div:first-child
            {
                border-top: solid 2px #f72f37;
                padding-top: 1px;
            }

        .highlight-task
        {
            background-color: #ff3366 !important;
            color: #fff !important;
        }
    </style>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        var data = {
            empCode: '101',
            list: [
                  //说明：id暂时无用
                  { id: '01', taskCode: '001', title: '任务一', content: '测试内容', year: 2016, month: 1, day: 3 },
                  { id: '02', taskCode: '001', title: '任务一', content: '测试内容', year: 2016, month: 1, day: 4 },
                  //{ id: '02', taskCode: '001', title: '任务一', content: '测试内容', year: 2016, month: 1, day: 5 },
                  { id: '03', taskCode: '002', title: '任务二', content: '测试内容', year: 2016, month: 1, day: 4 },
                  //{ id: '04', taskCode: '002', title: '任务二', content: '测试内容', year: 2016, month: 1, day: 5 },
                  { id: '05', taskCode: '003', title: '任务三', content: '测试内容', year: 2016, month: 1, day: 5 },
                  { id: '06', taskCode: '003', title: '任务三', content: '测试内容', year: 2016, month: 1, day: 6 },
                  { id: '07', taskCode: '004', title: '任务四', content: '测试内容', year: 2016, month: 1, day: 6 },
                  { id: '08', taskCode: '005', title: '任务五', content: '测试内容', year: 2016, month: 1, day: 6 },
                  { id: '09', taskCode: '005', title: '任务五', content: '测试内容', year: 2016, month: 1, day: 7 },
                  { id: '10', taskCode: '006', title: '任务六', content: '测试内容', year: 2016, month: 1, day: 7 },
                  //{ id: '11', taskCode: '006', title: '任务六', content: '测试内容', year: 2016, month: 1, day: 8 },
                  //{ id: '12', taskCode: '006', title: '任务六', content: '测试内容', year: 2016, month: 1, day: 9 },
                  { id: '13', taskCode: '007', title: '任务七', content: '测试内容', year: 2016, month: 1, day: 6 },
                  { id: '13', taskCode: '007', title: '任务七', content: '测试内容', year: 2016, month: 1, day: 7 },
                  { id: '14', taskCode: '007', title: '任务七', content: '测试内容', year: 2016, month: 1, day: 8 },
                  //{ id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 6 },
                  //{ id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 7 },
                  { id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 8 },
                  { id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 9 },
                  { id: '15', taskCode: '009', title: '任务九', content: '测试内容', year: 2016, month: 1, day: 4 },
                  { id: '15', taskCode: '009', title: '任务九', content: '测试内容', year: 2016, month: 1, day: 5 },
                  { id: '15', taskCode: '010', title: '任务十', content: '测试内容', year: 2016, month: 1, day: 10 },
                  { id: '15', taskCode: '010', title: '任务十', content: '测试内容', year: 2016, month: 1, day: 9 },
                  { id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2015, month: 12, day: 31 },
                  { id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2016, month: 1, day: 1 },
                  { id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2016, month: 1, day: 2 },
                  { id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2016, month: 1, day: 3 }
            ]
        };

        var taskCodeList = new Array();
        function createTaskCodeList(data, taskCodeList) {
            for (var i = 0; i < data.list.length; i++) {
                var bl = true;
                for (var j = 0; j < taskCodeList.length; j++) {
                    if (taskCodeList[j] == data.list[i].taskCode) {
                        bl = false;
                    }
                }
                if (bl) {
                    taskCodeList.push(data.list[i].taskCode);
                }
            }
        }
        createTaskCodeList(data, taskCodeList);

        $(function () {
            $(".table-days").parent().height($(window).height() - $(".table-days").parent().position().top - 10);

            $("#year").change(function () {
                var year = $("#year").val();
                var month = $("#month").val();
                createPlanTable(year, month);
            });
            $("#month").change(function () {
                var year = $("#year").val();
                var month = $("#month").val();
                createPlanTable(year, month);
            });
            gotoToday();

            //ie6、7
            if ($.browser.msie) {
                if (parseInt($.browser.version) == 7 || parseInt($.browser.version) == 6) {
                    $("#table-days").width($("#table-days").width() - 20);
                    $("#table-days").parent().height($("#table-days").parent().height() - 15);
                }
            }
        }); //end $

        //创建计划表格
        function createPlanTable(year, month) {
            var html = '';
            var table = $("#table-days");
            var days = getDaysOfMonth(year, month);
            var preDays = getDaysOfPreMonth(year, month);
            var week = getWeek(year, month, 1);
            var day = preDays - week + 1;
            var grayDay = 'td-gray'; //置灰
            var current = false;
            var today = new Date();

            for (var i = 0; i < (days + week - 1) / 7 ; i++) {
                html += '<tr>';
                for (var j = 0; j < 7; j++) {
                    day++;
                    if (current == false && day > preDays) {
                        day = 1;
                        grayDay = '';
                        current = true;
                    }
                    if (current == true && day > days) {
                        day = 1;
                        grayDay = 'td-gray';
                        current = false;
                    }

                    var todayClass = '';
                    if (current && today.getFullYear() == year && today.getMonth() == month - 1 && today.getDate() == day) {
                        todayClass = 'td-today';
                    }
                    html += '<td day="' + day + '" class=" ' + grayDay + ' ' + todayClass + '"><div class="div-day-title">' + day + '</div>';

                    var virtualTaskCount = 0;
                    for (var k = 0; k < data.list.length; k++) {
                        var model = data.list[k];
                        if (grayDay == '' && year == model.year && month == model.month && day == model.day) {
                            var taskIndex = getTaskIndex(taskCodeList, model.taskCode);
                            for (var m = virtualTaskCount; m < taskIndex; m++) {
                                html += '<div class="div-no-task-item"></div>';
                                virtualTaskCount++;
                            }
                            html += '<div class="div-task-item" taskCode="' + model.taskCode + '" style="background-color:#' + getColor(taskCodeList, model.taskCode) + ';">' + model.title + '</div>';
                            virtualTaskCount++;
                        }
                    }

                    html += '</td>';
                }
                html += '</tr>';
            }
            table.html(html);

            //优化显示
            if (true) {
                for (var i = 0; i < taskCodeList.length; i++) {
                    table.find("tr").each(function () {
                        var tr = $(this);

                        var taskItem = tr.find("div[taskCode='" + taskCodeList[i] + "']");
                        if (taskItem.length > 0) {
                            var k = -1;
                            while (k != -2) {
                                k++;
                                var bl = true;
                                taskItem.each(function () {
                                    var prev = $(this).parent().find("div:eq(" + (k + 1) + ")");
                                    if (!prev || prev.length == 0) k = -2;
                                    if (prev && prev.attr("taskCode") == taskCodeList[i]) k = -2;
                                    if (!$(this).parent().attr("class") || !prev || prev.length == 0 || prev.attr("class").indexOf("div-no-task-item") == -1) {
                                        bl = false;
                                    }
                                });
                                if (bl) {
                                    taskItem.each(function () {
                                        var item = $(this);
                                        var prev = item.parent().find("div:eq(" + (k + 1) + ")");
                                        if (prev.length > 0) {
                                            item.after('<div class="div-no-task-item"></div>');
                                            item.wrap("<div></div>");
                                            prev.after(item.parent().html());
                                            prev.remove();
                                            item.parent().remove();
                                        }
                                    });
                                }

                            }
                        }
                    });
                } //end for taskCodeList
                //去空
                table.find("td").each(function () {
                    var td = $(this);
                    while (true) {
                        var div = td.find("div:last");
                        if (div.attr("class").indexOf("div-no-task-item") != -1) {
                            div.remove();
                        }
                        else {
                            break;
                        }
                    }
                });
            } //end 优化显示

            //日期td单击双击
            table.find("td").each(function () {
                var td = $(this);
                var grayDay = td.attr('class').indexOf('td-gray') == -1;
                td.click(function () {
                    if (grayDay) {
                        if (td.attr("class").indexOf("td-selected") != -1) {
                            td.removeClass("td-selected");
                        } else {
                            $(".td-selected").removeClass("td-selected");
                            td.addClass("td-selected");
                        }
                    }
                });
                td.dblclick(function () {
                    if (grayDay) {
                        add(td.attr("day"));
                    }
                });
            });

            //任务单击双击
            $(".div-task-item").each(function () {
                var taskItemDiv = $(this);
                var taskCode = taskItemDiv.attr("taskCode");
                taskItemDiv.click(function (evt) {
                    $(".div-task-item").removeClass("highlight-task");
                    table.find("div[taskCode='" + taskCode + "']").addClass("highlight-task");
                    evt.stopPropagation();
                });
                taskItemDiv.dblclick(function (evt) {
                    evt.stopPropagation();
                });
            });
        }

        //创建新计划
        function add(day) {
            data.list.push({ id: '15', taskCode: '000', title: '测试新增', content: '测试内容', year: 2016, month: 1, day: parseInt(day) });
            createTaskCodeList(data, taskCodeList)
            var scrollTop = $("#div-days").scrollTop();
            $("#month").change();
            $("#div-days").scrollTop(scrollTop);
        }

        //今天
        function gotoToday() {
            var today = new Date();
            $("#year").val(today.getFullYear());
            $("#month").val(today.getMonth() + 1);
            $("#month").change();
            var top = $(".td-today").position().top - $(".table-days").position().top;
            var div = $("#div-days").scrollTop(top);
            var div = $(".td-selected").removeClass("td-selected");
        }

        //上月
        function preMonth() {
            var year = $("#year").val();
            var month = $("#month").val();
            if (month == 1) {
                $("#year").val(parseInt(year) - 1);
                $("#month").val(12);
            } else {
                $("#month").val(parseInt(month) - 1);
            }
            $("#month").change();
            $("#div-days").scrollTop($(window).height());
        }

        //下月
        function nextMonth() {
            var year = $("#year").val();
            var month = $("#month").val();
            if (month == 12) {
                $("#year").val(parseInt(year) + 1);
                $("#month").val(1);
            } else {
                $("#month").val(parseInt(month) + 1);
            }
            $("#month").change();
            $("#div-days").scrollTop(0);
        }

        //获取task索引
        function getTaskIndex(taskCodeList, taskCode) {
            var pos = 0;
            for (var i = 0; i < taskCodeList.length; i++) {
                if (taskCodeList[i] == taskCode) {
                    break;
                }
                pos++;
            }
            return pos;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="padding: 5px;">
            <div style="padding: 10px;">
                <input type="button" value="今天" onclick="gotoToday()" />
                <input type="button" value="<" onclick="preMonth()" />
                <select id="year" name="year">
                    <option value="2017">2017</option>
                    <option value="2016">2016</option>
                    <option value="2015">2015</option>
                    <option value="2014">2014</option>
                </select>
                年
                 <select id="month" name="month">
                     <option value="1">1</option>
                     <option value="2">2</option>
                     <option value="3">3</option>
                     <option value="4">4</option>
                     <option value="5">5</option>
                     <option value="6">6</option>
                     <option value="7">7</option>
                     <option value="8">8</option>
                     <option value="9">9</option>
                     <option value="10">10</option>
                     <option value="11">11</option>
                     <option value="12">12</option>
                 </select>
                月
                <input type="button" value=">" onclick="nextMonth()" />
            </div>
            <div style="margin-top: 5px;">
                <table class="table-title" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>星期一</td>
                        <td>星期二</td>
                        <td>星期三</td>
                        <td>星期四</td>
                        <td>星期五</td>
                        <td>星期六</td>
                        <td>星期日</td>
                    </tr>
                </table>
            </div>
            <div id="div-days" style="height: 350px; overflow: auto; margin-top: -1px; border-bottom: solid 1px #ddd;">
                <table id="table-days" class="table-days" cellpadding="0" cellspacing="0">
                </table>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        //获取当月天数
        function getDaysOfMonth(year, month) {
            var d = new Date(year, month, 0);
            return d.getDate();
        }

        //获取前一个月天数
        function getDaysOfPreMonth(year, month) {
            if (month == 1) {
                month = 12;
                year = year - 1;
            }
            else {
                month = month - 1;
            }
            var d = new Date(year, month, 0);
            return d.getDate();
        }

        //获取当天星期数(0到6)
        function getWeek(year, month, day) {
            var d = new Date(year, month - 1, day);
            return d.getDay();
        }

        //颜色集合
        var myColor = [
            'ccddff',
            'ccffdd',
            'eeccff',
            'eeffcc',
            'ffccee',
            'ffeecc'
        ];

        //获取颜色
        function getColor(taskCodeList, taskCode) {
            var pos = 0;
            for (var i = 0; i < taskCodeList.length; i++) {
                if (taskCodeList[i] == taskCode) {
                    break;
                }
                pos++;
                if (pos > myColor.length - 1) {
                    pos = 0;
                }
            }
            return myColor[pos];
        }
    </script>
</body>
</html>
View Code

   效果图：

   

转载于:https://www.cnblogs.com/s0611163/p/5139838.html

weixin_34183910
关注
js 排班插件_JS实现日程安排 日程安排插件
weixin_30986079的博客
02-06 1782
代码：员工周计划body{margin: 0;padding: 0;font-size: 12px;color: #555;background-color: #fff;}.table-title{border-collapse: collapse;width: 100%;border: solid 1px #ddd;font-size: 12px;font-weight: bold;color:...
jQuery日程安排插件制作日程表管理代码
10-27
本教程将聚焦于如何利用jQuery来开发一个日程安排插件，以便实现高效的日程表管理。 首先，我们需要理解jQuery的基本用法。jQuery的核心特性包括选择器（用于选取DOM元素）、遍历（操作选取的元素集合）和方法（对...
js日历控件实现及日程安排
08-07
js写的日历显示的控件，显示本月日历，及上一月下一月日历查看，可以扩展实现当月日程安排、
JS实现日程安排实例
11-22
JS实现日程安排完整例子，简洁大气的日程安排Jquery特效。JS实现日程安排完整例子，简洁大气的日程安排Jquery特效。
vue框架学习 -- 日历控件 FullCalendar 使用总结
最新发布
dazhong2012的专栏
09-28 1118
最近在项目中要实现日期排班的功能，正好要用到日历视图的控件，经过对比发现，vue 中 使用可以实现相关需求，下面对使用过程做一个总结。
一个纯js开发的日历、日程控件
11-28
一个纯js开发的日历、日程控件，使用简单，可扩展性强，有一点功底的话还能自己完善满足自己的需求！
js/web 日程管理 插件
热门推荐
pan-zy的专栏
04-21 1万+
fullcalendar是一款jQuery日程管理控件，提供了丰富的属性设置和方法调用，官网下载地址http://fullcalendar.io/download，目前最新版本是2.3.2。 只要调用$('#calendar').fullcalendar(options)即可初始化，初始化配置中events、eventSources、select和eventClick是必须设置项。 event
Fullcalendar--日程管理 js组件
08-13
通过Fullcalendar，你可以做出一个完全类似google日历的程序。 它使用起来不难，因为它是基于jQuery UI的，继承了简单用法的特征。
超酷的日程安排Jquery插件
01-21
在使用这款日程安排插件时，虽然前端界面可以实现日程的添加、编辑和删除等功能，但要实现数据的持久化存储，即保存用户的日程信息，通常需要与后端服务器进行交互。这意味着你需要配合使用一种后台程序，如PHP、...
日程安排：jQuery的日历插件 FullCalendar Java MySQL.doc
06-11
1. **FullCalendar 插件**：FullCalendar 是一个基于 jQuery 的日历插件，设计用于展示和管理日程安排。它提供了一个交互式的界面，用户可以轻松查看待办事项、标记重要事件，并支持点击和拖动操作。FullCalendar 的...
基于layui实现的日程安排示例页面
06-14
本项目名为“基于layui实现的日程安排示例页面”，主要展示了如何运用layui来创建一个包含新增、修改、完结日程功能的日历应用。 首先，layui的基础结构分为layui.all.js（全模块）和layui.css，它们提供了页面的...
JS日程管理插件FullCalendar简单实例
12-11
在线演示              源码下载 HTML 首先第一步就是在需要调用FullCalendar日程插件的页面中载入必要的javascript和css文件，包括jQuery库文件，FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日程的功能，那么还需要加入jQuery ui插件。 <link rel="stylesheet" type="text/css" href="css/fullcalendar.css" rel="external nofollow" > [removed][removed]
js,jquery各类日程表，时间控件
09-02
js和jquery各类日程表和时间控件，共11个
javaScript日程表
07-05
javaScript写的日程管理页面，javaScript写的日程管理页面，javaScript写的日程管理页面
JS日程管理插件FullCalendar中文说明文档
12-10
JS日程管理插件FullCalendar提供了丰富的属性设置和方法调用，开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发，本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档，以供参阅 普通显示设置 属性 描述 默认值 header 设置日历头部信息。 如果设置为false，则不显示头部信息。包括left，center,right左中右三个位置，每个位置都可以对应以下不同的配置： title: 显示当前月份/周/日信息 prev: 用于切换到上一月/周/日视图的按钮 next: 用于切换到
jsdays:在 javascript html 中实现的简单日程安排
07-05
jsdays 在 javascript / html 中实现的简单日程安排。
fullcalendar 课程表 js 插件 日程安排操作 js
学习笔记
02-18 3282
fullcalendar 课程表 js 插件 日程安排操作 js 方便的管理日历事件，操作，可以显示星期的事件，也可以显示日历样式的事件 相关链接 github: https://github.com/fullcalendar/fullcalendar 官网demo：https://fullcalendar.io/demos 事件对象的属性： https://fullcalendar.io/docs/event-parsing 使用 官网下载对应的文件，只需要解压文件中的 lib 文件夹中的内容 引用的时候
js 日程插件库 -- fullCalender
WaterSprite_ct的博客
11-16 4106
jQuery 日程插件库 -- fullCalendar
js日历组件
weixin_45195355的博客
12-29 757
【代码】js日历组件。
jQuery WeekLine 插件：轻松选择工作日进行日程安排
而 'jquery.weekLine.js' 文件是插件的核心，负责实现工作日选择的逻辑功能。 在使用 WeekLine 时，用户将会看到一个按照星期排列的日期选择器，用户可以选择一周中的任意几天，而不必担心跨越到下一个月或上一个月...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值