Xamarin.Forms で Nuget のカレンダーを使う(1)


初投稿です。Xamarin.Forms を使って何でもいいからスマフォアプリが作りたくて勉強中。

今回やりたいこと

Xamarin.Forms でカレンダーの表示・利用。
ただ Android の CalendarView みたいなものがないので、どうすればいいのか…と思案。調べてもなかなか出てきません。各ネイティブ層で別々に作るか、それらしいのを自力で作るしかないのかと思ったところで、Nuget に有志が作ってくれたパッケージがあることを知り、それを試してみることにしました。

Android/iPhone 両方で作りたいのですが、今は iMac 環境が無いのでとりあえず Android 環境でのみ確認しておきます。

使うのは Nuget にあった XamForms.Controls.Calendar です。

環境

  • Visual Studio 2017 v15.5.5
  • .NET Framework 4.7
  • Xamarin.Forms 2.5
  • Android Emulator x86 (v6.0 API23)

事前準備

  1. [ツール]->[ソリューションのパッケージの管理] を開く
  2. 今回は XamForms.Controls.Calendar v1.1.1 を選択
  3. 「インストール」ボタンを押下してインストール

基本表示

カレンダーを貼り付けたい XAML の ContextPage に以下文を追加します。

Sample.xaml
xmlns:controls="clr-namespace:XamForms.Controls;assembly=XamForms.Controls.Calendar"
  1. カレンダーを貼り付けたい XAML に以下文を追加
Sample.xaml
            <controls:Calendar Padding="10,0,10,0" StartDay="Sunday" 
                               SelectedBorderWidth="4" DisabledBorderColor="Black" />

cs ソースは変更なし。
単純にカレンダーを表示させるだけならこれで OK です。

属性

XamForms.Controls.Calendar は結構属性が多いです。
以下は一例。どっかに API ないのかしら…

属性 概要 指定文字
TitleLabelTextColor 年月表示の色を指定する
TitleLabelFormat 年月表示のフォーマットを指定する e.g.) "YYYY年 MM月"
StartDay 開始曜日の指定 曜日
SelectedBorderWidth 選択した日の枠の太さ 数字
Padding 前後左右の余白 左幅,上幅,右幅,下幅,
DatesTextColor 年月に該当する日々の色を指定する

取り合えずデフォルトでは 2 2018 みたいな感じでダサいので、 TitleLabelFormat 属性でいいフォーマットにしておいたほうが良さそうです。

Sample4.xaml
            <controls:Calendar Padding="10,0,10,0" StartDay="Sunday" 
                               SelectedBorderWidth="4" DisabledBorderColor="Black"
                               TitleLabelFormat="yyyy年MM月" />

画面遷移と土日祝日の設定

続きを書きました。
Xamarin.Forms で Nuget のカレンダーを使う(2)

リンク

基本的な使い方は本家参照。
https://github.com/rebeccaXam/XamForms.Controls.Calendar