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

| name | description | default | |:---|:---|:---| | holidayClass | Classname to be added to holiday element. | 'assign-holiday' | | dateAttribute | AttributeName to be set the date. | 'data-assign-holiday-date' | | holidayTitleClass | Classname to be added to the element to which the title will be added. | 'assign-holiday-title' | | holidayTitleTag | Tagname to be set to holiday title when adding holiday title. | '' | | holidayTitleAppendClass | classname to be added to the holiday title tag. | '' | | today | Whether to add a class to today's date element. | false | | todayClass | Classname to be added to today's date element. | 'assign-holiday-today' | | holidayLabel | Label to be replaced or inserted with labels of days of the week set in weekLabel. | 'Hol.' | | holidayLabelPosition | Position to insert the holiday label into the label for the set day of the week. You can select 'replace', 'before' or 'after'. | 'replace' | | weekLabelClass | Classname to be added to the element to which the holiday label will be replaced or inserted. | 'assign-holiday-week-label' | | weekLabels | Day of the week labels which replaced by holiday label or inserted before and after holiday label. | ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.', 'Sun.'] | | holidayTooltipClass | Classname to be added to the element to which the tooltip will be added. | 'assign-holiday-tooltip' | | holidayTooltipTextClass | Classname to be added to tooltip text element. | 'assign-holiday-tooltip-text' |