02:15更新1.概要カレンダーは、登録されたスケジュールなどのデータを時間単位や日にち単位の様々なカレンダー形式で表示させることができるコントロールです。スワイプでの週移動などモバイルらしいUIを簡単に実現でき、パラメーター設定でデザインをカスタマイズできます。以下では、「2.開発の手引き」にて、カレンダーでよく使う機能にかかわるサンプルプログラムがダウンロードできるほか、「3.パラメーター」では、カレンダーに設定するパラメーターのリファレンスを記載しています。2.開発の手引きこの記事では、カレンダーコントロールを使いこなすうえで、よく使うパラメーター設定をご紹介します。解説で使用しているサンプルプロジェクトは以下よりダウンロードできますので、ぜひご活用ください。control_calendar.zip2-1.カレンダーを配置するカレンダーコントロールには、月、週、週:日毎、日といったバリエーションがあり、同じスケジュールを複数の形式で表現することが可能です。画面設計機能の左側のコントロールバーから「カレンダー」を選択し、作成した画面上でドラッグすることでカレンダーを配置することができます。ここでは4つのフォームを作成し、それぞれにカレンダー(月)、カレンダー(週)、カレンダー(週:日毎)、カレンダー(日)を配置します。各カレンダーの特徴は次のとおりです。カレンダー(月)1ヶ月分のカレンダーを日にち単位で表示します。日付の横に祝日の名称などを表示させることができます。カレンダー(週)1週間分のカレンダーを時間単位で表示します。時間単位の表示なので予定の開始時刻や所要時間がひと目で確認できます。カレンダー(週:日毎)1週間分のカレンダーを日にち単位で表示します。予定と共に開始時刻と終了時刻が表示されます。カレンダー(日)1日分のカレンダーを時間単位で表示します。複数人の予定を分けて表示させることができます。2-2.テーブルを作成するカレンダーに予定を表示させ、または予定の色を変更するためには、2つのテーブルを作成し、カレンダーと連携させることが必要となります。作成するテーブルの定義や、初期データの登録方法について説明します。2-2-1.予定を登録するテーブルカレンダーに表示される予定を格納するテーブルとなります。サンプルプロジェクトでは、「01_予定テーブル」として以下の要領で定義してありますので参考にしてください。テーブルの各項目は、各カレンダー選択時にプロパティーエリアに表示される「データ」>「内容」の各項目に対応しています。「color」「fontcolor」のデータはARGB値10進変換、「icon」はデータリソースファイルのキーワードです。リソース設定についてはTOPメニューの「プロパティー」から以下の要領で設定します。各項目のデータがカレンダー上でどのように表示されるかについては、下記「2-3.カレンダーとテーブルを連携する」をご覧ください。2-2-2.配色を設定するテーブルカレンダーの配色を設定するテーブルを用意することで、特定の条件(曜日、日付など)に合致する場合の日付の色や予定の背景色、文字色などを設定できます。サンプルプロジェクトでは、「02_カラーテーブル」として以下の要領で定義してありますので参考にしてください。テーブルの各項目は、各カレンダー選択時にプロパティーエリアに表示される「データ」>「色テーブル」の各項目に対応しています。「backcolor」「fontcolor」「fontcolor_dayside」のデータはARGB値10進変換です。「conditions」のデータは、日付や曜日の条件が設定可能です。設定可能なデータは以下のとおりです。Sun日付を設定した場合は、その日が選択されます。曜日を設定した際は、その曜日の日がすべて選択されます。毎月第三月曜日のように固有の日を指定する場合には、曜日のあとに数字を付けます。数字をマイナスに表記にすることで最終の曜日からカウントできます。データが、カレンダー上でどのように表示されるかについては、「2-3.カレンダーとテーブルを連携する」にて説明します。2-2-3.データを登録する上記で定義したテーブルにデータを格納するためにはロジックを作成する必要があります。ロジック作成についてはここでは詳細に説明いたしませんが、サンプルプロジェクトでは「カレンダー初期データ登録ロジック」として、アプリ起動時に2つのテーブルに対して自動でデータを登録する処理を用意してありますので、ご参照ください。2-3.カレンダーとテーブルを連携するプロパティーエリアの「データ」からテーブルとの連携を設定することができます。予定テーブルは「データ」>「内容」から、配色テーブルは「データ」>「色テーブル」から設定します。予定を登録するテーブル」で作成したテーブルを指定してください。各プロパティー項目に対応するテーブル項目を設定します。「開始日時」から「終了日時」まで、「色」の色を背景色としたボックスに「文字色」の色で「内容」の値が「アイコン」とともに表示されます。サンプルプロジェクトにおける格納データ、テーブル項目、プロパティー項目と画面表示の関係性は以下のとおりです。・配色テーブルプロパティーエリアの「データ」>「色テーブル」の「色テーブル」の項目に上記「2-2-2.配色を設定するテーブル」で作成したテーブルを指定してください。各プロパティー項目に、対応するテーブル項目を設定します。「開始年月」と「終了年月」の間で「色テーブル条件」に適合する日について、背景を「色テーブル色」の色に、日付を「色テーブル文字」の色に変更します。「色テーブル内容」の値を「色テーブル内容文字色」の色で日付の右側に表示できます。サンプルプロジェクトにおける格納データ、テーブル項目、プロパティー項目と画面表示の関係性は以下のとおりです。2-3-2.カレンダー(週)・予定テーブル同様に、「データ」>「内容」からテーブルを指定します。「開始日時」から「終了日時」まで、「色」の色を背景色としたボックスに「文字色」の色で「内容」の値が「アイコン」とともに表示されます。「終日タスク」が”1”となっているスケジュールは、カレンダー上部の「allday」欄に表示されます。サンプルプロジェクトにおける格納データ、テーブル項目、プロパティー項目と画面表示の関係性は以下のとおりです。・配色テーブル同様に、「データ」>「色テーブル」からテーブルを指定します。「開始年月」と「終了年月」の間で「色テーブル条件」に適合する日について、日付を「色テーブル文字」の色に変更します。サンプルプロジェクトにおける格納データ、テーブル項目、プロパティー項目と画面表示の関係性は以下のとおりです。2-3-3.カレンダー(週:日毎)・予定テーブル同様に、「データ」>「内容」からテーブルを指定します。「開始日時」から「終了日時」まで、「色」の色を背景色としたボックスに「文字色」の色で「内容」の値が「アイコン」とともに表示されます。「終日タスク」が”1”となっているスケジュール以外のスケジュールには開始時刻と終了時刻が表示されます。サンプルプロジェクトにおける格納データ、テーブル項目、プロパティー項目と画面表示の関係性は以下のとおりです。・配色テーブル同様に、「データ」>「色テーブル」からテーブルを指定します。「開始年月」と「終了年月」の間で「色テーブル条件」に適合する日について、日付を「色テーブル文字」の色に変更します。サンプルプロジェクトにおける格納データ、テーブル項目、プロパティー項目と画面表示の関係性は以下のとおりです。2-3-4.カレンダー(日)・予定テーブル同様に、「データ」>「内容」からテーブルを指定します。「開始日時」から「終了日時」まで、「色」の色を背景色としたボックスに「文字色」の色で「内容」の値が「アイコン」および「セル内アイコン」とともに表示されます。「終日タスク」が”1”となっているスケジュールは、カレンダー上部のallday欄に表示されます。「グループ入力」に表示させたいグループIDを記入すると「グループID」に応じて区分して表示されます。サンプルプロジェクトにおける格納データ、テーブル項目、プロパティー項目と画面表示の関係性は以下のとおりです。・配色テーブル同様に、「データ」>「色テーブル」からテーブルを指定します。「開始年月」と「終了年月」の間で「色テーブル条件」に適合する日について、日付を「色テーブル文字」の色に変更します。サンプルプロジェクトにおける格納データ、テーブル項目、プロパティー項目と画面表示の関係性は以下のとおりです。3.パラメーターパラメーターを変更することで、簡単にカレンダーの位置や大きさ、色や形、表示する画像などを設定することができますので、それらを活用して、デザイン性に富んだ、わかりやすい画面を作成してみましょう。画面操作時に呼び出す動作を設定することで、アプリユーザーがカレンダーの予定をタッチしたりクリックしたりした際に、アプリにさまざまな動作を実行させることができます。カレンダーの種類は、以下の4種類となります。名称コントロール名を入力します。サイズコントロールの幅と高さを指定します。位置コントロールの位置を左と上から指定します。余白コントロールの余白を左と右と上と下から指定します。種類コントロールの種類を表示します。ある場合に選択します。使用可コントロールを使用可能にする場合にチェックします。表示コントロールを表示する場合にチェックします。前次切替ボタンを表示する場合にチェックします。簡易描画チェックON時には予定を「・」だけの簡易式で描画します。データ内容フォーム表示内容の取得先にフォームで指定しているテーブルを使用する場合に選択します。テーブル表示内容の取得先にテーブルを使用する場合に選択します。テーブル名カレンダーに紐付けるテーブルを選択します。開始日時スケジュールの開始日時フィールドを選択します。終了日時スケジュールの終了日時フィールドを選択します。内容スケジュールの内容フィールドを選択します。色スケジュールごとの色フィールドを選択します。文字色スケジュールごとの文字色フィールドを選択します。アイコンスケジュールのアイコンフィールドを選択します。ヘッダー書式カレンダーヘッダーの書式を指定します。色テーブル色テーブルカレンダー背景色に紐付けるテーブルを選択します。色テーブル色カレンダー背景色テーブルの色フィールドを選択します。色テーブル文字カレンダー背景色テーブルの日付文字色フィールドを選択します。色テーブル内容カレンダー背景色テーブルの内容フィールドを選択します。色テーブル内容文字色カレンダー背景色テーブルの内容文字色フィールドを選択します。色テーブル開始年月カレンダー背景色テーブルの開始年月フィールドを選択します。色テーブル終了年月カレンダー背景色テーブルの終了年月フィールドを選択します。色テーブル条件カレンダー背景色テーブルの条件フィールドを選択します。デザイン色と形フォントフォントを指定します。サイズフォントのサイズを指定します。文字を太字にする場合にチェックします。文字位置を[左揃え][左右中央揃え][右揃え]の何れか選択します。予定行数スケジュールの最大表示行数を指定します。通常フォント前景色を指定します。通常塗りつぶし背景色を指定します。罫線と枠線の色を指定します。選択フォント選択日時の前景色を指定します。選択塗りつぶし選択日時の背景色を指定します。選択日時の罫線と枠線の色を指定します。ヘッダーフォントヘッダーの前景色を指定します。ヘッダー塗りつぶしヘッダーの背景色を指定します。ヘッダー罫線/枠線ヘッダーの罫線と枠線の色を指定します。曜日ヘッダーフォント曜日ヘッダーの前景色を指定します。曜日ヘッダー塗りつぶし曜日ヘッダーの背景色を指定します。曜日ヘッダーの罫線と枠線の色を指定します。数行の背景色を指定します。ボタンフォント前次切替ボタンの前景色を指定します。ボタン塗りつぶし前次切替ボタンの背景色を指定します。前次切替ボタンの罫線と枠線の色を指定します。当日フォント当日セルの前景色を指定します。当日塗りつぶし当日セルの背景色を指定します。別月日フォント別月日セルの前景色を指定します。別月日塗りつぶし別月日セルの背景色を指定します。使用不可フォント無効時の前景色を指定します。使用不可塗りつぶし無効時の背景色を指定します。