• sago11

Airtableのカレンダー機能

Airtableのカレンダー機能について解説します。

正確には、ビューの1つであるカレンダータイプについての解説です。

イベント管理のbase(Airtableでいう所の1ソリューションのこと)を題材に進めます。


イベント管理のシステムで、

  • 日程と参加者を管理

  • 日程と残数は自社サイトに公開したい

  • スマホでも見たい

という前提とします。



サクッと、イベント管理のテーブルを作ります。

参加者は「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を使えばボタン1つで済むかもしれません。


例えば、FileMakerで工事の日程を管理していて、外部の方に見て欲しい、その日の工事の進捗を記入して欲しい。という場合はAirtableが最適でしょう。


449回の閲覧

株式会社未来Switch

〒530-0041 大阪市北区天神橋2-5-25 若杉グランドビル本館1001

TEL : 06 - 6809 - 3297  FAX : 06 - 7635 - 8635 

  • Facebook Social Icon
  • Twitter Social Icon
  • Google+ Social Icon
  • YouTube Social  Icon

2016 Copyright © MiraiSwitch Inc. All Rights Reserved.