FullCalendarで土日の背景を塗りつぶすと罫線が消えてしまいます

いつもお世話になっております。

現在、Ver5のFullCalendarを試しています。
土日を水色とピンクで塗ったのですが、罫線まで塗りつぶされてしまいました。
webの情報を集めましたが、どうしたら罫線を塗りつぶさずに済むかが分かりませんでした。CSSの下の方に再度罫線を引くような方法を思いつきましたがうまくいきません。
以下がhtmlとcssです。過不足をご指導頂きたく存じます。

calendar.html
1<!DOCTYPE html>
2<html lang='en'>
3  <head>
4    <meta charset='utf-8' />
5    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.css">
6    <link rel="stylesheet" href="calendar.css"  />
7    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.js"></script>
8    <script>
9
10      document.addEventListener('DOMContentLoaded', function() {
11        var calendarEl = document.getElementById('calendar');
12        var calendar = new FullCalendar.Calendar(calendarEl, {
13            locale: 'ja',
14            buttonText: {
15            prev:     '<',
16            next:     '>',
17            prevYear: '<<',
18            nextYear: '>>',
19            today:    '今日',
20            month:    '月',
21            week:     '週',
22            day:      '日',
23            list:     '一覧'
24          },
25          initialView: 'dayGridMonth',
26
27          dayCellContent: function (e) {
28                    e.dayNumberText = e.dayNumberText.replace('日', '');
29                                        },
30          headerToolbar: {
31                    left: 'title',
32                    center: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
33                    right: 'prev,today,next'
34                         },
35          events: [
36                    {
37                        id: '1',
38                        title: 'event1',
39                        start: '2022-04-01',
40                        url: '#'
41                    },
42                    {
43                        id: '2',
44                        title: 'event2',
45                        start: '2022-04-20',
46                        url: '#'
47                    },
48                    {
49                        id: '3',
50                        title: 'event3',
51                        start: '2021-01-07',
52                        end: '2021-01-11', // 2021-01-10 23:59:59で終了
53                        url: '#'
54                    }
55                  ],
56        });
57
58        calendar.render();
59      });
60
61    </script>
62  </head>
63  <body>
64    <div id='calendar'></div>
65  </body>
66</html>

calendar.css
1th.fc-day-sat {
2    background-color: #eaf4ff;
3}
4th.fc-day-sun {
5    background-color: #ffeaea;
6}
7th.fc-day-sat .fc-col-header-cell-cushion {
8    color: blue;
9}
10th.fc-day-sun .fc-col-header-cell-cushion{
11    color: red;
12}
13td.fc-day-sat {
14    background-color: #eaf4ff;
15}
16td.fc-day-sun {
17    background-color: #ffeaea;
18}
19.fc-col-header-cell-cushion {
20    color: black;
21}
22.fc-daygrid-day-number {
23    color: black;
24}
25td.fc-day-sat .fc-daygrid-day-number {
26    color: blue;
27}
28td.fc-day-sun .fc-daygrid-day-number {
29    color: red;
30}
31
32td.fc-timegrid-slot {
33    height: 2.5em !important;
34    border-bottom: 0 !important;
35}
36

行動規範の内容に同意します

回答1件

ベストアンサー

直下にあるdivに背景色を付けてみてはいかがでしょう。

CSS
1th.fc-day-sat > div {
2    background-color: #eaf4ff;
3}

投稿2022/04/26 17:31

kei344

総合スコア69625

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.30%

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

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

質問する