HTML+js实现日历课程表

雕嘚一

已于 2023-07-05 10:23:05 修改

阅读量2.3k

点赞数

文章标签： javascript html 前端

于 2023-07-05 10:18:18 首次发布

本文链接：https://blog.csdn.net/weixin_53632561/article/details/131548824

版权

这几天工作中有一个需求是做一个课程表，需要通过日历的形式展示出来。

一开始想着在网上寻找有无相关例子借鉴一下，只找到通过vue方式实现的案例。当前项目框架前端是html实现的，自己码了一下发到这里供大家参考。

一、html模块

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <p><span th:text="#{courseinfo.catalog.courseType}">课程类型</span></p>
                            <select name="courseType" th:with="type=${@dict.getType('coursemanage_course_type')}">
                                <option value="">[[#{common.please.select}]]</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </li>
                        <li>
                            <p><span th:text="#{courseinfo.catalog.courseName}">课程名称</span></p>
                            <input type="text" name="courseName" id="courseName"/>
                        </li>

                            <p><span th:text="#{courseinfo.catalog.dates}">课程日期</span></p>
                            <input type="text" class="time-input" id="beginCourseDate" placeholder="开始时间"
                                   name="beginCourseDate"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endCourseDate" placeholder="结束时间"
                                   name="endCourseDate"/>
                        </li>

                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-primary btn-rounded btn-sm" onclick="query()"><i class="fa fa-search"></i>&nbsp;&nbsp;<span
                    th:text="#{common.search}">search</span></a>
            <a class="btn btn-warning btn-rounded btn-sm" onclick="reset()"><i class="fa fa-refresh"></i>&nbsp;&nbsp;<span
                    th:text="#{common.reset}">reset</span></a>
            <a class="btn btn-success" onclick="add()" shiro:hasPermission="courseinfo:routine:add">
                <i class="fa fa-plus"></i> &nbsp;&nbsp;<span th:text="#{common.add}"></span>
            </a>
        </div>
        <br>
        <div id="calendar"></div>
    </div>

</div>

二、js模块

1.课程表的初始化

    function initCalendar() {

        var calendar = document.getElementById('calendar');

        if (calendar.firstChild) {
            calendar.removeChild(calendar.firstChild);
        }

        // 获取用户输入的日期
        var inputDate = document.getElementById('beginCourseDate').value;
        var today = new Date();

        // 如果用户输入了日期，则使用该日期；否则使用当前日期
        if (inputDate) {
            var dateParts = inputDate.split('-');
            var year = parseInt(dateParts[0]);
            var month = parseInt(dateParts[1]) - 1;
        } else {
            var year = today.getFullYear();
            var month = today.getMonth();
        }


        // 获取当前月份的天数
        var daysInMonth = new Date(year, month + 1, 0).getDate();
        // 计算当前月份的第一天是星期几
        var firstDayOfMonth = new Date(year, month, 1).getDay();

        // 创建表格
        var table = document.createElement('table');
        var tbody = document.createElement('tbody');

        // 添加表头
        var headerRow = document.createElement('tr');
        var daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        for (var i = 0; i < 7; i++) {
            var th = document.createElement('th');
            th.textContent = daysOfWeek[i];
            headerRow.appendChild(th);
        }
        tbody.appendChild(headerRow);

        // 添加日期
        var row = document.createElement('tr');
        var day = 1;
        // 添加第一行的空单元格（如果第一天不是星期天）
        for (var i = 0; i < firstDayOfMonth; i++) {
            var td = document.createElement('td');
            row.appendChild(td);
        }
        // 添加日期单元格
        for (var i = firstDayOfMonth; i < 7; i++) {
            var td = document.createElement('td');
            td.textContent = day;
            td.classList.add(getDayOfWeekClass(i));
            row.appendChild(td);
            day++;
        }
        tbody.appendChild(row);
        // 添加剩余日期
        while (day <= daysInMonth) {
            var row = document.createElement('tr');
            for (var i = 0; i < 7 && day <= daysInMonth; i++) {
                var td = document.createElement('td');
                td.textContent = day;
                td.classList.add(getDayOfWeekClass(i));
                row.appendChild(td);
                day++;
            }
            tbody.appendChild(row);
        }
        table.appendChild(tbody);
        document.getElementById('calendar').appendChild(table);

    }

// 获取星期几的类名
    function getDayOfWeekClass(dayOfWeek) {
        switch (dayOfWeek) {
            case 0:
                return 'sunday';
            case 1:
                return 'monday';
            case 2:
                return 'tuesday';
            case 3:
                return 'wednesday';
            case 4:
                return 'thursday';
            case 5:
                return 'friday';
            case 6:
                return 'saturday';
        }
    }

2.ajax获取后端课程数据

function renderCourseTable(courseRoutine,callback) {
        $.ajax({
            url: '/courseinfo/list',
            type: 'POST',
            data: courseRoutine,
            dataType: 'json',
            success: function (result) {
                courses = result.data;
                callback(courses); // 在成功获取课程数据后，调用回调函数，并传递 courses 数组作为参数
            },
            error: function () {
                alert('获取课程数据失败！');
            }
        });
    }

3.根据后端返回的课程数据对页面的课程进行填充

    function initCourseTable(courseRoutine) {
        renderCourseTable(courseRoutine,function (courses) { // 在回调函数中获取 courses 数组，并进行遍历并添加课程信息
            var dateCells = document.querySelectorAll('td:not(:empty)');
            for (var i = 0; i < dateCells.length; i++) {

                // 获取用户输入的日期
                var inputDate = document.getElementById('beginCourseDate').value;
                var today = new Date();

                // 如果用户输入了日期，则使用该日期；否则使用当前日期
                if (inputDate) {
                    var dateParts = inputDate.split('-');
                    var year = parseInt(dateParts[0]);
                    var month = parseInt(dateParts[1]) - 1;
                } else {
                    var year = today.getFullYear();
                    var month = today.getMonth();
                }
                var date = new Date(year, month, parseInt(dateCells[i].textContent));
                var course = courses.find(c => {
                    var classDate = new Date(c.classDate);
                    return classDate.getTime() === date.getTime();
                });

                if (course) {
                    //动态生成每个课程下的编辑和删除按钮
                    var editLink = document.createElement('a');
                    editLink.className = 'btn btn-success btn-xs';
                    editLink.textContent = 'Edit';
                    editLink.href = 'javascript:editCourse("'+course.id+'")';

                    var deleteLink = document.createElement('a');
                    deleteLink.className = 'btn btn-danger btn-xs';
                    deleteLink.textContent = 'Delete';
                    deleteLink.href = 'javascript:deleteCourse("'+course.id+'")';

                    // 在单元格中添加课程信息和链接
                    dateCells[i].innerHTML = parseInt(dateCells[i].textContent) + '<br>' + course.courseName + '<br>'
                        + teacher + ' ' + course.instructorName + '<br>' + classTime + ' ' + course.classTime + '<br>';
                    dateCells[i].appendChild(editLink);
                    dateCells[i].appendChild(deleteLink);
                } else {
                    // 如果没有找到课程，则只在单元格中显示日期
                    dateCells[i].innerHTML = parseInt(dateCells[i].textContent);
                }
            }
        });
    }

4.页面加载后调用initCalendar和initCourseTable方法初始化课程表

    $(document).ready(function () {
        initCalendar();
        initCourseTable({});
    });

5.课程表的查询、重置、编辑、删除方法

//查询    
function query() {
        var formData = {
            courseType: $("select[name=courseType]").val(),
            courseName: $("input[name=courseName]").val(),
            beginCourseDate: $("input[name=beginCourseDate]").val(),
            endCourseDate: $("input[name=endCourseDate]").val()
        };
        initCalendar();
        initCourseTable(formData);
    }


//重置
 function reset() {
        $('#courseType').val('');
        $('#courseName').val('');
        $('#beginCourseDate').val('');
        $('#endCourseDate').val('');
        initCalendar();
        initCourseTable({});
    }


//编辑
   function editCourse(id) {
         //跳转页面，做相关处理
    }

//删除
    function deleteCourse(id) {

        $.ajax({
            url: '/courseinfo/routine/edit',
            type: 'POST',
            data: id,
            dataType: 'json',
            success: function (result) {
                //删除后重置页面
                initCourseTable({});
                alert('success!');
            },
            error: function () {
                alert('error!');
            }
        });

    }

css模块

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

    td, th {
        border: 1px solid black;
        padding: 10px;
        text-align: center;
        vertical-align: middle;
    }

    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    .monday {
        background-color: #ffe6e6;
    }

    .tuesday {
        background-color: #e6f9ff;
    }

    .wednesday {
        background-color: #e6ffe6;
    }

    .thursday {
        background-color: #ffffcc;
    }

    .friday {
        background-color: #f9e6ff;
    }

    .saturday {
        background-color: #e6e6e6;
    }

    .sunday {
        background-color: #ffb3b3;
    }