Layui を使用してレスポンシブなカレンダー機能を実装する方法

Layui を使用してレスポンシブ カレンダー機能を実装する方法

1. はじめに
Web 開発において、カレンダー機能は一般的な要件の 1 つです。 Layui は、カレンダー コンポーネントを含む豊富な UI コンポーネントを提供する優れたフロントエンド フレームワークです。この記事では、Layuiを使ってレスポンシブカレンダー機能を実装する方法と具体的なコード例を紹介します。

2. HTML 構造
カレンダー機能を実装するには、まず適切な HTML 構造を作成する必要があります。 div 要素を最も外側のコンテナとして使用し、内部の table 要素を使用してカレンダーを表示できます。具体的な HTML 構造は次のとおりです:

<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. CSS スタイル
カレンダーをさまざまなデバイスで適切に表示するには、スタイルを調整する必要があります。特定の CSS スタイルは次のとおりです:

.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. JS ロジック
HTML 構造と CSS スタイルの準備ができたら、カレンダーのコア機能を実装するための JavaScript コードを作成する必要があります。具体的な JS コードは次のとおりです:

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. エフェクト表示
上記のコードを HTML ファイルとして保存し、ブラウザーで開くと、シンプルなレスポンシブ カレンダーが表示されます。前月と翌月のボタンをクリックすると月を切り替えることができ、現在の日付が異なるスタイルで表示されます。

6. 概要
この記事では、Layui を使用してレスポンシブ カレンダー機能を実装する方法と、具体的なコード例を紹介します。この例を通じて、Layui が提供するカレンダー コンポーネントは非常に柔軟で、さまざまなシナリオのニーズを満たすことができることがわかります。この記事がLayuiを学習し、カレンダー機能を実装する学生にとって役立つことを願っています。

以上がLayui を使用してレスポンシブなカレンダー機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。