このチュートリアルでは、HTML クラスを MTS Simple Booking プラグインに追加するプロセスを説明します。これは、予約カレンダーの外観をカスタマイズしたり、特定の機能を追加したりする場合に役立ちます。

 

1:コードを理解する

MTS Simple Booking プラグインは、PHP を使用して予約カレンダーを生成します。カレンダー内の日付は、<td>クラスの要素によって表されます。 day-box要素内には、各日のリンクを表すクラスを持つ要素<td>があります。

 

2: calendar-daylink にイベントリスナーを追加する

クリックイベントを各calendar-daylink要素に追加します。要素をクリックすると、calendar-daylinkの親要素のクラスが sessionStorage に保存されます。

 

JavaScriptコードは次のとおりです。

(function() {
  window.addEventListener('load', function() {
    var dayLinks = document.querySelectorAll('.calendar-daylink');
    for (var i = 0; i < dayLinks.length; i++) {
      dayLinks[i].addEventListener('click', function(event) {
        var parentClass = event.target.parentNode.parentNode.className;
        var classWithoutDayBox = parentClass.replace('day-box', '').trim();
        sessionStorage.setItem('day-class', classWithoutDayBox);
      });
    }
  });
})();

 

3: Storageクラスを取得して、day-calendarに追加する

次に、別のウィンドウロードイベントを追加します。このイベントは、保存されたクラスを sessionStorage から取得し、それをday-calendarクラスを持つすべての要素に追加します。

JavaScriptコードは次のとおりです。

(function () {
  window.addEventListener('load', function () {
    var dayClass = sessionStorage.getItem('day-class');
    if (dayClass) {
      var dayClasses = dayClass.split(' ');
      var dayCalendars = document.querySelectorAll('.day-calendar');
      for (var i = 0; i < dayCalendars.length; i++) {
        dayCalendars[i].classList.add(...dayClasses);
      }
    }
  });
})();

結論

以上です！HTML クラスが MTS Simple Booking プラグインに正常に追加されました。これにより、予約カレンダーの外観をカスタマイズしたり、特定の機能を追加したりできます。変更を実際のWebサイトに適用する前に、必ず安全な環境でテストしてください。