JavaScriptライブラリ2

時々出番が来るJavaScriptのライブラリ集です。

ページをまたぐページ内リンク（#Beta版）

ページ内リンクに外部からリンク貼る場合に、スムーススクロールと終了位置調整を施すためのJSです。

サンプル

汎用パーツ：テキストリンクアイコン

HTML


<p class="LinkPageTrans"><a href="/parts/#txtlinkicon">汎用パーツ：テキストリンクアイコン</a></p>

JS設定


$(function(){

	// ハッシュタグ付きURL、またはページをまたぐページ内リンク（#Beta） Original Source: https://webdesignday.jp/inspiration/technique/jquery-js/4022/
	var urlHash = location.hash,
		$linkPageTrans = $('.LinkPageTrans a[href^="#"]');
	if(urlHash) {
		$('html,body').stop().scrollTop(0);
		setTimeout(function(){
			var target = $(urlHash),
				position = target.offset().top - targetHeight;
			$('body,html').stop().animate({scrollTop: position}, smoothScrollSpeed, "swing");
		}, 100);
	}
	$linkPageTrans.click(function() {
		var href= $(this).attr("href"),
			target = $(href),
			position = target.offset().top - targetHeight;
		$('html,body').stop().animate({scrollTop: position}, smoothScrollSpeed, "swing");
	});

});
  • setting.jsのスムーススクロールのJSに追記して使用（基本設定は共有なので上記記述だけでは動作しません）。

Googleカレンダー埋め込み（FullCalendar）

FullCalendarを利用したGoogleカレンダー埋め込み表示。祝日カレンダー反映済み。
利用にはGoogleカレンダーの作成とGoogleAPIキーが必要。

サンプル

HTML


<!-- #Googleカレンダー埋め込み（FullCalendar） -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.3/fullcalendar.min.css" rel="stylesheet" media="all">
<div class="GoogleCalendar">
<div id="GoogleCalendar_ThisMonth"></div>
<div id="GoogleCalendar_NextMonth"></div>
<div id="GoogleCalendar_AfterNextMonth"></div>
</div>

CSS


/* Googleカレンダー埋め込み（FullCalendar） --------------------------------------------------- */

/* ツールバー */
.fc-toolbar {
margin-bottom: 1rem !important;
}

/* 今月・前月・次月 ボタン */
.fc-state-default {
font-size: 1.4rem !important;
border-color: #d5d5d5 !important;
text-shadow: none !important;
background-color: #f8f8f8 !important;
background-image: none !important;
box-shadow: none !important;
}

.fc-icon-left-single-arrow,
.fc-icon-right-single-arrow {
padding: 0 1rem;
}

.fc-icon-left-single-arrow::after,
.fc-icon-right-single-arrow::after {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 1rem;
height: 1rem;
margin-top: -0.5rem;
border-top: solid 2px;
border-right: solid 2px;
border-color: #000;
content: "" !important;
}

.fc-icon-left-single-arrow::after {
margin-left: -0.25rem;
transform: rotate(225deg);
}

.fc-icon-right-single-arrow::after {
margin-left: -0.75rem;
transform: rotate(45deg);
}

.fc-state-disabled {
opacity: 0.4 !important;
}

/* ボーダーカラー */
.fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed hr, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
border-color: #e6e6e6;
}

/* 今日 */
.fc-unthemed .fc-today {
font-weight: bold;
background: transparent !important;
}

/* 曜日 */
.fc-day-header {
background: #f8f8f8;
}

/* 土曜日 */
.fc-sat {
/* color: #0c8aff; */
background: #f7fbff;
}

.fc-day-header.fc-sat {
background: #e0f0ff;
}

/* 日曜日 */
.fc-sun {
/* color: #ff424c; */
background: #fff8f8;
}

.fc-day-header.fc-sun {
background: #ffe9ea;
}

/* 日付 */
.fc-ltr .fc-basic-view .fc-day-number {
padding-left: 0.5rem;
padding-top: 0.5rem;
text-align: left !important;
}

/* イベント */
.fc-event {
border: none !important;
background: #efa900 !important;
}

.fc-content {
margin-top: 0.4rem;
text-align: center;
color: #fff;
}

/* 祝日 */
.GoogleCalendar_Holiday {
border-color: #e6e6e6 !important;
font-size: 0.8rem !important;
background: #fff8f8 !important;
opacity: 1 !important;
}

.GoogleCalendar_Holiday .fc-content {
color: #cc0000 !important;
}

/* レイアウト */
.GoogleCalendar {
display: grid;
gap: 2rem;
}

@media only screen and (max-width: 767px) {

	/* フォントサイズ */
	.fc table {
	font-size: 1.3rem !important;
	}

	/* 年月 */
	.fc-toolbar h2 {
	padding-top: 0.75rem;
	font-size: 1.6rem !important;
	}

	/* 曜日 */
	.fc-day-header {
	font-size: 1.2rem !important;
	padding-top: 0.4rem !important;
	padding-bottom: 0.4rem !important;
	}

}

@media print, screen and (min-width: 768px) {

	/* フォントサイズ */
	.fc table {
	font-size: 1.5rem !important;
	}

	/* 年月 */
	.fc-toolbar h2 {
	padding-top: 0.6rem;
	font-size: 1.8rem !important;
	}

	/* 曜日 */
	.fc-day-header {
	font-size: 1.4rem !important;
	padding-top: 0.6rem !important;
	padding-bottom: 0.6rem !important;
	}

	/* レイアウト */
	.GoogleCalendar {
	grid-template-columns: repeat(2, 1fr);
	}

}

JS設定


$(function(){

	// FullCalendar 設定
	var options = {
		timezone: 'Asia/Tokyo',
		lang: 'ja',
		contentHeight: 'auto',
		// 日付枠の縦横比
		aspectRatio: 2.0,
		// 月曜日始まりは1、日曜日始まりは0
		firstDay: 1,

		// カレンダー上部のタイトル・ボタンの表示と表示位置（表示しない場合は値を消す）
		header: {
			left: 'title',
			center: '',
			right: 'today prev,next',
		},

		// タイトルの書式
		titleFormat: {
			month: 'YYYY年M月',
		},

		// ボタンのラベル
		buttonText: {
			today: '今月',
		},

		// GoogleAPIキー
		googleCalendarApiKey: 'AIzaSyAJXJfP_DLW8gIGMoO2IBm5QXLEXGuaKeo',

		// イベント設定
		eventSources: [
			{
				// GoogleカレンダーID
				googleCalendarId: 'm0kaesasek0nll449qbp47b6so@group.calendar.google.com',
			},
			{
				// GoogleカレンダーID：祝日
				googleCalendarId: 'japanese__ja@holiday.calendar.google.com',
				className: 'GoogleCalendar_Holiday',
				// 祝日名を表示する場合は以下の2行コメントアウトを解除
				rendering: 'background',
				color: 'transparent',
			},
		],
		
		// イベントクリック時の処理
		eventClick: function(event) {
			return false;
		},

	};

	// 今月
	$('#GoogleCalendar_ThisMonth').fullCalendar(options);
	$('#GoogleCalendar_ThisMonth').fullCalendar('today');
	// 翌月
	$('#GoogleCalendar_NextMonth').fullCalendar(options);
	$('#GoogleCalendar_NextMonth').fullCalendar('incrementDate', {months: 1});
	// 翌々月
	$('#GoogleCalendar_AfterNextMonth').fullCalendar(options);
	$('#GoogleCalendar_AfterNextMonth').fullCalendar('incrementDate', {months: 2});

});

必要なJS


<!-- FullCalendar -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.3/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.3/lang-all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.3/gcal.js"></script>
  • バージョンは2.xを使用しています（複数月のカレンダー表示を実現するため）。