質問: ### 前提・実現したいこと FullCalendarとgoogleCalendarApiKey・カレンダーIDを使い、宿泊施設の空室状況を1つのカレンダーで表示させています。 宿泊施設の部屋は3種類。タイプA・タイプB・タイプCがあり、部屋タイプごとに空室状況を予定として毎日登録しています。 【カレンダーイメージ】 1日 2日 3日 ―――――――――― ○A △A 満室 △B ×B ○C △C **1.予定の色の反映** Googleカレンダーの詳細設定で「予定の色」を変更しているものをFullCalendarの方にも反映させたいです。 「予定の色」は部屋タイプごとに変えたり、満室の場合は赤色にしたりしています。 色さえ変えることができれば、元の「予定の色」でなくとも構いません。 **2.予定のリンク削除** 予定の詳細表示不要。クリックさせずに表示させたいだけなので、リンク無しにしたいです。 ### 該当のソースコード 参考サイトからコピペしたままです。キーやIDだけ省略しています。 ``` ``` ### 試したこと **1.予定の色の反映について** (1)FullCalendarのデフォルト設定では「予定の色」をすべて一色で表示されるため、それっぽいbackground-colorの記述をコメントアウトしましたが、元の「予定の色」は出ませんでした。 (2)【カレンダーを複数登録して、カレンダーIDごとに色を変える】という方法は見つけました。 ですが、あくまでも1つのカレンダーで完結させたいと考えています。 **2.予定のリンク削除について** eventClickをコメントアウトしたり、window.openだけコメントアウトしたりしましたが駄目でした。 現在はCSSで下記のように記述し、無理矢理ですがクリック出来ないようにしています。 ``` .fc-view-container a{pointer-events: none;} ``` ### 補足情報(FW/ツールのバージョンなど) FullCalendar v3.9.0 情報が不足している箇所、不明な点などあるかもしれません。 解決策がありましたらご指導いただけますと大変助かります。 宜しくお願い申し上げます。
回答: > > 1.予定の色の反映 > > > APIのレスポンスの中身を一通り見ましたが、googleCalendarApiで取得する情報の中に「予定の色」の情報はないっぽいですね・・? なので、「予定の色」で色を分ける、、、ということは無理なのかも;; 後は、表示される「タイトルテキスト」を元に、「満室」の文字が含まれていれば「赤」・・・ のような判別方法での色分けが可能なのであれば、 fullcalendarで、イベントが表示される時のcallback関数`eventRender`をつかえば、表示色を変更することは出来そうです。 > > 2.予定のリンク削除 > > > こちらは、「削除」は出来ないようですが、 > > window.openだけコメントアウト > > > これで可能な筈です。 ``` eventClick: function (event) { return false; }, ``` ※ return false; は消しちゃダメです。