Kota's Blog

SvelteでFullCalendarを使う

2020-09-23 Programming

そもそもSvelteって何なんという方はこちらを見ていただければ大体わかると思います。

JavaScriptでは割と定番な(はず)のカレンダーライブラリ、FullCalendar。今年7月にv5もリリースされてコミュニティも活発なんですが、なぜかSvelteに対応していないという体たらく。
というわけで今回はNuxtより早いとか噂されておいて日本で全く知名度の上がらないSvelteでFull Calendarを使う方法をお伝えします。

サードパーティーのライブラリはあります。普通に

さも1からSvelteに対応させますみたいなタイトルですが、Svelte用のFullCalendarライブラリはだいぶ前からあります。ただ、僕の観測範囲で日本語の文献(というか英語の文献も)が全く見当たらず、エラーが出たらGitHubで直接Issueを投げる以外の解決策がなかったので、これからSvelteでカレンダー機能を使いそうな人のために備忘録を残しておくまでです。

開発環境

開発環境で何かが変わるわけではありませんが一応。

  • Mac OS BS 11.0 Beta
  • VSCode Version: 1.49.1
  • Google Chrome 85.0.4183.121（Official Build）
  • ビルドツール : Rollup (WebPackの場合は参考にならないかも)

1章 環境構築

仰々しく1章とか書きましたが2章までしかないので安心してください。

yarn addしていく

yarn add svelte-fullcalendar

まずはベースのモジュールを追加します。ただこれだけではクソも動かないのでカレンダーを表示するためのモジュールを追加していきます。

yarn add @fullcalendar/common @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

各パッケージについて説明します。

  • @fullcalendar/common … このパッケージを追加しないと実質的に動作しません。
  • @fullcalendar/core … このパッケージはベースとなるCSS、ローカライゼーションの際などに必要になります
  • @fullcalendar/daygrid … 名前でわかると思いますがdaygridのパッケージです。リストビューやタイムグリッドを使いたい場合は各々追加する必要があります。
  • @fullcalendar/interaction … このパッケージはクリックイベントなどイベントハンドラーを動作させるために必要です。

svelte-fullcalendar以外のパッケージは純正のFullCalendarと同じものを追加するだけなのでハマることはなさそうですね。ハマったらごめんなさい

rollup.config.jsの変更

rollup.config.jsに以下を追加します。

...
...
export default {
...
  resolve({
    browser: true,
    dedupe: ['svelte', '@fullcalendar/common'],
  }),
}

この解決策に辿り着くまで5時間くらい半ベソかきながらググってたのでこれは忘れずに追加してください。答えが見つかったissueがこちら

2章 コードを書いていく

環境構築ができたらあとはコードをカキカキするだけ。カレンダーだけでComponentに分けてもよし、そんな女々しいことはせずApp.svelteに直書きする暴挙に出てもよし。

モジュールをimportしていく

import FullCalendar from 'svelte-fullcalendar';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
import jaLocal from '@fullcalendar/core/locales/ja';

日本語対応する必要がなければjaLocalは必要ない。

CSSをimportしていく

import '@fullcalendar/core/main.min.css';
import '@fullcalendar/daygrid/main.min.css';

上のCSSを追加しないとレイアウト崩れます。下はdaygrid使う場合のみ。

オプションを定義する

const options = {
  droppable: true,
  editable: true,
  initialView: 'dayGridMonth',
  headerToolbar: { left: 'prevYear,prev,next,nextYear', center: 'title', right: 'today' },
  locale: jaLocal,
  buttonText: { today: '今月に戻る' },
  plugins: [dayGridPlugin, interactionPlugin],
  dateClick: (event) => handleDateClick(event),
};
// ドラッグイベントなどdateClick以外のJSイベントも普通に動きます
const handleDateClick = (event) => {
  console.log(event);
};

ここは純正のFullCalendarのオプション表記とほぼ同じです。buttonText,initialViewなどv5で表現の変更されたフラッグもありますのでご注意ください。

FullCalendar v5 Release Notes

表示するだけ

<div class="Calendar">
  <FullCalendar {options} />
</div>

もちろんoptions = {options}と表記しても構いません。

動作確認

yarn run dev

適当な日付をクリックすると…

よき。

終わりに

svelte-fullcalendarのリポジトリにサンプルも用意されていますのでそちらも参考になるかと思います。

svelte-fullcalendar/examples/svelte

まだまだ資料が少なくとっつきにくいSvelteですが、体感できるほどには高速なので一度試してると良いと思います。GitHubのIssueも飽和状態というわけではないので数日以内に返信来ると思います。

参考

svelte-fullcalendar
svelte-fullcalendarがWeb上で試せるやつ
唯一見つけた英語のsvelte-fullcalendarの記事

全投稿に戻る