Airtableのカレンダー機能について解説します。
正確には、ビューの１つであるカレンダータイプについての解説です。
イベント管理のbase(Airtableでいう所の１ソリューションのこと)を題材に進めます。
イベント管理のシステムで、
日程と参加者を管理
日程と残数は自社サイトに公開したい
スマホでも見たい
という前提とします。
サクッと、イベント管理のテーブルを作ります。
参加者は「Link to another record」というフィールドタイプを使用します。
残数の計算は左記の様な計算式になります。
定員 - 参加者数 です。
COUNTA 関数で関連レコードを数を取得できます。
参加者テーブルはシンプルです。
左上のイベントをクリックして「add a view:」の右にあるCalendarを選択します。
どの日付を基準でカレンダーを作成するか聞いてくるので、開催日を選びます。
フィールドを選んで下さいとダイアログを出しつつ、既に裏で開催日を基準としたカレンダーが完成していますね。
カレンダーが出来ました。このビューから自社サイトに貼るカレンダーを作成していきます。
現状では、参加者の名前が見えてしまっているので、このビューでは表示しないようにしましょう。適当なイベントをクリックして参加者フィールドの設定を「Hide field」にしましょう。定員と残数が同じ数だとかっこ悪いので、定員も隠すことにします。
次は、画面上部中央の共有アイコンから「Create a shareable view link」をクリックします。
デフォルトでは公開カレンダーは見た時の日付になりますが、このブログ記事を後から見た時を考えて、デフォルトの日付を2020/01/03に設定します。この設定は通常は不要だと思います。
「Embed this view on your site」をクリックして下さい。
はい。完成しました。PCとモバイルそれぞれのプレビューが表示されます。
「Embed code」の下にある黒い枠のHTMLを自社サイトに貼り付けると完成です。
予定をクリックすると、参加者と定員は表示されていません。隠す設定が正しく動作しています。
実際に埋め込んだものがこちらになります。
自社サイトが無く、FacebookやTwitterしかない場合は直接開くリンクもあります。それをFacebook等に貼っておけば良いでしょう。
ピンク色の箇所のリンクで独立したカレンダーになります。
下の方に「iCal subscripton link」という項目があります。ここで生成されるリンクをGoogleカレンダーに取り込むことは出来るのですが、Airtable側で更新しても反映されません。
スマホでも見ることが出来ます。（iPhone 11 Pro)
予定をクリックすると、PCと同じ様に詳細が表示されます。
スマホで見ると電話のリンクが有効になるかと思いましたが、有効になりませんでした。
URLは正しく遷移します。
「View larger version」をクリックするとAirtableの色が反映されます。（フリープランでは色の指定は出来ません）
別の記事で書いたとおり、FileMakerとAirtableを容易に連携させることが出来ます。
例えば、自社のFileMakerソリューションで、カレンダーとして外部に公開したい場合はAirtableを使えばボタン１つで済むかもしれません。
例えば、FileMakerで工事の日程を管理していて、外部の方に見て欲しい、その日の工事の進捗を記入して欲しい。という場合はAirtableが最適でしょう。
Comments