複数のタイムゾーンに対応する。おすすめ書籍はじめにこんにちは。Calendarでのタイムゾーン対応について、かなりハマったので共有します。Calendarでは複数タイムゾーンに対応されていませんでした。Issueでもタイムゾーン対応について議論されていますが、未だに複数タイムゾーンへの対応が組み込まれる気配がありません。(しかも、なんと3年も議論されています。CalendarはViewのレンダリングを行うのが責務であり、タイムゾーンの計算は責務外である」としています。Calndarをラップすることで、複数タイムゾーンへの対応をするコードが投稿されていたため、そちらを参考に、説明していきます。端末のタイムゾーンのみに対応する場合これについては、特に難しいことはありません。Calendarへの日時指定はDate型で行いますが、Date型はブラウザのタイムゾーンに依存する形となっているためです。以下を実行してみると、UTCの2019年5月28日0時0分でイベント登録していますが、端末のタイムゾーンにローカライズされて表示されます。rootElement);こちらから実際に実行できます。私の環境(Asia/Tokyo)で実行してみると、イベントは9時から19時までとなっています。ブラウザのタイムゾーンに依存すれば良い場合は、これで良いのですが、ブラウザのタイムゾーンに依存せずに、表示する場合は、日時を変換させる必要があります。複数のタイムゾーンに対応する。Calendarのラッパを作成し、そこで日時を変換させる必要があります。日時の変換には「moment」を使用します。日時を指定のタイムゾーンに変換する「moment」を使って、日時を変換する関数を作成します。0);};この関数は、先ほどのIssueに投稿されているプログラムからの引用となります。momentをタイムゾーン指定で使用することで、Dateを「timeZoneName」引数で指定されたタイムゾーンに変換します。CalendarはDate型を必要としているため、最後に変換されたmomentの日時を使用して、Date型のインスタンスを返却します。動的に設定する「端末のタイムゾーンのみに対応する場合」では、BigCalendarへ渡すpropsの「startAccessor」と「endAccessor」に、それぞれ開始日時と終了日時が格納されているキーをStringで指定していました。今回は、先ほどの「convertDateTimeToDate」関数を使用し、動的に日付を変更するため、propsの「startAccessor」と「endAccessor」を関数呼び出しに変更します。endAccessorはタイムゾーンを動的に変化させるため、関数をセット/></div>);}}startAccessor関数、endAccessor関数を経由させて、convertDateTimeToDate関数を呼び出しています。BigCalendarに渡すpropsの、「startAccessor」と「endAccessor」に、それぞれ「this.startAccessor」「this.endAccessor」を指定することで、関数が呼び出されるようになります。これでラップクラス「BigCalendarTz」は完成です。importも含めた全量は以下となります。BigCalendarTz;ラップクラス「BigCalendarTz」をタイムゾーン指定付きで呼び出す呼び出す際は、以下のようになります。/></div>);}この場合はstateのselectedTimeZoneに、String型でタイムゾーン名が入っている前提となります。サンプルコードCodeSandboxで実際に実行できます。ドロップダウンからタイムゾーンを変更させると、リアクティブにカレンダーのイベントが更新されます。2019年5月28日を選択した上で、タイムゾーンを変更させると、効果が分かりやすいです。index.jsでタイムゾーンを選択するドロップダウンを実装しており、その内容をpropsでBigCalendarTzに渡しています。Calendarで複数タイムゾーンに対応したい場合は、ぜひ試してみてください。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。軽量JSフレームワークとして有名なVue.js。ChartsライブラリとCryptowatchAPIでローソク足を描画してみる。私たちは無料アプリもリリースしています、ぜひご覧ください。下記のアイコンから無料でダウンロードできます。