Googleカレンダーをサイトに埋め込みたい時に
便利なライブラリを見つけたのでご紹介いたします！
「その名もFullCalendar」
iframeでも埋め込めますがそれだと見た目がイマイチなので
カスタマイズが自由にできるFullCalendarについて解説します
今回の記事は画像多めで解説していきます！
難しそうに感じますがAPIキーとIDが取得できればコピペで簡単に作成可能です！
完成した状態の確認
まずは完成した状態を確認します！
やっぱりFullCalendarの方がスタイリッシュでおしゃれですね！
しかもCSSで調整可能なので色の変更だったりカスタマイズが自由です！
FullCalendarを使った表示↓↓
iframeを使った表示↓↓
コード
色々解説見るのが面倒な方は一旦こちらのコードをコピペしてみましょう！
コピペ先のファイルはsectionsフォルダの中に新しくliquidファイルを作ってくださいね！
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
.fc-header-toolbar,
.fc-view-harness,
.fc-col-header, .fc-daygrid-body, .fc-scrollgrid-sync-table{
width: 100%;
max-width: {{ section.settings.width }}px;
margin: auto;
}
{%- endstyle -%}
<div class="page-width section-{{ section.id }}-padding">
<div id="calendar"></div>
</div>
<!-- FullCalendarライブラリ -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.6/index.global.min.js"></script>
<!-- FullCalendarのGoogleカレンダー用ライブラリ -->
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/google-calendar@6.1.6/index.global.min.js"></script>
<script>
const calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
googleCalendarApiKey: "{{ section.settings.ApiKey }}",
events: {
googleCalendarId: "{{ section.settings.CalendarId }}"
},
timeZone: "Asia/Tokyo",
locale: "jp",
dayCellContent: function(arg){
return arg.date.getDate();
},
});
calendar.render();
</script>
{% schema %}
{
"name": "googleカレンダー埋め込み",
"settings": [
{
"type": "text",
"id": "ApiKey",
"label": "GoogleカレンダーAPIキー"
},
{
"type": "text",
"id": "CalendarId",
"label": "GoogleカレンダーID"
},
{
"type": "range",
"id": "width",
"min": 400,
"max": 1000,
"step": 10,
"unit": "px",
"label": "カレンダーの最大幅",
"default": 1000
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 32
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 32
}
],
"presets":[
{
"name" : "googleカレンダー埋め込み",
"category": "カスタムパーツ"
}
]
}
{% endschema %}
管理画面上ではこんな表示になります↓↓
・APIキーとIDの入力
・カレンダーの最大幅
・上下の余白
こちらの３つの項目をスキーマで設定しています
【解説】full calendarを使って埋め込み
管理画面で赤枠の部分に
Google CalendarのAPIキーとGoogleカレンダーのIDを入力していただければ埋め込み完了です
埋め込みにあたって
Google CalendarのAPIキーとGoogleカレンダーのIDが必要になりますので
次にGoogle CalendarのAPIキーとGoogleカレンダーのIDの
取得方法について解説していきます↓↓
Google CalendarのAPIキーの取得
①Google Developer Consoleにアクセスします
②新しくプロジェクトを作成します
③プロジェクト名を入力し作成（今回はshopify-google-calendar）
④APIサービスの有効化をクリック
⑤「calendar」と検索する
⑥Google Calendar APIをクリックし有効化
有効化をクリック↓↓
⑦認証情報の認証情報を作成（APIキー）をクリック
⑧APIキーを編集
ウェブサイトを選択しADDボタンを押して制限を追加します！
埋め込むサイトのURLを入力（ショピクラだとhttps://store.machitake.com/）
キーを制限しGoogle Calendar APIを選択する
最後に保存を忘れないように！
⑨認証情報に戻り鍵を表示します
こんな情報が出てくるのでコピーしておきます
これでAPIキーの取得は完了です
GoogleカレンダーのIDの取得
①Googleカレンダーに入っていただき、マイカレンダーの：をクリック
②設定と共有に入っていただき
③カレンダーの設定の下の方に「カレンダーID」があるのでコピー
これでカレンダーIDの取得は完了です
【おまけ】iframeを使って埋め込み
せっかくなのでiframeを使った埋め込みも解説していきたいと思います。
埋め込みコードの取得
GoogleカレンダーのIDの取得で解説した手順②までは同じ手順になります
違う点はカレンダーIDではなく埋め込みコードをコピーするところです
カレンダーの設定の下の方に埋め込みコードがあるのでコピー↓↓
埋め込みコードの貼り付け箇所
カスタムLiquidセクションにiframeを貼り付けます
※page-widthとcenterクラスをつけて中央に配置しています。
まとめ
どうでしたか？意外と簡単でしょう？
営業日カレンダーなどGoogleカレンダーと同期できたら何かと便利ですよね
一番難しいのはAPIキーの取得の部分ですかね？
GoogleはUIがたびたび変わるので、
添付画像と違う表示が出てくる可能性もありますので戸惑わないように注意してくださいね！
※2023/09/06現在は添付画像の表示を確認しております
FullCalendarは色々なカスタマイズがあるので
是非一度ドキュメントを除いてみてくださーい！！
