質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
Google カレンダー

Google カレンダーは、Google社が提供する無料のスケジュール管理ツールです。パソコンやスマートフォン、タブレットなどからアクセスし、スケジュールの追加・変更が可能。Googleアカウントがあれば誰でも使用できます。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

7827閲覧

FullCalendarでイベント名ごとに背景色を変えたい

SNP

総合スコア1

Google カレンダー

Google カレンダーは、Google社が提供する無料のスケジュール管理ツールです。パソコンやスマートフォン、タブレットなどからアクセスし、スケジュールの追加・変更が可能。Googleアカウントがあれば誰でも使用できます。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/05/07 06:50

前提・実現したいこと

FullCalendarでgoogleCalendarを読み込んで、床屋さんの予約状況・定休日を表示しています。
その際、「予約不可」「定休日」「残りわずか」などを色分けして、ぱっと見でわかりやすくしたいと思いますが、イベントタイトルを判別して背景色を変更することは可能でしょうか。
イベント名を判別して個別にクラス名をつけたらいいのかと思い、調べて記述してみたんですが動作しません。
ご教授いただけると幸いです。

試してみたソースコード

Java

1eventRender: function (event, element) { 2 element.addClass("fc-" + event.title.replace(/\s+/g, "_")); 3}

現状の記述

<script src='/js/main.min.js'></script> <script src='/js/ja.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { dayCellContent: function(e) { e.dayNumberText = e.dayNumberText.replace('日', ''); }, initialView: 'timeGridWeek', nowIndicator: true, headerToolbar: { left: 'prev,next', center: 'title', right: 'dayGridMonth,timeGridWeek' }, locale: 'ja', firstDay: 1, views: { timeGridWeek: { slotMinTime: '09:00:00', slotMaxTime: '20:00:00' } }, height: 'auto', navLinks: false, // can click day/week names to navigate views selectable: false, selectMirror: false, dayMaxEvents: true, // allow "more" link when too many events displayEventTime: true, // don't show the time column in list view slotLabelFormat: { hour: 'numeric', minute: '2-digit', omitZeroMinute: false, meridiem: 'short' }, googleCalendarApiKey: 'APIキー', events: 'カレンダーID', eventClick: function(arg) { // opens events in a popup window //window.open(arg.event.url, 'google-calendar-event', 'width=700,height=600'); arg.jsEvent.preventDefault() // don't navigate in main tab }, loading: function(bool) { document.getElementById('loading').style.display = bool ? 'block' : 'none'; }, eventRender: function (event, element) { element.addClass("fc-" + event.title.replace(/\s+/g, "_")); } }); calendar.render(); }); </script>

補足情報(FW/ツールのバージョンなど)

FullCalendarのバージョンはv5.6.0です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yhasegawa55

2021/05/07 09:11

Verは5ですか?4ですか?
SNP

2021/05/07 09:14

v5を使っています。
guest

回答1

0

ベストアンサー

eventDidMountで制御できます
ちょっとベタですが

Javascript

1document.addEventListener("DOMContentLoaded", function () { 2 const calendarEl = document.getElementById("calendar"); 3 const calendar = new FullCalendar.Calendar(calendarEl, { 4 initialView: "dayGridMonth", 5 initialDate: "2021-05-08", 6 events: [ 7 { 8 title: "予約不可", 9 start: "2021-05-08" 10 }, { 11 title: "定休日", 12 start: "2021-05-09" 13 }, { 14 title: "残りわずか", 15 start: "2021-05-10" 16 } 17 ], 18 eventDidMount: function (info) { 19 if (info.event._def.title=='予約不可') { 20 info.el.style.background='red' ; 21 } 22 if (info.event._def.title=='定休日') { 23 info.el.style.background='gray' ; 24 } 25 if (info.event._def.title=='残りわずか') { 26 info.el.style.background='pink' ; 27 } 28 } 29 }); 30 calendar.render(); 31});

投稿2021/05/07 23:41

yhasegawa55

総合スコア189

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SNP

2021/05/08 06:33

ありがとうございます! 思い通りに実装できましたm(_ _)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

Google カレンダー

Google カレンダーは、Google社が提供する無料のスケジュール管理ツールです。パソコンやスマートフォン、タブレットなどからアクセスし、スケジュールの追加・変更が可能。Googleアカウントがあれば誰でも使用できます。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。