Fullcalendar日本語リファレンス:基本的な使用法

スポンサーリンク
Pocket
LINEで送る

基本的な使用法

Webページ上いカレンダーを埋め込むためには、JavaScriptとCSSファイルを読み込ませる必要があります。
あなたはFullCalendarのスタイルシートだけでなく、FullCalendar本体、jQuery、およびmoment.jsをタグに入れます

<script src="lib/jquery.min.js"></script>
<script src="lib/moment.min.js"></script>
<script src="fullcalendar/fullcalendar.js"></script>

jqueryとmomentjsはfullcalendarの前に読み込ませる必要があります。

もし、ドラッグやリサイズを行う計画がある場合は、いくつかの追加の依存関係が必要な場合があります。詳しくはこちらを見てください

カレンダーをWebページに表示するなら以下のコードを実行します。

スポンサーリンク
$(document).ready(function(){
    //ページは、カレンダーを初期化し、準備ができました...
    $('#calendar').fullCalendar({
         //ここにあなたのオプションとコールバックを置きます
    })
});

「calendar」というIDを持った要素に配置されます

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

オプション

カレンダーの外観や動作を変更するオプションについて説明します。

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

これで土曜日、日曜日が非表示になります。

コールバッグ

$('#calendar').fullCalendar({
    dayClick: function() {
        alert('a day has been clicked!');
    }
});

上記はユーザーが日をクリックするたびにアラートが表示されます。