国民の祝日：日本

国民の祝日データベースを公開しています。

サンプル集

国民の祝日APIの使用例をまとめました。

JavaScript(Ajax)

JavaScript(Ajax)での実装例（年間カレンダー）

Source Code
HTML
<div id="ajax-sample"></div>
JavaScript
var ajaxBaseUrlOfNationalHolidays = location.protocol + "//api.national-holidays.jp/";

var dayOfWeeks = [
	{ name: "sunday",    en: "Sun", ja: "日", },
	{ name: "monday",    en: "Mon", ja: "月", },
	{ name: "tuesday",   en: "Tue", ja: "火", },
	{ name: "wednesday", en: "Wed", ja: "水", },
	{ name: "thursday",  en: "Thu", ja: "木", },
	{ name: "friday",    en: "Fri", ja: "金", },
	{ name: "saturday",  en: "Sat", ja: "土", },
];

/**
 * 年間カレンダーを生成する. 
 * 
 * @param target カレンダーを追加するタグオブジェクト
 * @param year   年
 */
function AnnualCalendar(target, year) {
	if (!year) {
		// 今年
		year = moment().year();
	}
	
	var header = $("<div>");
	header.text(year + "年");
	header.addClass("col-12");
	header.addClass("text-center");
	header.addClass("h4");
	$(target).append(header);
	
	for (month = 1; month <= 12; month ++) {
		var monthlyCalendar = $("<div>");
		
		monthlyCalendar.addClass("col-12");
		monthlyCalendar.addClass("col-sm-6");
		monthlyCalendar.addClass("col-md-4");
		monthlyCalendar.addClass("col-lg-3");
		monthlyCalendar.addClass("col-xl-2");
		
		$(monthlyCalendar).append(new MonthlyCalendar(monthlyCalendar, year, month, false, false, true));
		
		// targetで指定された要素にテーブルを追加する
		$(target).append(monthlyCalendar);
	}
	
	$(target).addClass("row");
}

/**
 * 月間カレンダーテーブルを生成する. 
 * 
 * @param target               月間カレンダーを追加するタグオブジェクト
 * @param year                 年
 * @param month                月(1～12)
 * @param enableNavigation     前月/次月ナビゲーションを表示する場合はtrue
 * @param showDaysOfOtherMonth 当月に含まれない日付を表示する場合はtrue
 * @param showBlankWeek        第６週が存在しない場合でも表示する場合はtrue
 */
function MonthlyCalendar(target, year, month, enableNavigation, showDaysOfOtherMonth, showBlankWeek) {
	// 本日の日付を取得する
	var today = moment().startOf("day");
	
	// 月初日を取得する
	var epoch;
	if (year && month) {
		epoch = moment([year, month - 1, 1, 0, 0, 0, 0]);
	} else {
		epoch = moment(today).startOf("month");
	}
	year = epoch.format("YYYY");
	month = epoch.format("MM");
	
	// テーブルヘッダ：月名
	var thead = $("<thead>").addClass("calendar-header");
	var tr = $("<tr>").addClass("calendar-header-row");
	
	if (enableNavigation) {
		// 前月/次月ナビゲーションを表示する場合：
		
		// 前月へ
		tr.append($("<td>").text("<<").attr("id", "lastMonth").addClass("text-left"));
		
		// YYYY年 M月
		tr.append($("<th>").text(epoch.format("Y") + "年 " + epoch.format("MMM")).attr("colspan", 5));
		
		// 次月へ
		tr.append($("<td>").text(">>").attr("id", "nextMonth").addClass("text-right"));
	} else{
		// 前月/次月ナビゲーションを表示しない場合：
		
		// M月
		tr.append($("<th>").text(epoch.format("MMMM")).attr("colspan", 7));
	}
	thead.append(tr);
	
	// テーブルボディ：
	var tbody = $("<tbody>").addClass("calendar-body");
	
	// １行目：曜日名
	var tr = $("<tr>");
	dayOfWeeks.forEach(function(dayOfWeek) {
		tr.append($("<th>").text(dayOfWeek.ja).addClass("calendar-header-cell").addClass(dayOfWeek.name));
	});
	tbody.append(tr);
	
	// ２～７行目：日付
	
	// 月初日(1日)の曜日番号を取得する
	var epochDayOfWeek = epoch.weekday();
	
	// １週目の先頭＝日曜日の日付を取得する
	var date = moment(epoch).subtract(epochDayOfWeek, "days");
	
	for (var i = 0; i < 6; i ++) {
		var tr = $("<tr>").addClass("calendar-body-row");
		dayOfWeeks.forEach(function(dayOfWeek) {
			var td = $("<td>");
			td.text(date.date());
			td.addClass("calendar-body-cell");
			
			if (epoch.month() == date.month()) {
				// 当月である場合：
				
				td.addClass(dayOfWeek.name);
				
				if (date.isSame(today)) {
					// 本日である場合：
					
					td.addClass("today");
				}
				
				td.attr("id", date.format("YYYY-MM-DD"));
			} else {
				// 当月でない場合：
				
				if (showDaysOfOtherMonth) {
					// 当月に含まれない日付を表示する場合：
					
					td.addClass(dayOfWeek.name);
					
					// 当月でない範囲は無効化する
					td.addClass("disabled");
				} else {
					// 当月に含まれない日付を表示しない場合：
					
					// 当月でない範囲は空欄にする
					td.html(" ");
				}
			}
			
			tr.append(td);
			
			// １日進める
			date = date.add(1, "days");
		});
		
		if (showBlankWeek || i < 5 || date.date() <= 7) {
			// 第６週が存在しない場合でも表示する場合か、第５週目までに含まれる場合か、第６週目に当月の日付が含まれる場合：
			
			tbody.append(tr);
		}
	}
	
	// テーブルを生成する
	var table = $("<table>");
	table.addClass("calendar");
	table.addClass("month");
	table.addClass("text-center");
	table.append(thead);
	table.append(tbody);
	
	// targetで指定された要素にテーブルを追加する
	$(target).append(table);
	
	// 該当する月の国民の祝日リストをAjaxで取得する
	$.ajax({
	    url         : ajaxBaseUrlOfNationalHolidays + year + "/" + month,
		type        : "GET",
	    dataType    : "json",
		statusCode  : {
			404: function (result) {
				// 国民の祝日が存在しない月もある
			},
		},
	}).then(
		function (holidays) {
			if (holidays.length > 0) {
				holidays.forEach(function(holiday) {
					$("#" + holiday.date).addClass("holiday");
					$("#" + holiday.date).attr("data-toggle", "tooltip");
					$("#" + holiday.date).attr("title", holiday.name);
					$("#" + holiday.date).tooltip();
				});
			}
		}
	);
}

$(function ()  {
	var calendar = new AnnualCalendar("#ajax-sample");
});

Tabulator

Tabulatorとは

インタラクティブなテーブルを作成する際に便利な Javascript ライブラリで、多機能のテーブルを簡単に作成することができます。

HTMLテーブルを Tabulator に変換して表示する方法と、JSONデータを読み込んで表示する方法があります。

ここでは、Ajaxを用いて国民の祝日APIから全国民の祝日データ (http://api.national-holidays.jp/all)を取得し、 フィルタリング(絞り込み)、ソート、ページネーションなどを試しています。

Source Code
HTML
<div id="tabulator-sample"></div>
JavaScript
var table = new Tabulator("#tabulator-sample", {
	layout: "fitColumns",
	placeholder: "No Data Set.",
	pagination: "local",
	ajaxURL: location.protocol + "//api.national-holidays.jp/all",
	paginationSize: 20,
	paginationSizeSelector: [5, 10, 20, 50, 100],
	columnHeaderSortMulti: true,
	initialSort: [
		{ column: "date", dir: "asc" },
	],
	columns: [
		{ title: "日付", field: "date", headerSort:  true, headerFilter: "input", },
		{ title: "名称", field: "name", headerSort:  true, headerFilter: "input", },
		{ title: "種別", field: "type", headerSort:  true, headerFilter: "input", },
	],
});

Java(SpringBoot)

Java(SpringBoot)での実装例

Source Code
Java
もどる