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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

jQuery

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

Q&A

解決済

2回答

1680閲覧

FullCalendarを使い1つのカレンダーだけで予定の色を変更したい

skmsnd

総合スコア7

Google カレンダー

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

jQuery

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

0グッド

0クリップ

投稿2019/07/23 03:32

前提・実現したいこと

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

情報が不足している箇所、不明な点などあるかもしれません。
解決策がありましたらご指導いただけますと大変助かります。
宜しくお願い申し上げます。

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

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

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

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

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

guest

回答2

0

ベストアンサー

1.予定の色の反映

APIのレスポンスの中身を一通り見ましたが、googleCalendarApiで取得する情報の中に「予定の色」の情報はないっぽいですね・・?
なので、「予定の色」で色を分ける、、、ということは無理なのかも;;

後は、表示される「タイトルテキスト」を元に、「満室」の文字が含まれていれば「赤」・・・
のような判別方法での色分けが可能なのであれば、
fullcalendarで、イベントが表示される時のcallback関数eventRenderをつかえば、表示色を変更することは出来そうです。

2.予定のリンク削除

こちらは、「削除」は出来ないようですが、

window.openだけコメントアウト

これで可能な筈です。

eventClick: function (event) { return false; },

※ return false; は消しちゃダメです。

投稿2019/07/24 07:41

mix-peach

総合スコア1910

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

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

skmsnd

2019/07/24 09:56

ご回答ありがとうございます! 1.予定の色変更に関しましては、今後の機能追加に期待することとします。 まずは、満室の背景変更のアドバイスをもとにいろいろと試してみます。ありがとうございます。 2.予定のリンク削除 私が動作テストをした際はうまく出来なかったのですが、改めてコメントアウトしてみたところすんなりと成功しました。お恥ずかしいです。
guest

0

最終的な記述を残しておきます。

1.予定の色の反映
mix-peach様のアドバイスをもとに、タイトルを取得しての背景色の変更に成功いたしました。
記述に日本語が使用できることを今回の件で知りました。

2.予定のリンク削除
こちらもmix-peach様のご回答を参考に、該当記述をコメントアウトすることにより実現できました。

ありがとうございました。

<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); }, eventRender: function (event, element) { element.addClass("fc-" + event.title.replace(/\s+/g, "_")); } }); }); </script>

css

1/*fullcalendar.css*/ 2.fc-満室{background-color:#c30000;border: 1px solid #c30000;} 3.fc-○タイプA,.fc-△タイプA,.fc-×タイプA{background-color:#7eaec5;border: 1px solid #7eaec5;} 4/*以下種類ごとに*/

投稿2019/07/24 10:32

skmsnd

総合スコア7

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問