【JavaScript】JQueryプラグインの「FullCalendar」を使ってカレンダーをサクッと表示してみる

2018年6月9日Javascript,開発

おはようございます。

ふと、WEBでスケジュール管理できる何かを作りたいと思い立ち
色々調べてみたら「FullCalendar」というJQueryプラグインがとても便利そうだったので試しに使ってみました。

1. ダウンロード
2. サンプルの作成
- 2.1. フォルダ構成
- 2.2. プログラムの記述
3. 起動してみる
4. まとめ

ダウンロード

https://fullcalendar.io/download

（執筆時点の最新バージョン）
fullcalendar-3.9.0.zip リンクをクリックしてソースをダウンロードします。

サンプルの作成

フォルダ構成

ダウンロードしたファイルを解凍し、次の構成で配置します。

│ index.html
├─css
│     fullcalendar.min.css
│     fullcalendar.print.min.css
│     style.css
├─js
│     fullcalendar.min.js
│     moment.min.js
└─lang
ja.js

index.html、style.css は今回作成するファイルです。

プログラムの記述

画面
index.html

<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="content-type" content="text/html;charset=UTF-8">
                <link rel="stylesheet" href="css/fullcalendar.min.css" media="all"/>
                <link rel="stylesheet" href="css/style.css" media="all"/>
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
                <script type="text/javascript" src="js/moment.min.js"></script>
                <script type="text/javascript" src="js/fullcalendar.min.js"></script>
                <script type="text/javascript" src="lang/ja.js"></script>
                <script>
                        // ページ読み込み時の処理
                        $(document).ready(function () {
                        
                                // カレンダーの設定
                                $('#calendar').fullCalendar({
                                        height: 550,
                                        lang: "ja",
                                        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');
                                        },
                                        editable: true,
                                        eventLimit: true, 
                                });
                        });
                </script>
        </head>
        <body>
                <div id='calendar'></div>
        </body>
</html>

<!DOCTYPE html>

<html>

<head>

// ページ読み込み時の処理

$(document).ready(function(){

// カレンダーの設定

$('#calendar').fullCalendar({

height:550,

lang:"ja",

selectable:true,

selectHelper:true,

select:function(start,end){

vartitle=prompt("予定タイトル:");

vareventData;

if(title){

eventData={

title:title,

start:start,

end:end

};

$('#calendar').fullCalendar('renderEvent',eventData,true);// stick? = true

}

$('#calendar').fullCalendar('unselect');

editable:true,

eventLimit:true,

});

</script>

</head>

<body>

</body>

</html>

スタイル
style.css

body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
}
#calendar {
        max-width: 900px;
        margin: 0 auto;
}                

html > body {
        font-family: 'Noto Sans Japanese','Segoe UI','Verdana','Helvetica','Arial', sans-serif;
}
.fc-left h2 {
        font-weight: normal;
}
.fc-widget-header th {
        background-color: #f8dbc6;
}
th.fc-day-header, th.fc-widget-header {
        color: #550000;
        font-size: 14px;
        font-weight: normal;
}
.fc-sun > span {
        color: #cd384b;
}
.fc-sat > span {
        color: #415ea6;
}
td.fc-sun {
        background-color: #fae6e3;
}
td.fc-sat {
        background-color: #dceef7;
}
.fc-unthemed .fc-content, 
.fc-unthemed .fc-divider, 
.fc-unthemed .fc-list-heading td, 
.fc-unthemed .fc-list-view, 
.fc-unthemed .fc-popover, 
.fc-unthemed .fc-row, 
.fc-unthemed tbody, 
.fc-unthemed td, 
.fc-unthemed th, 
.fc-unthemed thead {
        border-color: #d1ccd9;
}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
        float: left;
}

body {

margin:40px10px;

padding:0;

font-family:"Lucida Grande",Helvetica,Arial,Verdana,sans-serif;

font-size:14px;

}

#calendar {

max-width:900px;

margin:0auto;

}

html > body {

font-family:'Noto Sans Japanese','SegoeUI','Verdana','Helvetica','Arial',sans-serif;

}

.fc-left h2 {

font-weight:normal;

}

.fc-widget-header th {

background-color:#f8dbc6;

}

th.fc-day-header, th.fc-widget-header {

color:#550000;

font-size:14px;

font-weight:normal;

}

.fc-sun > span {

color:#cd384b;

}

.fc-sat > span {

color:#415ea6;

}

td.fc-sun {

background-color:#fae6e3;

}

td.fc-sat {

background-color:#dceef7;

}

.fc-unthemed .fc-content,

.fc-unthemed .fc-divider,

.fc-unthemed .fc-list-heading td,

.fc-unthemed .fc-list-view,

.fc-unthemed .fc-popover,

.fc-unthemed .fc-row,

.fc-unthemed tbody,

.fc-unthemed td,

.fc-unthemed th,

.fc-unthemed thead {

border-color:#d1ccd9;

}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {

float:left;

}

起動してみる

index.html をブラウザで開きます。

簡単にカレンダーが表示できました。

しかも日付をクリック、またはドラッグ（複数日）し、表示されるプロンプトにタイトルを入力すると簡単にカレンダーに予定が反映されます。

まとめ

WEBで何かサービスを作る場合、
カレンダーが必要であれば利用を検討してみるといいですね。

解凍したファイルにデモのソースも色々入っているので、
次回はもう少し掘り下げて触ってみたいと思います。

2018年6月9日Javascript,開発FullCalendar,Javascript,JQuery,カレンダー

Posted by doradora