fullCalendarで祝日を文字なしで日付を赤にしたい

Question

初心者です。
fullCalendarで祝日をgoogleから表示しているのですが、
「建国記念日」などの文字は表示させないで、日付だけ赤にしたいです。

  $(document).ready(function() {
    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,listYear'
      },
      displayEventTime: false, // don't show the time column in list view
    googleCalendarApiKey: 'XXX',
    eventSources: [
      {
        googleCalendarId: '[e-mail]',
      },
    ]
  });
});
</script>

<style>
/* 日曜日 */
.fc-sun {
    color: #FF0066;
}
</style>

日曜日などは、styleで色を変えられますが
js内のgoogleCalendarId:に限定して.fcの色を変えるには
どうしたらよいでしょうか？
よろしくお願いします。

Answer 1

これでどうでしょうか。

<script>
    $(document).ready(function () {
         $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,listYear'
            },
            displayEventTime: false, // don't show the time column in list view
            googleCalendarApiKey: 'XXX',
            eventSources: [
                {
                    googleCalendarId: '[e-mail]',

                    // この2行を追加
                    rendering: 'background',
                    color: "#ffd0d0"
                  },
              ]
        });
    });
</script>

Comments

[usapon]

ありがとうございます！
このように面をつけるやり方もあるのですね。
できれば、文字だけの色をかえる方法があったらいいなと
思っています。

Answer 2

こちらを試してみてください。

$('#calendar').fullCalendar({
  ...省略...
  eventRender: function(event, element) {
    if(event.source.googleCalendarId == '[e-mail]') {
      $('.fc-day-top[data-date=' + event.start._i + ']').css('color', '#FF0066');
      element.hide();
    }
  }
  ...省略...
});

1. 休日のeventのみ処理（4行目のif）
2. 休日のeventが設定されている日付の数字部分（.fc-day-top）の文字色を変える(5行目)
3. 休日のeventを非表示（6行目）

Comments

[usapon]

回答ありがとうございます！しかし、まだうまくいていません。。

eventSources: [
{
googleCalendarId: '[e-mail]',

eventRender: function(event, element) {
if(event.source.googleCalendarId == '[e-mail]') {
$('.fc-day-top[data-date=' + event.start._i + ']').css('color', '#FF0066');
element.hide();
}
}
}
]
このようにしたのですが、間違いでしょうか？？
何もわかっていなくてすみません。

[退会済みユーザー]

もう1階層上ですね。
eventSourcesの ] で閉じている下に追加してみてください。

＝＝＝＝＝
eventSources: [
{
googleCalendarId: '[e-mail]',
},
],
eventRender: function(event, element) {
（以下省略）
＝＝＝＝＝
※header, displayEventTime, googleCalendarApiKey, eventSourcesと同じ階層になります。

[usapon]

できました！すばらしいです！
どうもありがとうございます！！