FrontEnd

React Big Calendarの複数タイムゾーン対応

投稿日:2019年5月29日 更新日:

はじめに

こんにちは。カイザーです。最近、フロントエンドの勉強をしており、その中でReact Big Calendarでのタイムゾーン対応について、かなりハマったので共有します。

今回、ユーザが自由に(端末の地域設定とは別に)タイムゾーンを選択できるWEBサイトを構築していたのですが、React Big Calendarでは複数タイムゾーンに対応されていませんでした。
Issueでもタイムゾーン対応について議論されていますが、未だに複数タイムゾーンへの対応が組み込まれる気配がありません。(しかも、なんと3年も議論されています。)

この中で、主な開発者であるjquenseさんは、複数タイムゾーンへの対応をしない理由として「React Big CalendarはViewのレンダリングを行うのが責務であり、タイムゾーンの計算は責務外である」としています。
そのため、利用者からReact Big Calndarをラップすることで、複数タイムゾーンへの対応をするコードが投稿されていたため、そちらを参考に、説明していきます。

端末のタイムゾーンのみに対応する場合

これについては、特に難しいことはありません。React Big Calendarへの日時指定はDate型で行いますが、Date型はブラウザのタイムゾーンに依存する形となっているためです。
以下を実行してみると、UTCの2019年5月28日0時0分でイベント登録していますが、端末のタイムゾーンにローカライズされて表示されます。

こちらから実際に実行できます。
私の環境(Asia/Tokyo)で実行してみると、イベントは9時から19時までとなっています。
ブラウザのタイムゾーンに依存すれば良い場合は、これで良いのですが、ブラウザのタイムゾーンに依存せずに、表示する場合は、日時を変換させる必要があります。

複数のタイムゾーンに対応する。

ブラウザのタイムゾーンに依存せずに、複数のタイムゾーンに対応させるには、React Big Calendarのラッパを作成し、そこで日時を変換させる必要があります。
日時の変換には「moment」を使用します。

日時を指定のタイムゾーンに変換する

「moment」を使って、日時を変換する関数を作成します。

この関数は、先ほどのIssueに投稿されているプログラムからの引用となります。
momentをタイムゾーン指定で使用することで、Dateを「timeZoneName」引数で指定されたタイムゾーンに変換します。
React Big CalendarはDate型を必要としているため、最後に変換されたmomentの日時を使用して、Date型のインスタンスを返却します。

イベントの開始日時・終了日時を動的に設定する

「端末のタイムゾーンのみに対応する場合」では、BigCalendarへ渡すpropsの「startAccessor」と「endAccessor」に、それぞれ開始日時と終了日時が格納されているキーをStringで指定していました。
今回は、先ほどの「convertDateTimeToDate」関数を使用し、動的に日付を変更するため、propsの「startAccessor」と「endAccessor」を関数呼び出しに変更します。

startAccessor関数、endAccessor関数を経由させて、convertDateTimeToDate関数を呼び出しています。
また、BigCalendarに渡すpropsの、「startAccessor」と「endAccessor」に、それぞれ「this.startAccessor」「this.endAccessor」を指定することで、関数が呼び出されるようになります。
これでラップクラス「BigCalendarTz」は完成です。importも含めた全量は以下となります。

ラップクラス「BigCalendarTz」をタイムゾーン指定付きで呼び出す

呼び出す際は、以下のようになります。

この場合はstateのselectedTimeZoneに、String型でタイムゾーン名が入っている前提となります。

サンプルコード

CodeSandboxで実際に実行できます。
ドロップダウンからタイムゾーンを変更させると、リアクティブにカレンダーのイベントが更新されます。
2019年5月28日を選択した上で、タイムゾーンを変更させると、効果が分かりやすいです。
index.jsでタイムゾーンを選択するドロップダウンを実装しており、その内容をpropsでBigCalendarTzに渡しています。

さいごに

React Big Calendarで複数タイムゾーンに対応したい場合は、ぜひ試してみてください。

おすすめ書籍

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで React開発 現場の教科書 React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

react-icon

MUI Themeでカラー、シャドウ、フォントなどを設定する

1 はじめに2 Themeとは3 Themeのセットアップ4 Themeの設定方法4.1 Palette4.1.1 colorオブジェクト4.1.2 直接色を指定する4.2 Elevationのシャド ...

[React]MUIのコンポーネントを使用したUI作成(Button、Alert編)

1 はじめに2 MUI3 Button3.1 Buttonの実装3.2 Buttonの使い分け3.2.1 不可逆な操作など、より強調したい時の使い方4 Alert4.1 Alertの実装4.2 Ale ...

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

react-icon

【React初心者】改めて主要なhookの使い方

1 はじめに2 useState3 useEffect3.1 useLayoutEffect4 useCallback5 useContext6 さいごに7 おすすめ書籍 はじめに 今回はReactで ...

js

JSで緯度経度情報から住所を取得する

1 はじめに2 キーを取得する2.1 キーを取得する3 コード4 参考5 さいごに はじめに Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介 ...

フォロー

blog-page_side_responsive

2019年5月
 1234
567891011
12131415161718
19202122232425
262728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。