Blog

多機能のカレンダーを実装するjQueryプラグインのFullCalendar

Googleカレンダーのようなカレンダーを実装することができるjQueryプラグインに、

FullCalendar」というものがあります。

 

多機能で、標準的なカレンダーだと、簡単に実装することができ、

オプションも豊富です。

 

ただ、オプションが豊富すぎて、実際使うときに迷ってしまいましたので、

基本的な使い方や、私が使ったオプションについてまとめてみました。

 

基本的な使い方

1.ファイルをダウンロードして、HTMLに読み込む

↓こちらのページの「Latest: fullcalendar-x.x.x.zip」からファイル一式をダウンロードします。

Download | FullCalendar

ダウンロードしたら、「fullcalendar.min.css」、「moment.min.js」、「jquery-ui.custom.min.js」、「fullcalendar.min.js」、

そして 必要に応じて、「ja.js」をダウンロードしたファイルから探し出して、適宜ディレクトリに配置します。

 

そして、以下の順番で、HTMLに読み込みます。

moment.min.jsをjQueryより先により先に読み込まないとエラーになりますので、気をつけてください。

 

2.HTMLにカレンダーを読み込むDIVを用意し、FullCalendarを呼び出す。

HTML

 

JavaScript

 

基本はこれで動きますが、

実際にはオプションを設定して、カスタマイズしていくのが通常だと思いますので、

すべてではありませんが、1日のスケージュール表示で使うものを中心に一部ご紹介いたします。

 

 オプション

 

追記:

イベントの絞り込みを行う方法のご紹介を追加いたしました

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ