jquery我的日程安排事项代码

jQuery是一种流行的JavaScript库，许多开发人员使用它来简化代码和提高可维护性。下面是一个使用jQuery和CSS创建日程安排的示例代码：

HTML代码：

<div class="calendar">
    <div class="header">
        <div class="month">五月</div>
        <div class="year">2021年</div>
    </div>
    <table class="days">
        <tr>
            <th>周日</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>1</td>
        </tr>
        <!-- 省略其他日期行的代码 -->
    </table>
</div>

CSS代码：

.calendar {
  font-family: Arial, sans-serif;
  font-size: 14px;
  width: 400px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.month {
    font-size: 20px;
    font-weight: bold;
}

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

th {
  text-align: center;
  padding: 7px;
}

td {
  text-align: center;
  border: 1px solid #ccc;
  padding: 7px;
}

td:hover {
    background-color: #eee;
}

JavaScript代码：

$(document).ready(function(){
    var today = new Date();
    var currentMonth = today.getMonth();
    var currentYear = today.getFullYear();
    var months = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];

    function generateCalendar(month, year) {
        $(".days td").empty().removeClass("today");
        $(".month").text(months[month]);
        $(".year").text(year);

        var firstDay = new Date(year, month, 1);
        var startingDay = firstDay.getDay();

        var monthLength = 32 - new Date(year, month, 32).getDate();

        for (i = 1; i <= monthLength; i++) {
            if (i === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
                $(".days td").eq(startingDay + i - 2).addClass("today");
            }
            $(".days td").eq(startingDay + i - 1).text(i);
        }
    }

    generateCalendar(currentMonth, currentYear);

    $(".prev").click(function(){
        currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
        currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
        generateCalendar(currentMonth, currentYear);
    });

    $(".next").click(function(){
        currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
        currentMonth = (currentMonth + 1) % 12;
        generateCalendar(currentMonth, currentYear);
    });
});

这个示例创建一个基本的日历并允许用户向前或向后浏览月份。它还突出显示今天日期的单元格。您可以根据需要调整CSS和JavaScript来适应您的日程安排需求。