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

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

ただいまの
回答率

89.64%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 794

skmsnd

score 1

前提・実現したいこと

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

1.予定の色の反映

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

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

2.予定のリンク削除

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

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

これで可能な筈です。

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/24 18:56

    ご回答ありがとうございます!

    1.予定の色変更に関しましては、今後の機能追加に期待することとします。
    まずは、満室の背景変更のアドバイスをもとにいろいろと試してみます。ありがとうございます。

    2.予定のリンク削除
    私が動作テストをした際はうまく出来なかったのですが、改めてコメントアウトしてみたところすんなりと成功しました。お恥ずかしいです。

    キャンセル

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる