前提・実現したいこと
FullCalendarとgoogleCalendarApiKey・カレンダーIDを使い、宿泊施設の空室状況を1つのカレンダーで表示させています。
宿泊施設の部屋は3種類。タイプA・タイプB・タイプCがあり、部屋タイプごとに空室状況を予定として毎日登録しています。
【カレンダーイメージ】
1日 2日 3日
――――――――――
○A △A 満室
△B ×B
○C △C
1.予定の色の反映
Googleカレンダーの詳細設定で「予定の色」を変更しているものをFullCalendarの方にも反映させたいです。
「予定の色」は部屋タイプごとに変えたり、満室の場合は赤色にしたりしています。
色さえ変えることができれば、元の「予定の色」でなくとも構いません。
2.予定のリンク削除
予定の詳細表示不要。クリックさせずに表示させたいだけなので、リンク無しにしたいです。
該当のソースコード
参考サイトからコピペしたままです。キーやIDだけ省略しています。
<script> $(document).ready(function () { $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,listYear' }, displayEventTime: false, googleCalendarApiKey: 'APIキーが入ります', events: 'カレンダーIDが入ります', eventClick: function (event) { window.open(event.url, 'gcalevent', 'width=700,height=500'); return false; }, loading: function (bool) { $('#loading').toggle(bool); } }); }); </script>
試したこと
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
情報が不足している箇所、不明な点などあるかもしれません。
解決策がありましたらご指導いただけますと大変助かります。
宜しくお願い申し上げます。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/24 09:56