Help us understand the problem. What is going on with this article?

fullcalendarを使おう!

fullcalendarとは

オープンソースのjavascriptライブラリ。
カレンダーのUIや実装を簡単にできる優れもの。

導入方法~自分でダウンロードしたい場合~

https://fullcalendar.io/download
からダウンロード。

<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

というふうにソースで読み込む。
※moment.jsとjquery.jsも必要ですが上記でダウンロードした場合は入っています。

導入方法~パッケージ管理ツール(Node.js)で入れたい場合~

$ npm install fullcalendar
※入っていなければ$ npm install jQuery

import $ from 'jquery';
import 'fullcalendar';

というふうにソースで読み込む

使い方

<html>
<!--HTMLタグの中にこう↓↓書きます -->
<div id="calendar"></div>
</html>
<script type="text/javascript">
<!--scriptタグの中にこう↓↓書きますscriptタグの書き方はプロジェクト毎に変えてください-->
$(function() {
  // 初期処理
  $('#calendar').fullCalendar({
    // ここに各種オプションを書いていくと設定が適用されていく
  })
});
</script>

日本語化

<script src='fullcalendar/dist/locale/ja.js'></script>

を追加でheaderタグの中やfooterタグの中に書いて読み込みましょう。

各種オプションの中に入れられるものの紹介

header

カレンダー上部にコントロールなどを配置可能。

header{
    left:"prev,today,next", //ヘッダー左側
    center: 'title', //ヘッダー中央
    right: 'month,agendaWeek,agendaDay,listYear' //ヘッダー右側
}

同様にfooterもある。

events

ここに描画したいイベントをjson表記で渡すと描画することができる

events{
 {title:"test1",start:"2018-10-31",end:"2018-11-01"},
 {title:"test2",start:"2018-08-31T08:30:00",end:"2018-09-01T00:01:00"}
}

dayClick

日付をクリックした時にその日付の情報とjs情報、viewの情報を元にごにょごにょできる

dayClick: function(date, jsEvent, view) {
    //クリックした日付が取れるよ
    alert('Clicked on: ' + date.format());
  }

eventClick

イベントをクリックした時にそのイベント情報とjs情報、viewの情報を元にごにょごにょできる

eventClick: function(item, jsEvent, view) {
    //クリックしたイベントのタイトルが取れるよ
    alert('Clicked on: ' + item.title);
  }

eventDrop

イベントをドラッグアンドドロップした時に情報を元にごにょごにょできる

eventDrop: function(item, delta,revertFunc,jsEvent,ui, view) {
    //ドロップした情報
    alert('Clicked on: ' + item.title);
    //ドロップしたことを元に戻したいとき
    revertFunc();
  }

firstDay

週の初めの曜日番号を指定する

firstDays:1
//これで月曜日から始まるカレンダーが表示される

hiddenDays

隠したい曜日があれば曜日番号を指定する

hiddenDays:[1,3,5]
//これで月水金曜日が表示されなくなる

再描画をしたい時

再描画したい時はこの3行でカレンダーの再読み込みが可能。
関数化すると楽。

        $('#calendar').fullCalendar( 'removeEvents' );
        $('#calendar').fullCalendar( 'addEventSource',"イベントのデータをここに入れる" );
        $('#calendar').fullCalendar( 'rerenderEvents' );

まとめ

fullcalendarを使うとGoogle Calendarのようなカレンダーが簡単に実装することができます。
設定もかなり柔軟にできるのでいろいろ触ってみてください。

参考

https://fullcalendar.io/docs#toc

kei_0121
海外旅行好きのエンジニア(最近は開発から離れているため、職業不詳) 特技: ・世界一周で培った色々な国の言葉で自己紹介とトイレがどこにあるかを聞けること ・技術的な勉強の飲み込みが世界一悪い分、新人や初学者が何がわからないのか理解し説明できること 
frevoworks
AWSを用いたクラウドアプリケーションの開発・保守を行っています。
https://www.frevo-works.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away