JSPで行こう！

FullCalendarの更新処理

FullCalendarの更新処理

当たり前ですが、FullCalendar から元データ(例えばGoogleカレンダー)を直接更新することは出来ません。
やり方は２つあると思います。

  1. Googleカレンダーを修正して、FullCalendar へ反映させる。
  2. FullCalndar を修正して、Googleカレンダーへ反映させる。

普通は、２の方法だと思います。
ちょっと厄介なのが追加です。
FullCalendarのイベントの追加方法は、ボタンを設けて日付を入力してもらう方法のようです。
(サンプルが公開されています)
ドラッグ＆ドロップで追加できると良いのですが・・・。
ネットでの例を見ると大体は、イベントで処理を行うようです。

   dayClick: function(date, jsEvent, view) {
      alert('clicked ' + date.format());
    },
    selectable: true,
    select: function(start, end, jsEvent, view) {
      alert('selected ' + startDate.format() + ' to ' + endDate.format());
    }

上を追加して見ると、その動作が確認できます。
実際クリックすると、両方が反応するので、select だけで view を判断して
操作するほうが良さそうです。

もっと具体的な例が github に上がっていました。
fullcalendar-sample
少し長いコードですが、やってる事は良く解ります。
ただし、コードが少し古いのか、正しく動きません。
start、end を JavaScript 標準 Date と見ているようですが、現在の FullCalendar は、Moment  オブジェクトです。
少し修正したコードを載せておきます。
JSPだとテストが簡単なので助かります。

<%@ page contentType="text/html; charset=UTF-8" %>

<%
  request.setCharacterEncoding("UTF-8");
  String title = "カレンダー";

%>
<!doctype html>
<html>

<head>
<%@ include file="common_head.jsp"%>
<link rel='stylesheet' href='js/fullcalendar/fullcalendar.css' />
<script src='js/fullcalendar/moment.min.js'></script>
<script src='js/fullcalendar/fullcalendar.js'></script>
<script src='js/fullcalendar/locale/ja.js'></script>
<script>

// FullCalendar 操作用ワーク
function Event(title, start, end) {
  this.title = title;
  this.start = start;
  this.end = end;

  return this;
}

$(function() {

  var calendar = $('#calendar').fullCalendar({
    // ロケールは日本語
    locale: 'ja',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    // ボタンに表示される文字
    buttonText: {
    },
    axisFormat: 'H:mm',
    editable: true,
    // 予定の入っていない領域のクリック
    dayClick: function(date, jsEvent, view) {
      var event = new Event('新しい予定', date, date);
      editEvent(event, '新規イベント', false);
    },
    // 今回は使わない
    selectable: false,
    select: function(startDate, endDate) {
      alert('selected ' + startDate.format() + ' to ' + endDate.format());
    },
    // 予定の入っている領域のクリック
    eventClick: function(event) {
      if(event.end == null) {
        event.end = event.start;
      }
      editEvent(event, '予定の編集', true);
    },
    eventSources: [

      // テスト用の固定のイベント
      {
        events: [
          {
            title  : 'event1',
            start  : '2018-10-01'
          },
          {
            title  : 'event2',
            start  : '2018-10-03',
            end    : '2018-10-03'
          },
          {
            title  : 'event3',
            start  : '2018-10-05T12:30:00',
          }
        ],
        color: 'black',     // 枠の色
        textColor: 'yellow' // 文字色
      },
      {
        url: 'calendar_json.jsp', // Ajax
        color: 'yellow',
        textColor: 'black'
      }

    ]

  });

  /*
  ** CALENDAR FUNCTIONS
  */
  // イベントの追加または更新
  function operateEvent(state, event) {
    if(state == false) {
      calendar.fullCalendar('renderEvent', event, true);
    } else {
      calendar.fullCalendar('updateEvent', event);
    }
    //  Todo：Ajax による処理
  }

  /*
  ** EVENT FORM
  */
  function editEvent(event, title, state) {
    // Transform to dialog
    $('#dialogEditEvent').dialog({
      modal: true,
      title: title
    });

    // クリックされたイベント情報をフォームに設定
    $('#name').val(event.title);
    $('#start').val(event.start.format('YYYY-MM-DD HH:mm'));
    $('#end').val(event.end.format('YYYY-MM-DD HH:mm'));

    // FORMのイベント処理
    $('#editEvent').unbind().submit(function() {
      var el = $(this),
      title = el.find('#name').val(),
      start = el.find('#start').val(),
      end = el.find('#end').val();

      if(end == '') {
        end = start;
      }

      if(title != '' ) {
        event.title = title;
        event.start = moment(start);
        event.end = moment(end);

        operateEvent(state, event);

        $('#dialogEditEvent').dialog('close');
      } else {
        alert('Empty Fields Or Bad Date Format');
      }

      return false;
    });
  }

  // jQuery-UI datepicker の表示
  $('#dialogEditEvent').on('dialogcreate', function(event, ui) {
    $('#start').datepicker({ dateFormat: 'yy-mm-dd' });
    $('#end').datepicker({ dateFormat: 'yy-mm-dd' });
  });

});

</script>
<title><%=COMMON_TITLE%></title>
</head>

<body class="hide-sidedrawer">
<div id="content-wrapper" class="mui-container-fluid">
  <h1><%=title%></h1>
  <div id='calendar'></div>
  <div id="dialogEditEvent" style="display: none;">
    <form id="editEvent">
    <p>
      <label for"name">タイトル :</label>
      <input id="name" type="text"/>
    </p><p>
      <label for"start">開始時刻 :</label>
      <input id="start" type="date"/>
    </p><p>
      <label for"end">終了時刻 :</label>
      <input id="end" type="date"/>
    </p><p>
      <button type="submit" >登録</input>
    </p>
    </form>
  </div>
  <a href="/test/">メニューへ</a>
</div>
</body>
</html>

実行結果は下の画面の様になります。
Ajax でGoogle カレンダーからもイベントを取得しています。
更新処理は実装していませんが、Ajaxで作るのは簡単だと思います。

FullCalendar





« 前頁