かえでBlog

色々なことを徒然と……

【jQuery】FullCarendar

      2014/10/14

Googleカレンダーに似たカレンダーを作成しようと思い探してみるとFullCalendarというものを見つけました。

細かい設定ができ、googleカレンダーと同期することも可能だそうなので早速使ってみました。

※バージョン1.*とバージョン2.*は設定方法が違ったり書式が使えなかったりしますので注意してください。

機能

  • 月別、週別、日別の表示が可能
  • イベントをドラッグして作成および編集が可能
  • Googleカレンダーとの同期もできる

使い方

現時点(2014年8月30日時点)のバージョンは2.1.1です。

こちらよりダウンロードもしくはCDNで設定可能です。

ダウンロード後、以下のように記述すれば動きます。


	$(document).ready(function() {

		$('#calendar').fullCalendar({
			defaultDate: '2014-09-12',
			editable: true,
			events: [
				{
					title: 'All Day Event',
					start: '2014-09-01'
				},
				{
					title: 'Long Event',
					start: '2014-09-07',
					end: '2014-09-10'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2014-09-09T16:00:00'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2014-09-16T16:00:00'
				},
				{
					title: 'Conference',
					start: '2014-09-11',
					end: '2014-09-13'
				},
				{
					title: 'Meeting',
					start: '2014-09-12T10:30:00',
					end: '2014-09-12T12:30:00'
				},
				{
					title: 'Lunch',
					start: '2014-09-12T12:00:00'
				},
				{
					title: 'Meeting',
					start: '2014-09-12T14:30:00'
				},
				{
					title: 'Happy Hour',
					start: '2014-09-12T17:30:00'
				},
				{
					title: 'Dinner',
					start: '2014-09-12T20:00:00'
				},
				{
					title: 'Birthday Party',
					start: '2014-09-13T07:00:00'
				},
				{
					title: 'Click for Google',
					url: 'http://google.com/',
					start: '2014-09-28'
				}
			]
		});
		
	});

カレンダー表示したい箇所に以下の記述をします。

<div id='calendar'></div>

詳細設定

タイトル表示

header{center: 'title'}

週別、日別を表示

header{right: 'month,agendaWeek,agendaDay'}
month basicWeek basicDay agendaWeek agendaDayから選択可能)

次、前表示

header{right: prev,next}

  • prev…前の月(週または日)遷移ボタン
  • next…次の月(週または日)遷移ボタン
  • prevYear…前年遷移ボタン
  • nextYear…翌年遷移ボタン
  • today…今日遷移ボタン

月別にて「more」表示

eventLimit: trueで枠以上のイベントが入るとその他で表示されます。

eventLimit: falseで枠以上のイベントが入った場合、縦長に伸びていきます。

デフォルトは「more」で表示されるので、違う文言に変えたい場合は
eventLimitText:'変えたい文言'
で変更可能です。

日本語表示

//ヘッダーの書式
columnFormat: {
month: 'ddd', // 月
week: 'D[(]ddd[)]', // 7(月)
day: 'D[(]ddd[)]' // 7(月)

},
// タイトルの書式
titleFormat: {
month: 'YYYY年 M月', // 2014年9月
week: 'YYYY年 M月 D日',
day: 'YYYY年 M月 D日[(]ddd[)]', // 2014年9月7日(火)
},
//more表示の書式
dayPopoverFormat:'YYYY年 M月 D日[(]ddd[)]',
// 月名称
monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
// 月略称
monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
// 曜日名称
dayNames: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
// 曜日略称
dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
// スロットの時間の書式
axisFormat: 'H:mm',
// 時間の書式
timeFormat: 'H:mm',
// ボタン文字列
buttonText: {
prev: '前',
next: '次',
prevYear: '前年',
nextYear: '翌年',
today: '今日',
month: '月',
week: '週',
day: '日'
},

 

FullCalendarのバージョンによって書式の記述方法が異なります。

上記はV2の書き方です。

V1とV2の違いは以下の通り

  V1 V2
年(4桁) yyyy YYYY
年(2桁) yy YY
月(0埋め有) dd DD
月(0埋め無) d D
am pm表示 tt a
AM PM表示 TT A
序数表示(st, nd, rd, th) o
エスケープ文字 '' []
書式設定 [] または {} で設定可 設定不可
出力 u (IS08601)
MomentjsのtoISOStringを使用

V1だと書式設定で「2014年 9月 7 - 13日」を「2014年 9月 7 ~ 13日」等に変更可能でしたがV2ではできなくなったようです。

「-」を「~」等に変えたい場合は直接FullCalendar.jsを修正すれば可能です。
(fullcalendar.jsの2845行目付近「separator = separator || ' - ';」で修正可能)

イベントの初期表示

defaultView:'初期表示したいイベント'
month basicWeek basicDay agendaWeek agendaDayから選択可能)

開始曜日の設定

firstDay:0(~6)

  • 0…日曜日
  • 1…月曜日
  • 2…火曜日
  • 3…水曜日
  • 4…木曜日
  • 5…金曜日
  • 6…土曜日

土日表示

weekends:true

終日スロットル表示(週表示、日表示の場合)

allDaySlot:true

終日スロットルのタイトル

allDayText:'終日'

時間間隔(agenda系イベントのみ)

agendaWeek agendaDayで表示している場合に使用できるオプション

表示のセルの間隔を変更できます。

slotDuration:'00:30:00'

終了時刻がないイベントの表示間隔

イベントのデータが開始または終了のみの場合だと表示ができないので、表示上で終了(開始)時刻の設定ができます。

defaultTimedEventDuration:'03:00:00'

日区切り時間

nextDayThresholdにて次の日扱いにする時刻を設定します。

この設定を入れないと月別カレンダーでは終了(End)日時が午前9時以降に設定しないと次の日として表示してくれません。

午前9時ではなく午前0時で次の日にしたい場合はこの設定を追加します。

スクロール開始時間

agendaWeek agendaDayにて開始時間の設定ができます。

monthにて設定すると、イベントの日またがりの時間になります。(9時に設定すると翌日9時以降で翌日までイベントが伸びます)

scrollTime:'09:00:00'

スクロール最小時間、最大時間

スクロールの最小、最大時間の設定ができます。

minTime:'00:00:00',
maxTime:'24:00:00',

日付クリックイベント

カレンダー内の空白部分クリックした場合の処理設定ができます。

dayClick: function(date, jsEvent, view) {…処理…}

イベントクリックイベント

カレンダー内のイベント(イベント)をクリックした場合の処理設定ができます。

eventClick: function(calEvent, jsEvent, view) {…処理…}

ドラッグ

空白部分をドラッグの許可の設定ができます。

selectable:true

selectHelper:true

ドラッグイベント

ドラッグ後の処理設定ができます。

function( start, end, jsEvent, view )

ドラッグイベント後に日付クリックイベントが走る場合があります。
ドラッグ処理する場合は日付クリック処理は不要かもです。

イベント

イベント情報を格納しています。

event:[{
id: 999,
title: 'タイトル',
start: '2014-09-09T16:00:00',
end: '2014-09-09T20:00:00',
}]

  • id…idを設定します。同一idが複数ある場合、そのidも同様に変更されます。
  • title…カレンダーに表示するタイトルを設定します。
  • allDay…終日設定をします。
  • start…開始日時を設定します。
  • end…終了日時を設定します。
  • url…イベントクリックした際に遷移するURLを設定します。
  • className…classの設定をします。(イベントの背景色の変更等で使用します。)
  • editable…編集可否を設定します。
  • startEditable…開始日時の変更可否を設定します。
  • durationEditable…イベントの間隔(開始日時~終了日時の期間)の変更可否を設定します。
  • source…jsonデータやgoogleカレンダーのデータを取り込む際に使用します。
  • color…色を設定します。
  • backgroundColor…背景色を設定します。
  • borderColor…線の色を変更します。
  • textColor…文字色を変更します。

ソース

↓のソースは上記の設定を適応したものです。


	$(document).ready(function() {

		$('#calendar').fullCalendar({
			header: {
					left: 'prev,next today',
					center: 'title',
					right: 'month,agendaWeek,agendaDay'
				},
			defaultDate: '2014-09-12',
			editable: true,
			eventLimit: true, // allow "more" link when too many events
			eventLimitText:'その他',
			lang:'ja',
//ヘッダーの書式
columnFormat: {
	month: 'ddd',    // 月
	week: 'D[(]ddd[)]', // 7(月)
	day: 'D[(]ddd[)]' // 7(月)

},
// タイトルの書式
titleFormat: {
	month: 'YYYY年 M月',                             // 2014年9月
	week: 'YYYY年 M月 D日', 
	day: 'YYYY年 M月 D日[(]ddd[)]',                  // 2014年9月7日(火)
},
//more表示の書式
dayPopoverFormat:'YYYY年 M月 D日[(]ddd[)]',
// 月名称
monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
// 月略称
monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
// 曜日名称
dayNames: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
// 曜日略称
dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
// スロットの時間の書式
axisFormat: 'H:mm',
// 時間の書式
timeFormat: 'H:mm',

// ボタン文字列
buttonText: {
	prev: '前',
	next: '次',
	prevYear: '前年',
	nextYear: '翌年',
	today: '今日',
	month: '月',
	week: '週',
	day: '日'
},
//月曜日開始
firstDay:1,
//土日表示
weekends:true,
//終日スロットル表示
allDaySlot:true,
//終日スロットルタイトル
allDayText:'終日',
//agendaWeek、agendaDayの1時間4セル(15分間隔)で表示
slotDuration:'00:15:00',
//開始(終了)時間がない場合の設定
defaultTimedEventDuration:'03:00:00',
//スクロール開始時間
scrollTime:'09:00:00',
//スクロール時間の最大、最小の設定
minTime:'00:00:00',
maxTime:'24:00:00',
//日付クリック
    dayClick: function(date, jsEvent, view) {

        alert('クリックした時間: ' + date.format() + '\n座標: ' + jsEvent.pageX + ',' + jsEvent.pageY+'\nスケジュール: ' + view.name);
        // change the day's background color just for fun
        $(this).css('background-color', 'red');

    },
//イベントクリック
    eventClick: function(calEvent, jsEvent, view) {

        alert('イベント名: ' + calEvent.title + '\n座標: ' + jsEvent.pageX + ',' + jsEvent.pageY + '\nスケジュール: ' + view.name);

        // change the border color just for fun
        $(this).css('border-color', 'red');

    },
//ドラッグ可能
selectable:true,
selectHelper:true,
//ドラッグ後処理
select: function(start, end) {
	var title = prompt('イベントタイトル:');
	var eventData;
	if (title) {
		eventData = {
			title: title,
			start: start,
			end: end
		};
		$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
	}
	$('#calendar').fullCalendar('unselect');
},

			events: [
				{
					title: '終日イベント',
					start: '2014-09-01'
				},
				{
					title: 'イベント',
					start: '2014-09-07',
					end: '2014-09-10'
				},
				{
					id: 999,
					title: '繰り返しイベント',
					start: '2014-09-09T16:00:00'
				},
				{
					id: 999,
					title: '繰り返しイベント',
					start: '2014-09-16T16:00:00'
				},
				{
					title: '会議',
					start: '2014-09-11',
					end: '2014-09-13',
					startEditable:false,
					backgroundColor:'green',
					textColor:'black'
				},
				{
					title: 'ミーティング',
					start: '2014-09-12T10:30:00',
					end: '2014-09-12T12:30:00',
					durationEditable:false,
					color:'red'
				},
				{
					title: '昼会議',
					start: '2014-09-12T12:00:00'
				},
				{
					title: '出張',
					start: '2014-09-12T14:30:00',
					start: '2014-09-15T17:30:00'
				},
				{
					title: '誕生日',
					start: '2014-09-13T07:00:00',
					allDay:true
				},
				{
					title: 'グーグルにアクセス',
					url: 'http://google.com/',
					start: '2014-09-28'
				}
			]
		});
		
	});

ソースデモ

こちらより確認できます。

参考

総評

グーグルカレンダーに似たものを作成できるので慣れている人だと使いやすいのではないでしょうか。

バージョン2は2014年6月にリリースされたばかりなので、日本語の情報がほとんどない状態なので調べるのに苦労しました。

(日本語で紹介されているほとんどがバージョン1.5または1.6だと思います。)

バージョン2により月別の「more」表示ができるようになりますが、日付書式の融通が利かなくなるので用途によりバージョン使いわけたらいいかもです。

(月別は2.1、週別、日別は1.6等)

 

 - JavaScript, jQuery, 備忘録, 開発 , , ,