WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

カレンダーを実装できるjQueryプラグインFullCalendar

f:id:mmmmofu:20180313112605p:plain

公式サイト
fullcalendar.io

デモ
http://efu.sakura.ne.jp/web/fullcalendar/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>FullCalendar</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">
  <script src="jquery.min.js"></script>
  <script src="moment.min.js"></script>
  <script src="fullcalendar.js"></script>
  <script src="ja.js"></script><!-- 日本語表示にする -->
  <script src="script.js"></script>
</head>
<body>
  <div id="calendar"></div>
</body>
</html>
$(function(){
  $('#calendar').fullCalendar({
    editable: true,// イベントを編集する
    droppable: true,//イベントをドラッグできるか
    select: function(start, end, allDay) {
      console.log('日の枠内を選択したときの処理');
    },
    eventClick: function(calEvent, jsEvent, view) {
      console.log('イベントをクリックしたときの処理');
    },
    events: [
      {
        title: 'ひな祭り',
        start: '2018-03-03'
      },
      {
        title: 'ゴールデンウィーク',
        start: '2018-04-28',
        end: '2018-05-06',
      }
    ]
  });
});