FullCalendar에서 드래그 앤 드롭으로 날짜 변경

fullcalendar 축제입니다.

【기술 스택】
- Laravel 6.0
- AdminLTE 3 (Composer로 Laravel에 설치)
- jQuery 3.3.1+ (AdminLTE에 기본적으로 포함됨)
- FullCalendar 5.3.2 (AdminLTE에서 기본적으로 들어있는 것은 오래되었으므로 별도의 새로운 버전을 CDN으로 도입)
- moment.js (CDN으로 도입)

전체의 거친 흐름

캘린더 일정 드래그 앤 드롭

이벤트의 id와 날짜 (드래그 앤 드롭 후)를 취득해, Ajax로 컨트롤러에 POST로 취득한 값을 보낸다

컨트롤러 측에서 JS 측에서 보낸 값으로 레코드를 업데이트하고 save

신경이 쓰이는 부분을 잡아 갑니다.

document.addEventListener("DOMContentLoaded", function () {
  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
    },
    locale: "ja",
    editable: true,
    googleCalendarApiKey: "GoogleCalendarのAPIKEY",
    eventSources: [
      {
        googleCalendarId: "[email protected]", //休日の予定を取得
        rendering: "background",
        color: "#FF6666",
      },
      {
        googleCalendarId: "自分のカレンダーID",
      },
    ],
    events: "/getevents",
    selectable: true,

    eventDrop: function (info) {
      $.ajax({
        //POST通信
        type: "post",
        //ここでデータの送信先URLを指定します。
        url: "/dropevents",
        dataType: "json", //データ形式を指定
        data: {
          dropped_date: moment(info.event.start).format("YYYY-MM-DD"), //dropped_dateをキーにして値を送信
          id: info.event.id, //idをキーにして値を送信
        },
      }).then((res) => {
        console.log(res);
        calendar.render();
      });
    },
  });
  calendar.render();
});

// コントローラー側
  public function getEvents() // イベントの取得
  {
    // user_idを持たせておく
    $data = [];
    $authUser = Auth::user()->id;
    $events = Event::where("user_id", "=", $authUser)->get();
    $data = $events;

    echo json_encode($data);
  }

  public function dropEvents(Request $request) // ドラッグ&ドロップしたときの挙動
  {
    $event = Event::find($request->id); // JSから送信されたidで該当イベントを検索
    $event->start = $request->dropped_date;
    $event->save();
  }

캘린더 일정은 events: "/getevents" 에서 취득하고 있습니다.

eventDrop: function (info) 에서 드래그 앤 드롭했을 때의 거동을 나타냅니다. 이 때 Ajax 통신을하고 있습니다.

드래그 앤 드롭하면,data: { dropped_date: moment(info.event.start).format("YYYY-MM-DD"), id: info.event.id, }의 값이 컨트롤러로 전송됩니다.
DB의 날짜 형식이 YYYY-MM-DD이지만 달력에서 보낸 값은 Fri Nov 20 2020 00:00:00 GMT+0900 (日本標準時) 형식이므로 moment.js에서 YYYY-MM-DD 형식으로 형식화됩니다.

calendar.render(); 에서 캘린더를 다시 그립니다.

예정 「아아아아아아」를, 20일에 움직이면・・・


실시간으로 DB 값이 업데이트되어 페이지를 다시 로드하지 않아도 일정이 20일로 이동하고 있음을 확인할 수 있었습니다.