a-blog cmsのモジュールを使用してブログにカレンダーを追加してみた

さいしょに

今回はa-blog cmsのビルトインモジュールのリファレンスを読んでCalendar_Monthというモジュールを使ってブログにカレンダーを追加しました。

Calendar_Monthを使用してみた

Calendar_Monthというモジュールを使用してアーカイブの項目やカテゴリーの項目の部分にカレンダーを表示してみました。
また、エントリーを更新している日のカレンダーの日付の色を変更したかったのですが、うまくいきませんでした。そのため、今回はモジュールを使用してカレンダーを追加した後、Tailwind cssで見た目を整えてよりカレンダーに見えるようにしました。

<!-- カレンダー -<section class="mt-8">
 <h2 class="text-xl font-bold mb-4">カレンダー</h2>

 <!-- BEGIN_MODULE Calendar_Month -->
 <div>
  <div>

  <h3 class="acms-text-center mb-2 text-center"><a href="{monthUrl}">{month}月</a></h3>
   <ul class="acms-text-center acms-list-inline flex justify-between">
    <li><a href="{prevUrl}" class="acms-btn-flat" title="前の月へ"><< </a></li>
    <li><a href="{yearUrl}" class="acms-btn-flat" title="年間カレンダーへ">{year}</a></li>
    <li><a href="{nextUrl}" class="acms-btn-flat" title="次の月へ">>></a></li>
   </ul>
  </div>

  <table class="acms-table acms-table-bordered mt-2 w-full text-center">
   <thead>
    <tr class="acms-text-center">
     <!-- BEGIN weekLabel:loop -->
     <td>{label}</td>
     <!-- END weekLabel:loop -->
    </tr>
   </thead>

  <tbody>
   <!-- BEGIN week:loop --> <tr class="acms-text-center">
    <!-- BEGIN day:loop -->
    <!-- BEGIN spacer -->
    <td></td>
    <!-- END spacer -->

    <!-- BEGIN none -->
    <td>{day}</td>
    <!-- END none -->

    <!-- BEGIN link -->
    <td class="success"><a href="{url}">{day}</a></td>
    <!-- END link -->
    <!-- END day:loop -->
   </tr>
   <!-- END week:loop -->
   </tbody>
  </table>
 </div>
 <!-- END_MODULE Calendar_Month -->
 </section>

さいごに

今回はカレンダーを追加することはできたのですが、エントリーが更新されている日の日付の色を変更することができなかったのでまた挑戦して色を変更できるようにしようと思います。
そして他のモジュールも使用してみてこのモジュールはこういう時に使うのかということを理解していこうと思います。