assign-holiday v1.0.7

Assign Holiday

Simple Liblary to added class Attribute to holiday element in a calendar

Installation

Vanilla (Plain JavaScript)

via npm

npm install assign-holiday

via yarn

yarn add assign-holiday

via cdn

<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>

jQuery plugin

via cdn

<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>

Usage

Vanilla (Plain JavaScript)

Basic Usage

<table class="js-assign-holiday">
  <tbody>
    <tr data-assign-holiday-date="2021-12-01">
      <th>1<span class="assign-holiday-week-label">Wed.</span></th>
      <td class="assign-holiday-title">
      </td>
    </tr>
    <tr data-assign-holiday-date="2021-12-02">
      <th>2<span class="assign-holiday-week-label">Thu.</span></th>
      <td class="assign-holiday-title">
      </td>
    </tr>
    <tr data-assign-holiday-date="2021-12-03">
      <th>2<span class="assign-holiday-week-label">Fri.</span></th>
      <td class="assign-holiday-title">
      </td>
    </tr>
    ...
  </tbody>
</table>

import AssignHoliday from 'assign-holiday';
import "assign-holiday/dist/assign-holiday.css"; // if use tooltip, you need to import css

const assignHoliday = new AssignHoliday('.js-assign-holiday');
assignHoliday.run({
  '2021-12-06': 'Closed on Monday.',
  '2021-12-13': 'Closed on Monday.',
  '2021-12-20': 'Closed on Monday.',
  '2021-12-24': {
    title: 'Closed for Christmas Eve.',
    className: 'is-christmas-eve', // className is only applicable on 2021-12-24.
  },
  '2021-12-27': 'Closed on Monday.',
})

Example of national holidays

import AssignHoliday from 'assign-holiday';
import "assign-holiday/dist/assign-holiday.css"; // if use tooltip, you need to import css

fetch('https://holidays-jp.github.io/api/v1/date.json')
      .then(res => res.json())
      .then(data => {
        new AssignHoliday('.js-assign-holiday').run(data);
      })

jQuery

Basic Usage

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

  assignHoliday.run({
    '2021-12-06': 'Closed on Monday.',
    '2021-12-13': 'Closed on Monday.',
    '2021-12-20': 'Closed on Monday.',
    '2021-12-24': {
      title: 'Closed for Christmas Eve.',
      className: 'is-christmas-eve', // className is only applicable on 2021-12-24.
    },
    '2021-12-27': 'Closed on Monday.',
  })
});

Example of national holidays

$.get('https://holidays-jp.github.io/api/v1/date.json')
  .then((data) => {
    $('.js-assign-holiday').assignHoliday().run(data);
  })

Options