Cara menggunakan Layui untuk melaksanakan fungsi kalendar responsif

Cara menggunakan Layui untuk melaksanakan fungsi kalendar responsif

1 Pengenalan
Dalam pembangunan web, fungsi kalendar adalah salah satu keperluan biasa. Layui ialah rangka kerja bahagian hadapan yang sangat baik yang menyediakan banyak komponen UI, termasuk komponen kalendar. Artikel ini akan memperkenalkan cara menggunakan Layui untuk melaksanakan fungsi kalendar responsif dan memberikan contoh kod khusus.

2. Struktur HTML
Untuk melaksanakan fungsi kalendar, kita perlu mencipta struktur HTML yang sesuai. Anda boleh menggunakan elemen div sebagai bekas paling luar, dan kemudian gunakan elemen jadual di dalam untuk memaparkan kalendar. Struktur HTML khusus adalah seperti berikut:

<div class="calendar-container">
  <table class="layui-table" lay-size="sm">
    <colgroup>
      <col width="14.28%">
      <col width="14.28%">
      <col width="14.28%">
      <col width="14.28%">
      <col width="14.28%">
      <col width="14.28%">
      <col width="14.28%">
    </colgroup>
    <thead>
      <tr>
        <th>日</th>
        <th>一</th>
        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
        <th>六</th>
      </tr>
    </thead>
    <tbody id="calendar-body"></tbody>
  </table>
</div>

3. Gaya CSS
Untuk menjadikan kalendar mempunyai kesan paparan yang baik pada peranti yang berbeza, kita perlu membuat beberapa pelarasan gaya padanya. Gaya CSS khusus adalah seperti berikut:

.calendar-container {
  width: 100%;
  overflow: hidden;
  margin: auto;
}

.layui-table {
  margin: 10px auto;
  border-color: #e6e6e6;
  font-size: 13px;
  text-align: center;
}

.layui-table td, 
.layui-table th {
  padding: 0;
  height: 40px;
  line-height: 40px;
  border: none;
}

.layui-table th {
  color: #666;
  font-weight: normal;
}

.layui-table td {
  cursor: pointer;
}

.layui-table td:hover {
  background-color: #f2f2f2;
}

4. Logik JS
Selepas struktur HTML dan gaya CSS sedia, kita perlu menulis beberapa kod JavaScript untuk melaksanakan fungsi teras kalendar. Kod JS khusus adalah seperti berikut:

layui.use(['laydate', 'table'], function() {
  var laydate = layui.laydate;
  var table = layui.table;
  
  // 获取当前日期
  var currentDate = new Date();
  
  // 获取当前年份和月份
  var currentYear = currentDate.getFullYear();
  var currentMonth = currentDate.getMonth() + 1;
  
  // 渲染日历
  renderCalendar(currentYear, currentMonth);

  // 渲染日历函数
  function renderCalendar(year, month) {
    var firstDay = new Date(year, month - 1, 1); // 当月的第一天
    var firstDayOfWeek = firstDay.getDay(); // 当月的第一天是星期几
    var lastDayOfLastMonth = new Date(year, month - 1, 0); // 上个月的最后一天

    // 清空日历表格
    $('#calendar-body').empty();

    // 设置日历表格的行数和列数
    var rowCount = 6;
    var colCount = 7;

    // 构建日历表格
    for (var i = 0; i < rowCount; i++) {
      var tr = $('<tr></tr>');
      for (var j = 0; j < colCount; j++) {
        var td = $('<td></td>');
        var day = i * colCount + j - firstDayOfWeek + 1;
        var isCurrentMonth = true;
        
        // 当天日期
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth() + 1;
        var todayDate = today.getDate();
        
        // 判断日期是否在当前月份
        if (year === todayYear && month === todayMonth && day === todayDate) {
          td.addClass('today');
        }
        
        // 判断日期是否在当前月份之后
        if (day <= 0) {
          day = lastDayOfLastMonth.getDate() + day;
          isCurrentMonth = false;
        } else if (day > lastDayOfLastMonth.getDate()) {
          day = day - lastDayOfLastMonth.getDate();
          isCurrentMonth = false;
        }
        
        // 渲染日期
        if (isCurrentMonth) {
          td.text(day);
        } else {
          td.text(day);
          td.css('color', '#ccc');
        }

        tr.append(td);
      }
      $('#calendar-body').append(tr);
    }
  }
});

5. Paparan kesan
Simpan kod di atas sebagai fail HTML dan bukanya melalui pelayar untuk melihat kalendar responsif yang mudah. Anda boleh menukar bulan dengan mengklik butang untuk bulan sebelumnya dan bulan seterusnya, dan tarikh semasa akan dipaparkan dalam gaya yang berbeza.

6. Ringkasan
Artikel ini memperkenalkan cara menggunakan Layui untuk melaksanakan fungsi kalendar responsif, dan memberikan contoh kod khusus. Melalui contoh ini, kita dapati bahawa komponen kalendar yang disediakan oleh Layui adalah sangat fleksibel dan dapat memenuhi keperluan pelbagai senario. Saya harap artikel ini dapat membantu pelajar yang belajar Layui dan melaksanakan fungsi kalendar.

Atas ialah kandungan terperinci Cara menggunakan Layui untuk melaksanakan fungsi kalendar responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!