FullCalendar イベントを重複させない方法

はじめに

カレンダー内の赤枠に囲まれたイベントを下のイベントに重ねようとしたときに、禁止マークが出て重ねる事ができないような設定方法についてまとめました。

使用例としては、予約管理システムで時間の重複が許されないようなケースがあります。

関連リンク

関連リンクを下記に載せておくので、必要であれば参考にしてください。。

• 【Rails】 5分でFullCalendar実装する方法
  • https://qiita.com/syukan3/items/68280ce4ff45aa336363

前提条件

FullCalendarをアプリケーションに実装済みであること。

今回はRailsアプリケーションで実装しています。上記の記事を参考にしてみてください。
Railsを使ったことがない人でも簡単に実装することができますので、この機会にRuby と Railsをインストールして使ってみてください。
※Rails アプリケーション以外でも実装する事ができます。

実装

javascript のfullCalendar内に eventOverlap: falseを追加するだけで完了です。

app/assets/javascripts/application.js

    $('#calendar').fullCalendar({
        // ***省略***

        // month: "月",  agendaWeek: "週", agendaDay: "日"
        // ここ
        eventOverlap: false,

        // ***省略***

まとめ

FullCalendar がとても強力なライブラリとなっているので、爆速で開発を進めたいケースに適用してみてください。

参考

• FullCalendar 公式ドキュメント
  • https://fullcalendar.io/