祝日や休日の要素にclassを追加する AssignHoliday をリリースしました

OSS

AssignHoliday

カレンダーの中の祝日や休日の要素だけ見た目を他の日付と変更したいと思ったことはありませんか？ また、（月）、（木）といったの曜日のラベルを祝日の場合は （祝）にしたいと思ったことはありませんか？今回は、日付を設定すると、要素に指定した日付と、設定した日付が一致した場合、class を追加することができる他、曜日のラベルを（祝）に変更できるライブラリをリリースしました。

この記事ではそのライブラリの使い方をご紹介します。

  1. デモ
  2. 特徴
  3. 使い方
  4. オプション
  5. ダウンロード
  6. リンク

デモ

See the Pen Assign Holiday Demo by appleple (@appleple) on CodePen.

下記の画像は、AssignHolidayを使用しなかった時です。2021年9月は20日と23日は祝日ですが、このままでは祝日であるということが分かりづらいです。そんな時に、デモのように AssignHoliday を使用すると、祝日の要素にclassを付与することができます（デモではわかりやすいように緑色の背景色をつけています）。また、月や木といった曜日のラベルが 祝 というラベルに変わっていたり、タイトルも表示されています。

AssignHolidayを使用しなかった時の画像

特徴

  • 休日のデータは使用者側で任意に設定できる
  • 休日のタイトルを表示可能
  • 任意の文字を曜日のラベルの前後に挿入可能(これにより、"祝" だけでなく "月祝" 等の表示も可能になります)
  • 小さなカレンダーなどのために、ツールチップで休日のタイトルを表示させることも可能

使い方

JavaScriptとCSSの読み込み

CDNを使った読み込み

cssの読み込みは任意です。ツールチップを使用する際に必要になります。

<link rel="stylesheet" href="https://unpkg.com/assign-holiday@latest/dist/assign-holiday.css">
<script src="https://unpkg.com/assign-holiday@latest/dist/assign-holiday.js"></script>

npm、yarnを使った読み込み

  • npm
npm install assign-holiday
  • yarn
yarn add assign-holiday

jQueryプラグインとして読み込む

<link rel="stylesheet" href="https://unpkg.com/assign-holiday@latest/dist/assign-holiday.css">
<script src="https://unpkg.com/assign-holiday@latest/dist/jquery-assign-holiday.js"></script>

HTMLの記述

<table class="js-assign-holiday">
  <tbody>
    <tr data-assign-holiday-date="2021-12-01">
      <th>1<span>（水）</span></th>
      　　<td class="assign-holiday-title"></td>
    </tr>
    <tr data-assign-holiday-date="2021-12-02">
      <th>2<span>（木）</span></th>
      　　<td class="assign-holiday-title"></td>
    </tr>
    <tr data-assign-holiday-date="2021-12-03">
      <th>2<span>（金）</span></th>
      <td class="assign-holiday-title"></td>
    </tr>
    <!-- 省略 -->
  </tbody>
</table>

JavaScriptの記述

const assignHoliday = new AssignHoliday('.js-assign-holiday');
assignHoliday.run({
  '2021-12-06': '定休日',
  '2021-12-13': '定休日',
  '2021-12-20': '定休日',
  '2021-12-24': {
    title: 'クリスマスイブのため臨時休業',
    className: 'is-christmas-eve', 
  },
  '2021-12-27': '定休日',
})

JavaScript動作後のHTML

<table class="js-assign-holiday">
  <tbody>
    <tr data-assign-holiday-date="2021-12-01">
      <th>1<span>（水）</span></th>
      　　<td class="assign-holiday-title"></td>
    </tr>
    <tr data-assign-holiday-date="2021-12-02">
      <th>2<span>（木）</span></th>
      　　<td class="assign-holiday-title"></td>
    </tr>
    <tr data-assign-holiday-date="2021-12-03">
      <th>2<span>（金）</span></th>
      <td class="assign-holiday-title"></td>
    </tr>
    <!-- 省略 -->
　　　<tr data-assign-holiday-date="2021-12-06" class="assign-holiday">
      <th>2<span>（月）</span></th>
      <td class="assign-holiday-title">定休日</td>
    </tr>
    <!-- 省略 -->
　　　<tr data-assign-holiday-date="2021-12-13" class="assign-holiday">
      <th>2<span>（月）</span></th>
      <td class="assign-holiday-title">定休日</td>
    </tr>
    <!-- 省略 -->
　　　<tr data-assign-holiday-date="2021-12-20" class="assign-holiday">
      <th>2<span>（月）</span></th>
      <td class="assign-holiday-title">定休日</td>
    </tr>
    <!-- 省略 -->
　　　<tr data-assign-holiday-date="2021-12-24" class="is-christmas-eve">
      <th>2<span>（金）</span></th>
      <td class="assign-holiday-title">クリスマスイブのため臨時休業</td>
    </tr>
　　　　<!-- 省略 -->
　　　<tr data-assign-holiday-date="2021-12-27" class="assign-holiday">
      <th>2<span>（月）</span></th>
      <td class="assign-holiday-title">定休日</td>
    </tr>
    <!-- 省略 -->
  </tbody>
</table>

祝日を表示させる場合のJavascriptの記述

祝日を表示させる場合、（月）などの曜日のラベルを（祝）にしたいということがあるかと思います。そういった場合は下記のようにラベルを表示している要素に assign-holiday-week-label を追加してください。
assign-holiday-week-label をclass属性に設定した要素内の文字に、 weekLabels オプションの配列で設定した文字列と同じ文字があれば、 holidayLabel で設定した文字に置換するという仕様になっています。

<tr data-assign-holiday-date="2021-12-20" class="assign-holiday">
      <th>2<span class="assign-holiday-week-label">（月）</span></th>
      <td class="assign-holiday-title"></td>
    </tr>
fetch('https://holidays-jp.github.io/api/v1/date.json')
    .then(res => res.json())
    .then((data) => {
      new AssignHoliday('.js-assign-holiday', {
        holidayLabel: '祝', // デフォルトの設定だと"Hol."になっているので日本語表記に変更します。
        weekLabels: ['月', '火', '水', '木', '金', '土', '日'], // デフォルトだと英語表記なので、日本語表記に変更します。
      }).run(data);
    });

jQueryで記述する場合

$(function () {
  const assignHoliday = $('.js-assign-holiday').assignHoliday();

  assignHoliday.run({
    '2021-12-06': '定休日',
    '2021-12-13': '定休日',
    '2021-12-20': '定休日',
    '2021-12-24': {
      title: 'クリスマスイブのため臨時休業',
      className: 'is-christmas-eve', 
    },
    '2021-12-27': '定休日',
  })
});

祝日を表示させる場合のjQueryの記述

$.get('https://holidays-jp.github.io/api/v1/date.json')
  .then((data) => {
    $('.js-assign-holiday').assignHoliday({
        holidayLabel: '祝', // デフォルトの設定だと"Hol."になっているので日本語表記に変更します。
        weekLabels: ['月', '火', '水', '木', '金', '土', '日'], // デフォルトだと英語表記なので、日本語表記に変更します。
      }).run(data);
  })

オプション

使い方のところでも、少し紹介しましたが、AssignHolidayにはオプションが用意されており、第二引数（jQueryプラグインとして使用する場合は第一引数）にオプションのオブジェクトを設定することができます。
ここでは、設定できるオプションを紹介します。

名前 デフォルト値 説明
holidayClass 'assign-holiday' 休日の要素に追加されるクラス名です。
dateAttribute 'data-assign-holiday-date' 日付を yyyy-MM-dd の形式で設定する属性です。
holidayTitleClass 'assign-holiday-title' タイトルを表示させる要素のクラス名です。
holidayTitleTag '' タイトルを表示させる場合、タイトルのテキストを囲むHTMLタグを設定できます。
holidayTitleAppendClass '' タイトルのテキストを囲むHTMLタグを設定した場合、そのタグに追加するクラス名を設定できます。
today false 今日の要素にクラスを追加するかどうかを設定できます。
todayClass 'assign-holiday-today' 今日の要素にクラスを追加する場合、そのクラス名を設定できます。
holidayLabel 'Hol.' 休日に曜日のラベルを追加する場合、そのラベルを文字列で設定できます。
holidayLabelPosition 'replace' 設定された曜日のラベルの中に、休日のラベルを挿入する位置です。'replace'、'before'、'after'が選択できます。
weekLabelClass 'assign-holiday-week-label' holidayLabelで設定したラベルを置換または挿入される要素に追加するクラス名です。
weekLabels ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.', 'Sun.'] holidayLabelで設定したラベルが置換または前後に挿入される文字列を設定できます。
holidayTooltipClass 'assign-holiday-tooltip' ツールチップが追加される要素のクラス名です。
holidayTooltipTextClass 'assign-holiday-tooltip-text' ツールチップが追加される場合、ツールチップのテキストの要素に追加されるクラス名です。

ダウンロード

ダウンロードはこちらから行えます。
ダウンロード

リンク

github.com/appleple/assign-holiday

https://appleple.github.io/assign-holiday/

シェアする

この記事を書いた人

著者の顔写真

フロントエンドエンジニア

宇井 陸登

新卒でアップルップルに入社。主に a-blog cms の運用・保守を担当している。Twitterやブログ頑張っているのでぜひ見てください。

関連記事

カテゴリー

タグクラウド

ブログ内検索

関連記事

Webにまつわる お困りごとをご相談ください。

こんなお手伝いができます

Webコンサルタントとしてのお手伝い／UIデザインのご相談／デジタルメディアの総合プロデュース／パンフレット・DMなどのDTP、ロゴ制作などのビジュアルデザイン

お問い合わせ

資料ダウンロード

何について知りたいですか？