【jQuery】FullCarendar

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

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

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

機能

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

使い方

$(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'
            }
        ]
    });

});

詳細設定

タイトル表示

週別、日別を表示

次、前表示

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

月別にて「more」表示

日本語表示

MomentjsのtoISOStringを使用

イベントの初期表示

開始曜日の設定

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

土日表示

終日スロットル表示（週表示、日表示の場合）

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

時間間隔（agenda系イベントのみ）

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

日区切り時間

スクロール開始時間

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

日付クリックイベント

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

ドラッグ

ドラッグイベント

イベント

• 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',

    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');

},

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

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

},

        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'
            }
        ]
    });

});

ソースデモ

    <p><a href="http://kaede.jp/sample/fullcalendar/2.1.1/demos/demo.html" target="_blank" rel="noopener">こちら</a>より確認できます。</p>

参考

    <ul>
      <li><a href="https://fullcalendar.io/" target="_blank" rel="noopener">fullCalendar</a></li>
      <li><a href="https://github.com/arshaw/fullcalendar/wiki/Upgrading-to-v2" target="_blank" rel="noopener">Upgrading to v2</a>(wiki GitHub)</li>
    </ul>
    <h2>総評</h2>
    <p>グーグルカレンダーに似たものを作成できるので慣れている人だと使いやすいのではないでしょうか。</p>

    <p>（日本語で紹介されているほとんどがバージョン1.5または1.6だと思います。）</p>
    <p>バージョン２により月別の「more」表示ができるようになりますが、日付書式の融通が利かなくなるので用途によりバージョン使いわけたらいいかもです。</p>
    <p>（月別は2.1、週別、日別は1.6等）</p>
    <p>&nbsp;