jQueryのプラグイン「FullCalendar」を使ってカレンダーを表示する方法【初心者向け】

プログラミング初心者向けに、jQueryのプラグイン「FullCalendar」を使ってカレンダーを表示する方法を解説しています。プラグインを利用すれば手軽にカレンダー表示ができるので、覚えておくと良いでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのライブラリであるjQueryでカレンダーを表示する方法を紹介します。

今回は、FullCalendarというjQueryプラグインを利用してカレンダーを表示しているので、ぜひ参考にしてみてください。

jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

カレンダープラグインFullCalendarの使い方

カレンダーを実装できるライブラリというのは実は多くありますが、今回は「Full Calendar」というプラグインを実装してみます。このプラグインは標準的なカレンダーを実装することができます。

基本的な使い方を説明しましょう。

ファイルを公式サイトからダウンロードしてHTMLに読み込ませましょう。

スクリーンショット 2016-09-02 16.16.30

上記ページの「Latest」からファイル一式をダウンロードして内部から以下5つのファイルを取り出しましょう。

  • fullcalender.min.css
  • moment.min.js
  • jquery-ui.custom.min.js
  • fullcalender.min.js
  • ja.js

以下の順番でHTMLに読み込みましょう。

「moment.min.js」をjQueryより先に読み込むようにしてください。

 

大石ゆかり

FullCalendarはカレンダーに関するプラグインなんですか?

田島悠介

googleカレンダーみたいな、jQueryで作成されたカレンダーなんだ。

大石ゆかり

予定表とかスケジュールとかWebページにあったら、良いですね。

田島悠介

そうそう。期間のスケジュールなんかも表示させることが出来るんだよ。さっそく基本のカレンダーを表示させてみよう!

 

HTML

<div id="calendar"></div>

JavaScript

<script>
  $('#calendar').fullCalendar();
</script>

上記記述で、基本的なカレンダーは動きます。

 

実際に使ってみよう

次にあるHTMLをコピーしてWebブラウザーでみてください。

「sample.html」というファイルと「js」ディレクトリの下に先ほど取り出した5つのファイルがある状態です。

 

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="fullcalendar.min.css" type="text/css">
    <script src="moment.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="jquery-ui.custom.min.js" type="text/javascript"></script>
    <script src="fullcalendar.min.js" type="text/javascript"></script>
    <script src="ja.js" type="text/javascript"></script>
    <title>jQuery</title>
  </head>
  <body>
    <div id="calendar">
      <script>
        $('#calendar').fullCalendar();
      </script>
    </div>
  </body>
</html>

ブラウザでの表示を確認してみましょう。

スクリーンショット 2016-09-02 16.44.07

 

標準的なカレンダーが表示されたと思います。

また、JavaScriptの中身を足すことで、コンテンツの幅を利かせることができます。jQueryはそういった意味でも上手に使うことで、Webページコーディングの幅が広がることでしょう。

 

以下に、JavaScriptの例をいくつか提示しておくので、参考にしながら自分なりの変更を加えてみてください。

「aditable」:trueにすることで、スケジュールの編集を可能にします。

「height」:ピクセルで高さを指定できます。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="fullcalendar.min.css" type="text/css">
    <script src="moment.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="jquery-ui.custom.min.js" type="text/javascript"></script>
    <script src="fullcalendar.min.js" type="text/javascript"></script>
    <script src="ja.js" type="text/javascript"></script>
    <title>jQuery</title>
  </head>
  <body>
    <div id="calendar">
      <script>
        $('#calendar').fullCalendar({
          adtitable: true,
          height: 960,
        });
      </script>
    </div>
  </body>
</html>

ブラウザでの表示を確認してみましょう。

スクリーンショット 2016-09-02 16.44.54

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

まとめ

jQueryでカレンダーを表示してみました。

予約サイトやイベントサイトなど日程を表示させる必要がある場合、カレンダーは必須になるので覚えておくと便利でしょう。

ぜひ、自分でいろいろカスタマイズしてみてください。

 

大石ゆかり

fullCalendar();メソッドが、カレンダーを呼び出す基本のメソッドって感じですか?

田島悠介

その通り!オプションなんかも設定すれば、期間スケジュールや日本語での曜日表示や、PHPプログラムなんかと連帯してデータを分けたり、別ファイルから取得することも出来るよ。

大石ゆかり

便利そうですけど、難しそうですねー。

田島悠介

JavaScriptやjQueryなどのプログラムに慣れてくると、カレンダーは簡単に作れるようになるんだよね。自分で作成してもいいかも。

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。