【SwiftUI】FSCalendarの実装方法【イベント日表示と選択日表示の方法】

この記事では、SwiftUIでのFSCalendarの実装方法を紹介します。

実装例として、イベントがある日へのマーキング表示と選択されている日の表示方法を解説します。

 

◆動作検証環境

・ローカル環境:mac Catalina
・XCode:12.3
・SwiftUI:2.0
・iOS:14.0
・LifeCycle:SwiftUI App・FSCalendar:2.8.2

 

スポンサード

FSCalendarのインストール

FSCalendarのインストールの方法や、実装できるグラフの使用例等はこちらのサイトで確認できます。

FSCalendar

 

今回は、CocoaPodsを利用してFSCalendarのインストールを行います。

スポンサード

CocoaPodsのインストール

まずは下記のコマンドを実行してCocoaPodsをインストールします。

※すでにインストール済みの場合は、こちらの設定は必要ありません。

 

 

インストールが終わったら、次のコマンドで初期化を行います。

 

スポンサード

XcodeプロジェクトへCocoaPodsを導入する

 

導入の作業の前に、Xcodeのプロジェクトが開かれているか確認します。開いている場合はプロジェクトを閉じます。

 

プロジェクトディレクトリへの移動

 

CocoaPodsファイルの作成

 

 

Podfileの編集(Chartsの導入)

さきほどのpod init を行ったディレクトリにPodfile が作成されるので、内容を下記のように編集します。

 

編集後に下記コマンドでFSCalendar  のインストールを行います。

 

インストール後の更新作業は下記コマンドで行います。

 

 

対象のモジュールのインストール後からは、ProjectName.xcworkspace で作業、編集を行います(ProjectName.xcodeproj ではない。)

 

スポンサード

FSCalendarを使ってカレンダーの表示

 

プロジェクトにFSCalendar  の導入ができましたので、まずは基本となるカレンダーの表示を行います。

CalendarView.swiftファイルを作成し、下記のように編集します。

 

高さを指定してこちらのStructを呼びます

 

現在の段階で実行すると以下のように表示され、本日の表示、各日付の選択、前月、翌月へのページネーションができます。

 

FSCalendarを使ったカレンダー表示のカスタマイズ

 

makeUIView() メソッドに以下のコードを追加してカスタマイズを行います。

紹介している内容以外にも、カスタマイズの方法がありますのでサイトを参考にしてください。

 

上記のように編集し実行すると、下記のような表示となります。

 

FSCalendarカレンダーでイベント日表示と選択日表示の実装

 

次に、カレンダー表示でよく利用される、イベントがある日付にドットの表示、さらにユーザーが選択した日付に関連した表示等を行えるようにコードを編集します。

 

Coordinatorクラスの作成と利用

今回はSwiftUIのプロジェクト内でFSCalendarを利用するので、対応するためにCoordinatorクラスの作成、利用のための実装を行います。

UIKitのインポート、CalendarTestView内に、Coordinatorクラス、makeCoordinatorメソッドの作成、makeUIView内にdelegate、dataSourceの定義を行います。

 

これで現在までのCalendarTestViewを含むファイル全コードは以下の内容となります。

 

ビルドしてエラーが無い事を確認します。

 

選択日表示の実装

カレンダー上から選択した日付を表示する機能を実装します。

まずは、CalendarTestView の表示先に、Date 型のState 変数(CalendarTestView でBinding する)を定義し、それを表示します。

 

次に、Coordinatorクラスにcalendarメソッドを追加します。

 

これでカレンダー上で選択された日付がTextで表示されます。

 

イベント日表示の実装

Coordinatorクラスに、calendarメソッドを追加します。

今回の場合は、24-03-2021 の日程にドットを1個表示する実装内容です。

 

これで以下のように、2021年3月24日にドット表示がされます。

 

イベントが複数日ある場合

イベントが複数日ある場合以下のように変更します。

 

イベントの配列がDate型になっている場合は以下のように利用します。

 


以上、SwiftUIでのFSCalendarを使った実装例として、イベントがある日へのドットでのマーキング表示と選択されている日の表示方法を解説しました。