概要
FullCalendarは、日・週・月などのカレンダー表示へイベントを配置し、ドラッグ操作や表示切替を追加できるJavaScript UIライブラリです。Vanilla JSのほかReact、Angular、Vue向けの公式connectorがあります。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日:
複数のcalendar viewとイベント表示を組み立てる
dayGrid、timeGridなどのpluginを組み合わせ、イベントのタイトル・開始日時などをカレンダー上へ表示できます。
interaction pluginでドラッグ編集を追加する
interaction pluginを有効にすると、イベントのドラッグやユーザー操作に応じた編集UIを構成できます。
予約・シフト・予定管理のカレンダー画面に
スケジュール、予約、社内予定などをカレンダー形式で表示・操作するWebアプリのUI基盤に向きます。
出典:[2]
bundleサイズとconnector構成を選ぶ
Standard Bundleは導入しやすい代わりに個別plugin構成よりファイルサイズが大きくなります。フレームワーク統合では公式connectorの版も合わせて確認してください。
出典:[2]
参考にした公式資料
- [1]fullcalendar/fullcalendar repository(2026-09-21)
- [2]FullCalendar README(2026-09-21)
- [3]FullCalendar documentation(2026-09-21)
- [4]FullCalendar vanilla package(2026-09-21)
- [5]FullCalendar MIT license(2026-09-21)
編集部からの補足
FullCalendarのStandardリポジトリはMITライセンスで、現在のvanillaパッケージは7.1.0です。READMEは標準bundleを導入しやすい一方でファイルサイズが大きくなると説明しています。React/Angular/Vueは別の公式connectorリポジトリもあるため、採用する統合方法を先に決めてください。
3ステップで試す
- 1
FullCalendarを追加
公式READMEのStandard Bundleを使う最短導線です。
npm install fullcalendar - 2
Calendarと必要なpluginを読み込む
表示したいviewとinteractionに必要なpluginを選んで読み込みます。
import { Calendar } from 'fullcalendar'; import dayGridPlugin from 'fullcalendar/daygrid' - 3
Calendarを生成して描画
最小のイベントを表示し、必要に応じてinteraction pluginやframework connectorを追加します。
const calendar = new Calendar(document.getElementById('calendar'), { plugins: [dayGridPlugin], events: [{ title: 'Meeting', start: new Date() }] }); calendar.render()
成長
成長の推移 · 直近30日
20,645 Stars
推移データを蓄積中です。
開発アクティビティ
直近90日・週次
- Commit(直近30日)
- 102
- Open PR
- 58
開発アクティビティを蓄積中です。
Built with
カテゴリとタグ
カテゴリ
GitHubデータ
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- Puter43,567 Stars
共通タグ 2件 · 共通カテゴリ 2件 · 同じ言語
ブラウザ内でファイルやアプリを扱うデスクトップ環境。Webアプリ向けのストレージ、データベース、AIも提供します。
TypeScript - Angular101,020 Stars
共通タグ 2件 · 共通カテゴリ 1件 · 同じ言語
component・DI・routing・forms・SSR・CLIを一体化し、frontend architectureを統一するTypeScript web application platform。
TypeScript - Mermaid90,334 Stars
共通タグ 2件 · 共通カテゴリ 1件 · 同じ言語
flowchart・sequence・UML等をMarkdown-like textで記述し、codeと同じGit workflowで管理できるdiagrams-as-code library。
TypeScript - Redux61,490 Stars
共通タグ 2件 · 共通カテゴリ 1件 · 同じ言語
Application全体のStateをStoreに集約し、ActionとReducerで予測可能に更新するJavaScript/TypeScript向けState Management Library。現在はRedux Toolkitが公式推奨。
TypeScript - Expo52,361 Stars
共通タグ 2件 · 共通カテゴリ 1件 · 同じ言語
React Nativeを土台にAndroid・iOS・Webを一つのproject modelで開発し、Router/Modulesをまとめるuniversal app framework。
TypeScript
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。