vue+html5+css制作日历代码，工作日配置

以下是一个使用Vue.js创建简单日历的示例代码，其中包括工作日的配置：



<!DOCTYPE html>
<html>
<head>
  <title>Vue Simple Calendar</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <style>
    .calendar { border: 1px solid #ddd; border-collapse: collapse; width: 100%; margin-bottom: 20px; }
    .calendar th, .calendar td { border: 1px solid #ddd; padding: 5px; text-align: center; }
    .calendar thead { background-color: #f2f2f2; }
    .calendar tbody tr:nth-child(odd) { background-color: #f9f9f9; }
    .calendar tbody tr:nth-child(even) { background-color: #fdfdfd; }
    .weekdays { color: #666; }
  </style>
</head>
<body>
  <div id="app">
    <table class="calendar">
      <thead>
        <tr>
          <th>Sun</th>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
          <th>Sat</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="week in calendar">
          <td v-for="day in week">
            {{ day.date }}
            <span v-if="day.workday" class="workday">Workday</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
 
  <script>
    new Vue({
      el: '#app',
      data: {
        calendar: [],
        workdays: [1, 3, 5] // 工作日配置，1=星期一，3=星期三，以此类推
      },
      created() {
        this.buildCalendar();
      },
      methods: {
        buildCalendar() {
          let currentDate = new Date();
          let firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
          let dayOfWeek = firstDayOfMonth.getDay();
          let daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
          let calendar = [];
 
          // 填充上月的日期
          for (let i = 0; i < dayOfWeek; i++) {
            calendar[0] = calendar[0] || [];
            calendar[0].push({
              date: '',
              workday: false
            });
          }
 
          // 填充本月的日期
          for (let i = 1; i <= daysInMonth; i++) {
            let day = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
            let workday = this.workdays.includes(day.getDay());
 
            calendar[Math.ceil((i + dayOfWeek - 1) / 7)] = calendar[Math.ceil((i + dayOfWeek - 1) / 7)] || [];
            calendar[Math.ceil((i + dayOfWeek - 1) / 7)].push({
              date: i,
vue+html5+css制作日历代码，工作日配置

评论已关闭

推荐阅读
