jQuery カレンダープラグイン FullCalendar ～その１スケジュール表を作成する～

2020/02/17 追記
jQueryや Moment.js を使用しなくなったバージョンVer.4.3.1が公開されています。Ver.4の記事を作成しているのでリンクを貼っておきます。
JavaScript カレンダープラグイン FullCalendar ～その１スケジュール表を作成する～

サイトリニューアルに伴い記事を全て捨てるつもりでしたが、
数年更新が止まっていたにも関わらずFullCalendarへのアクセスが多いので
2018/03/21 現在の最新版バージョンVer.3.9.0の使い方を記載したいと思います。

基本的には、demoディレクトリ内を確認頂ければ全て解決するはずですが、いくつか補足しておきます。
FullCalendar
https://fullcalendar.io/
FullCalendar Documentation
https://fullcalendar.io/docs

jQuery カレンダープラグイン FullCalendar ～その２日本の祝日を表示させる～

基本設定

カレンダーを表示する

・JavaScriptファイルのインクルード
・CSSファイルのインクルード
・設置するカレンダー用のタグ設置
・タグに対しての関数コール

<head>
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />

<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>
  $(document).ready(function() {
    $('#calendar').fullCalendar();
  });
</script>
</head>
<body>
  <div id='calendar'></div>
</body>

GitHub Pages：サンプル default.html

Ver.1.9 からどのタイミングで変更があったか記憶していませんが、
日付を取り扱うという事で、moment.js が追加されていますね。

Moment.js
https://momentjs.com/
※ダウンロードは不要です。FullCalendarをダウンロードすれば入っています。

イベントを追加する

カレンダーは簡単に表示できましたね。続いてスケジュール（イベント）を追加します。
fullCalendar指定時に追加します。

$('#calendar').fullCalendar({
  defaultDate: '2018-03-20',
  events: [
    {
      title: '来客',
      start: '2018-03-20'
    },
    {
      title: '旅行',
      start: '2018-03-25T06:00:00',
      end: '2018-03-30T22:00:00'
    }
  ]
});

GitHub Pages：サンプル event.html

上記設定では、
・2018年3月20日　来客
・2018年3月25日 6時～ 2018年3月30日 22時　まで旅行
というイベントを設定しています。

events の項目にイベントのオブジェクト配列を指定する形式です。
オブジェクトにどういった設定があるかは、スクリプトファイルを確認して下さい。

他にも jsonの指定が出来たりと、いくつか指定方法があるので付属のデモを確認して下さい。

日本語表記に変更する

言語用のファイルもインクルードします。

<head>
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />

<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script src='locale/ja.js'></script> 
<script>
  $(document).ready(function() {
    $('#calendar').fullCalendar({});
  });
</script>

土日がわかりづらいので色を付ける

基本設定でもなんでもなくカスタマイズですが、絶対いるでしょ！という事で基本編に。

これは簡単に実装できます。とりあえず、日曜日は赤に、土曜日は青にしましょう。
CSSの設定で以下の項目を追加します。

/* 日曜日 */
.fc-sun {
    color: red;
    background-color: #fff0f0;
}
 
/* 土曜日 */
.fc-sat {
    color: blue;
    background-color: #f0f0ff;
}

GitHub Pages：サンプル color_sun_sat.html

設定・カスタマイズ

日曜日からではなく、月曜日から表示する

firstDay
　0（日）～6（土）の数値を指定する。初期値は「0 = 日曜日」

つまり、月曜からの場合は、１を指定すればOKです。

$('#calendar').fullCalendar({
  firstDay : 1
});

土日の日程を削除する

weekends
　土日を表示するかどうか。初期値はtrue

$('#calendar').fullCalendar({
  weekends: false
});

開いた時に、指定した年月日のカレンダーを表示する

defaultDate
　表示したい年月日を指定

$('#calendar').fullCalendar({
  defaultDate: '2018-03-20'
});

最適化

CDN（コンテンツデリバリーネットワーク）を利用する

ダウンロードページにも記載されていますが、CDNJSを利用する事が出来る為、jsファイルやcssファイルを外部サーバーから読み込む事が可能になります。

FullCalendar : Download
https://fullcalendar.io/download
cdnjs : fullcalenader
https://cdnjs.com/libraries/fullcalendar

jQueryもCDNを利用することが可能ですが、下記のサンプルコードはFullCalendarのみ変更しています。

<head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />

<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale/ja.js'></script>

jQuery カレンダープラグイン FullCalendar ～その１ スケジュール表を作成する～