お知らせ

お知らせ NEWS

【FileMaker】日付配列を使ったカレンダーを作成する方法

2023年9月6日 ／マージBLOG、システム開発、お知らせ
おはようございます。お久しぶりです
最近は開発の仕事もちょくちょくやってます、WEBデザイナーの中山です。

今回はFileMakerでこのようなカレンダーを作る方法を紹介していきます。





まずはデータベースの管理（Ctrl+Shift+D）を開き、画像左上にある年月日のフィールド（タイプ：日付）を作成しましょう。
データは仕様に合わせて好きに設定してください。
今回はサンプルとして各月の1日を選択できるように調整しています。


次に、日付配列を作成します。
こちらが1日から31日（末日）まで表示させる部分になっています。


再びデータベースの管理を開いて日付配列フィールド（タイプ：計算）を作っていきます。
左下にある項目の「計算結果：日付」「繰り返し数：31」を設定するのをお忘れなく。

Date(

Month ( Extend ( 年月日 ) ) ;

Day ( Extend ( 年月日 ) ) ;

Year ( Extend ( 年月日 ) )

)-1

 +

Get ( 計算式繰り返し位置番号 )


これで最低限必要なフィールドは揃いました。


次に、レイアウトモード（Ctrl+L）に切り替えて年月日のフィールドを配置します。
今回は年月（日は1日で固定）を自由に選択できるように「フィールド入力」欄の「ブラウズモード」にチェックを入れています。
また、入力を楽にするために「コントロールスタイル」は「ドロップダウンカレンダー」にしています。


次に、選択した年月を表示する見出しを作成します。
この見出しは表示用なので先述した「ブラウズモード」のチェックを入れないようにしましょう。
見出しの書式は「2023年1月」にしたいのでデータの書式設定で「その他」を選択し、以下のように設定しましょう。
前置文字の「ゼロ」を「なし」にするのもお忘れなく。



最初は普通に日付配列のフィールドを作成します。


次に、「繰り返しを表示」欄の上限値を「31」、
右側にある縦並び横並びのボタンの「横並び」を押すと以下のように連続した数字が表示されます。


幅を調整するとこのようになります。


ブラウズモードで見た様子です。


次に、曜日欄を追加しましょう。
とても簡単です。先ほどの配列を複製し、データの書式設定でこのように曜日だけが表示されるようにします。


なんと、これだけで曜日も表示されるようになりました。


これを利用することで何も書かれていないスペースも作ることができます。
データの書式設定ですべての項目を「なし」にします。


この日付配列を上から被せたり背景用の枠線としても活用できます。
日付ごとに置く用のフィールドがあったとしても、位置をチマチマ調整する手間も省けます。



日付・曜日・枠線の欄をまとめて選択し、右クリックの「条件付き書式」を選択します。


このような条件付き書式を追加します。
「DayOfWeek (Self)=1」は日曜日、「DayOfWeek (Self)=7」は土曜日を表しています。それぞれ好きな色を選択してください。


だいぶ形になってきましたね。



さて、今の状態では31日が末尾ではない月を選択した場合に、来月分の日付が表示されてしまいます。


これを防ぐために白い図形で覆います。
カバー用の図形を作成します。日付ごとにグループ化すると後々楽だと思います。

計3つに複製し、29、30、31の欄を覆います。
また、この図形の「次の場合にオブジェクトを隠す」欄にそれぞれ表示非表示の設定を書いていきます。


右側から行きましょう。まずは31日。


次に真ん中の30日。


次に29日。こちらはDate関数の日付を0にすることで、前月末日が取得できます。


こんな感じになりました。



カレンダーの作成は様々なところで使います。ぜひ活用してみてください。
中山（WEBデザイナー）
Skill／WEB制作（Illustrator, Photoshop, コーディング）、JavaScript、PHP、FileMaker