FullCalendar のリソースタイムラインとリソース列は Premium の機能で、商用アプリでは有料のライセンスキーが必要です。ライセンスページには、無料で使える場合として、アプリ全体が AGPL の場合と、登録済みの非営利団体の場合が挙げられています。Needless UI のスケジューラーは、そのどちらも MIT ライセンスで提供し、繰り返しの予定と iCalendar ファイルにも対応しています。このガイドでは、Angular アプリを FullCalendar から Needless UI へ移行します。そのまま移せるもの、移せないもの、変換が必要なデータを順に見ていきます。
FullCalendar 7 の名前を使い、バージョン 6 で名前が異なる場合は角かっこで併記します。FullCalendar の Angular コネクターは Angular 16 から 22 に対応していますが、Needless UI には Angular 22 が必要です。
機能の比較
| 機能 | FullCalendar | Needless UI |
|---|---|---|
| リソースタイムライン：会議室や人ごとに1行 | Premium | 対応：1日、1週間、1か月 |
| 日表示と週表示でリソースを列に並べる | Premium | 対応 |
| 月、週、日の各ビュー | 無料 | 対応 |
| ドラッグで移動、リサイズ | 無料（別のリソースへの移動は Premium） | 対応。別のリソースへも移動できる。リサイズは終端だけで、始端からはできない。 |
| 時間を選択して予定を作成 | 無料 | 対応：ポインター、長押し、キーボードで選択 |
| 重複禁止などのルール | 無料：overlap と constraint のオプション | 対応：変更のたびに確認する allow 関数1つ |
| キーボードで予定を移動、リサイズ | アクセシビリティのドキュメントに記載なし（扱うのは ARIA ラベルと Tab キーでのフォーカス） | 対応：スクリーンリーダーで読み上げ |
| 繰り返しの予定 | 無料（rrule のプラグインとライブラリを使用） | 標準で対応：RFC 5545 のルール（EXRULE、RDATE、時間単位のルールは除く） |
| iCalendar（.ics） | 無料：フィードの読み込み | .ics ファイルの読み込みと書き出し |
| リスト表示と年表示 | 無料 | 今後数日の予定リスト（年表示はなし） |
| タイムゾーン | 無料：ローカル、UTC、名前付きのタイムゾーン | 非対応：受け取った時刻をそのまま表示 |
| グループ化、入れ子、複数列のリソース | Premium | 非対応：テンプレートで描画する1列のみ |
| 外部からのドラッグ＆ドロップ、背景イベント | 無料 | 非対応 |
| 印刷、仮想レンダリング | Premium | 非対応 |
| フレームワーク | Angular 16〜22、React、Vue、素の JavaScript など | Angular 22 と React 19 |
対応関係
| FullCalendar | Needless UI のスケジューラー |
|---|---|
<full-calendar [options]>、plugins、schedulerLicenseKey | <nui-scheduler>（オプションごとに入力があり、プラグインもキーも不要） |
initialView: 'resourceTimelineDay' | view="timeline"（1週間や1か月なら timelineSpan も指定） |
initialView: 'timeGridWeek' | view="week"（[(view)] で双方向バインディング） |
resources、events | [resources]、[events] |
resourceId、extendedProps | resource、data |
editable、selectable | editable、selectable |
select | (slotSelect)：{ start, end, allDay, resource } |
eventDrop、eventResize | (eventChange)：events を更新するまで何も動かない |
eventClick | (eventClick) |
eventOverlap、selectOverlap、eventAllow | [allow]：移動、リサイズ、選択を1つの関数で判定 |
slotDuration、snapDuration | slotMinutes、snapMinutes（分単位） |
slotMinTime、slotMaxTime、scrollTime | dayStart、dayEnd、scrollHour（時間単位） |
businessHours | [businessHours]：曜日は 1（月曜日）から 7 まで |
datesSet | (rangeChange) |
eventContent、resourceCellContent [resourceLabelContent] | nuiSchedulerEvent と nuiSchedulerResource のテンプレート |
locale、firstDay | locale（任意の BCP 47 タグ）、1〜7 の firstDay、文言を指定する labels |
会議室予約のタイムラインを両方で作る
会議室はリソース、予約は予定です。会議室の行に沿ってドラッグすると予約でき、予約をドラッグすると移動できます。1つの会議室に同時に入る予約は1件だけです。FullCalendar 7 と、その Premium のリソースタイムラインでは次のようになります。
Needless UI のスケジューラーでは次のようになります。
動作が異なる点は2つあります。FullCalendar は予約を自ら移動し、アプリがその変更を写し取ります。Needless UI のスケジューラーは変更を通知するだけで、events を更新して初めて変更が反映されるため、アプリのデータが唯一の情報源であり続けます。また、allow はただのコードで、ポインターでもキーボードでも変更のたびに呼ばれるため、ルールを自分でテストできます。このアプリは、会議室予約カレンダーのガイドで順を追って作っています。
データの変換
| FullCalendar | Needless UI |
|---|---|
終日の予定の end は予定の翌日 | 終日の予定の end は最終日なので、1日引く |
時刻の末尾に Z や、+02:00 などのオフセットが付くことがある | オフセットなしの時刻（例：2026-11-02T09:30） |
曜日は 0（日曜日）から 6。businessHours と firstDay で使う | 曜日は 1（月曜日）から 7（日曜日） |
期間は '00:30' のような文字列 | 数値：分または時間 |
| リソースは id 順、次にタイトル順に並ぶ | リソースは配列の順に並ぶ |
rrule はオブジェクト、exrule も使う | FREQ=WEEKLY;BYDAY=MO,FR のような RFC 5545 の文字列と、exdate |
America/New_York のようなタイムゾーン | 先に時刻を変換する。nuiSchedulerFromIcs(text, { timeZone }) は .ics ファイルを読み込みながら変換する。 |
足りない機能が必要なら
アプリがタイムゾーン、グループ化したリソース、外部からのドラッグ＆ドロップ、印刷に頼っている場合、スケジューラーはまだ FullCalendar の代わりになりません。必要な機能は Issue を作成してお知らせください。それ以外については、スケジューラーのページにすべての入力、出力、例が載っています。