.net column
.NET開発者のためのブログメディア

カレンダー

jQueryのプラグイン「FullCalendar」を使ってWebページにカレンダーを表示する方法

2020年01月07日

お店のホームページや予約サイトなどで、カレンダーを表示したいと思ったことはありませんか?「一からプログラムするのは時間がかかるし、かといってテンプレートを使うと自分好みにカスタマイズができないし……」と悩んでいる方に朗報です。

実は、jQueryのプラグインを使えば簡単にカスタマイズ可能なカレンダーを作ることができるのです。この記事では、jQueryのカレンダープラグインである「FullCalendar」について使い方を分かりやすく解説していきます。

PG
数行のコードだけで綺麗なカレンダーが表示できるのですね。
PM
見た目が綺麗なのでユーザーにとっても使い勝手が良いため、おすすめです。

jQueryのカレンダープラグイン|FullCalendarとは

FullCalendar実装

「FullCalendar」とは、カレンダーを表示させることができるjQueryのオープンソースプラグインです。
※オープンソース:ソースコードが公開されているということ。つまり、誰でも利用できる。

FullCalendarを使うと、スッキリと整ったデザインのカレンダーを簡単に作ることができます。月表示・週表示・日表示の切り替えも簡単に実装することができるため、便利です。(普通にプログラムを書こうと思ったらとても大変です)

また、オプションを活用すれば100種類以上のカスタマイズも可能で、Webサイトのデザインに合ったオリジナルカレンダーを手軽に作ることができます。

では、さっそく使い方を見ていきましょう。

jQueryのFullCalendarでカレンダーを表示させよう

はじめに、下記URLにアクセスし最新バージョンの「FullCalendar」をダウンロードしておきます。
(配布サイト)
https://fullcalendar.io/docs/getting-started

FullCalendarダウンロードリンク

解凍すると、以下のようなファイル構成になっています。

FullCalendarファイル構成

ここからは、上記の中の「packages」フォルダーの中のファイルを利用していきます。
以下のように階層を作ってみてください。
※【】[]はフォルダー/-はファイル
※Sample.htmlはご自身で作成してください。

では次に、以下のようにコードを書いてみましょう。

書けましたら、さっそくSample.htmlへアクセスしていきましょう。

FullCalendar表示

拍子抜けするほど簡単にカレンダーが表示できました。この記事では一番簡単なサンプルを挙げましたが、「dayGrid」以外のプラグインやCSSを追加することで、よりオリジナリティのあるカレンダーを作ることができます。

PG
グーグルカレンダーのようなカレンダーが出来上がりましたね!
PM
月表示・週表示・日表示にも対応しているのですよ。いろいろ、カスタマイズしてみると面白いと思います。

FullCalendarでサクッと綺麗にカレンダーを作ろう

今回は、jQueryのFullCalendarというプラグインについてお伝えしました。実際に作ってみてお分かりいただけたかと思いますが、短時間と高機能とデザイン性を兼ね備えているのがFullCalendarの特徴です。Webサイトにカレンダーを表示しようと考えている方は、ぜひこの機会に利用してみてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs