方言を話すおしゃべり猫型ロボット『ミーア』をリリースしました(こちらをクリック)

【FullCalendar】でGoogleカレンダーを埋め込み表示して装飾する

この記事は約4分で読めます。

はじめに

今携わっているプロジェクトで、ウェビナーをgoogleカレンダーで一覧表示するとともに、ウェビナー詳細ページから「googleカレンダーに登録」できる機能の実装をすることになったので、実装を記載。

Googleカレンダー埋め込み表示

Google カレンダーの API キーを取得する

Google Cloud コンソールにログインして、プロジェクトがない場合には、「新しいプロジェクトを作成」をクリックしてプロジェクトを作成する。既存のプロジェクトで良い場合は、既存プロジェクトを選択した状態にする。

「Google Calendar API」を検索し、「有効にする」をクリック

左サイドバーの、認証情報をクリックして、認証情報を作成をクリック

APIキー→APIキーを作成をクリック。APIキーが表示されるので、コピーしておく。

作成したAPIキーをクリック。デフォルトでは、アプリケーションの制限の設定の項目が「なし」になっている。

アプリケーションの制限の設定:ウェブサイト
ウェブサイトの制限:Googleカレンダーを埋め込みたいサイトのドメインをhttp://(https://)から入力()
API の制限:「キーを制限」を選択した後、「Google Calendar API」を選択する

これで、google calender apiの設定は終わり。次に、Googleカレンダーでの作業に移る。

Google カレンダーのカレンダー ID を取得する

  • Google カレンダーにログイン
  • サイトで表示したいカレンダーの「設定と共有」をクリック
  • 「カレンダーの設定」をクリック

予定のアクセス権限を「一般公開して誰でも利用できるようにする」にする。これを設定しないと、ウェビナーの詳細情報がカレンダー上で表示されない。

カレンダー設定画面に左サイドバーの「カレンダーの統合」をクリックし、表示される「カレンダー ID」をコピーしておく。

GoogleカレンダーをFullCalendarで埋め込み表示する

StudioでEmbedブロックを挿入する

ここからは個別事象にはなるが、今回StudioというノーコードWeb制作プラットフォームで作成された静的画面に対して、googleカレンダーを埋め込み表示するということを行うので、その場合について記載する。

https://studio.design/ja

Studioのデザインページを開き、左サイドバーを展開→追加タブ→ボックス→EmbedセクションのBlankを追加。

すると、iframeタグが表示され、右サイドバーに埋め込みコードが表示される。

埋め込みコードに、コードを挿入する。

FullCalendarライブラリーを使ってGoogleカレンダーを埋め込み表示

FullCalendar - JavaScript Event Calendar

googleカレンダーの埋め込みコードを利用した場合、カレンダーの見た目が固定でカスタマイズできないが、FullCalendar Javascriptライブラリを使えば、サイトにキレイな見た目のカレンダーを設置できる。

FlullCalendarにおけるgoogle calendarの表示制御は下記公式サイトに記載されている。

events from Google Calendar - Docs | FullCalendar
FullCalendar can display events from a public Google Calendar.

今回、ツールチップでイベントタイトルだけではなく、説明文も表示したかったので、

イベントに説明が含まれている場合(e.event.extendedProps.description !== undefined)、その説明をメッセージに追加している。説明文に含まれる <a> タグは target="_blank" を追加して新しいタブでリンクが開くように修正。

「GoogleカレンダーのAPIキー」と「GoogleカレンダーID」を、先ほど控えておいた各キーに置き換える。

HTML
<div id="calendar" class="calendar"></div>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/google-calendar@6.1.11/index.global.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
  googleCalendarApiKey: "GoogleカレンダーのAPIキー",
  events: {
      googleCalendarId:
        "GoogleカレンダーID",
  },
  initialView: "dayGridMonth",
  locale: "ja",
  editable: false,
  headerToolbar: {
    right: "prev,next" // 前後の月のナビを表示
  },
  showNonCurrentDates: false, // 前後の月の日にちを非表示にする
  firstDay: 1, // 月曜始まり
  contentHeight: "auto",
  dayCellContent: function (e) {
    e.dayNumberText = e.dayNumberText.replace("", "");
    return e.dayNumberText;
  },
  eventTimeFormat: { hour: "numeric", minute: "2-digit" },
  eventClick: function (info) {
    info.jsEvent.preventDefault();
  },
  eventDidMount: (e) => {
    let message = e.event.title;
    if (e.event.allDay === false) {
      const start = formatTime(e.event.start);
      const end = formatTime(e.event.end);
      message = start + "-" + end + " " + message;
    }
    if (e.event.extendedProps.description !== undefined) {
      let detail = e.event.extendedProps.description;
      detail = detail.replace('<a ', '<a target="_blank" ')
      message = message + '<div class="description">' + detail + '</div>';
    }
    tippy(e.el, {
      content: message,
      interactive: true,
      allowHTML: true,
    });
  }
});
calendar.render();

function formatTime(datetime) {
  const dateObj = new Date(datetime);

  const hours = dateObj.getHours();
  const minutes = dateObj.getMinutes();

  const formattedTime = `${hours}:${minutes.toString().padStart(2, "0")}`;
  return formattedTime;
}

</script>

下記のようにダミーの予定を作成する

予定が月単位で表示されて、目的のイベントにカーソルを合わせると、ツールチップが開き、予定のタイトルと内容が表示される。

今回、予定の内容にサイトへのリンクを入れたので、クリックすると該当のサイトに飛ぶ。ただ、配色は分かりづらいので要修正

カレンダーデザインをカスタマイズ

せっかくFullCalenderを使ったので、デザインをカスタマイズしたい。

先ほどのscriptタグの下に、styleタグでCSS部分を記載。

カレンダー全体の背景色を白に設定

  • .fcクラスに対してbackground-color: #fff;が設定

カレンダー上部のボタンのスタイル設定

  • .fc .fc-button-primaryクラスに対するスタイル設定により、前月と翌月へのボタンを白背景に黒文字で表示

ツールチップのスタイル設定:

ツールチップ(.tippy-box)を白背景に黒の境界線で表示し、.tippy-contentクラスを用いてツールチップ内のテキスト色を黒に設定。ツールチップ内のリンク(aタグ)は青色。

イベントのスタイル設定

イベントのタイトルと時間(.fc-event-title, .fc-event-time)を緑色に表示、イベント自体の背景色(.fc-event)は#d4edda(淡い緑色)に設定。

HTML

<style>
  /* カレンダー全体の背景色 */
  .fc {
    background-color: #fff;
  }
  /* カレンダー上部に表示する前月と翌月のボタン */
  .fc .fc-button-primary {
    background-color: #fff;
    border: 1px solid #d8d8d8;
    color: #000;
  }
  /* ツールチップ */
  .tippy-box {
    background-color: #fff;
    border: 1px solid #000;
  }
  .tippy-content {
    color: #000;
  }
  .tippy-content a {
    color: #007bff;
  }

  /* カレンダーに表示するイベント */
  .fc-event-title,
  .fc-event-time {
    color: #005f00;
  }
  .fc-event {
    background-color: #d4edda;
  }
</style>

styleタグ適用後は、下記のようになった。

めでたしめでたし♪

コメント

タイトルとURLをコピーしました