xo-event-calendar は定休日や営業日の指定がとても簡単にできるので、ずっとたくさんのサイトで愛用していました。
cocoon × Xo Event Calender で指定色に塗りつぶされない
テーマcocoon利用の時、
「休日」表示だけでなく
「イベント」設定していると
「イベント」の無い週のカレンダーが指定した日にちの数字は指定した背景色で
2行目が白になってしまい「終日休み」と伝わりにくい件。
※いつからこのような表示になったの不明だが
いずれかのアップデートの際に、干渉している部分があるのでは?と推測。
テーマをwordpress公式テーマに変更すると下記の通り正しく、
終日(イベントの無い週の2行とも)指定の背景色表示される。

テーマをcocoonに戻すと・・・
イベントが入力された週は、終日(セル内2行とも)指定の背景色なのですが
イベント入力の無い週は、各日の2行目が白になってしまう。

シンプル表示は一行なので問題なく表示される。
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
|---|---|---|---|---|---|---|
| 26 | 27 | 28 | 29 | 30 | 31 | 1 |
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 1 |
cocoonのフォーラムで質問しようと思ったがその前に・・・
プラグインの不具合を確かめるためにトラブルシューティングモードを試せるプラグインを知る。
「Health Check & Troubleshooting」
https://nelog.jp/health-check-and-troubleshooting-plugin
https://ja.wordpress.org/plugins/health-check/
DLして有効化すると、
xo-event-calendarが「cocoon」の「ブロック」に対応していないことが判明!!!!
xo-event-calendar/event-calendar ブロックに対応していない
[このサイトは xo-event-calendar/event-calendar ブロックに対応していません]

なるほど納得。
Xo Event Calenderの設置がショートコードではなくなって、
ブロックのウイジェットのみでの設定に変更になってからの不具合だったと理解した。
「Health Check & Troubleshooting」が
「Simple Calendar」を推奨しているので、プラグインを変更しようと思う。
「Health Check & Troubleshooting」凄いです。
一つ一つ、プラグイン停止していかなくても、不具合の原因が分かります。
cocoonのわいひらさん、ありがとうございます。
もう10年以上wordpress弄っいるのに、このツールを知らなかったなんて、すごく時間と気力体力を無駄に使ってしました。(;’∀’)
イベントの無い週も指定色で塗りつぶされるようにする急遽の策
イベントの無い週の始まりに、「新規イベント」として
「タイトル」無し、「内容」は半角ブランク一つ入力して保存すると
2行目の(td)部分も指定色になった。
※入力時、「終日」にしないで、期間を延長すると、指定した期間内のカレンダーは下記のように表示される。
※いの記事は2025年7月10日更新なので、入力した「イベント」の最終日は、2025年8月2日
| 月 | 火 | 水 | 木 | 金 | 土 | 日 | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||
| ||||||||||||||||||||
| ||||||||||||||||||||
| ||||||||||||||||||||
| ||||||||||||||||||||
定休日
午後休
午前休
予約状況
ただ、表示セルの高さが狭くなるので
CSSで、trやtdの高さ(height)指定して広げることが可能。
ちなみに、Xo Event Calender のHTML部分を以下にメモ的に書き出しておく。
<div class="xo-event-calendar wp-block-xo-event-calendar-event-calendar">
<div class="calendars xo-months" >
<div class="calendar xo-month-wrap">
<table class="xo-month">
<caption>
<div class="month-header">
<button type="button" class="month-prev" onclick="this.disabled = true; xo_event_calendar_month(this,'2025-6',1,'','all,am,pm',1,2,1,1,1,'F Y',1,1,'2025-7'); return false;"><span class="nav-prev">PREV</span></button><span class="calendar-caption">7月 2025</span><button type="button" class="month-next" onclick="this.disabled = true; xo_event_calendar_month(this,'2025-8',1,'','all,am,pm',1,2,1,1,1,'F Y',1,1,'2025-7'); return false;"><span class="nav-next">NEXT</span></button>
</div>
</caption>
<thead><tr>
<th class="monday">月</th><th class="tuesday">火</th><th class="wednesday">水</th><th class="thursday">木</th><th class="friday">金</th><th class="saturday">土</th><th class="sunday">日</th></tr></thead><tbody>
<tr>
<td colspan="7" class="month-week">
<table class="month-dayname">
<tbody><tr class="dayname">
<td><div class="other-month" >30</div></td>
<td><div >1</div></td>
<td><div class="holiday-pm" style="background-color: #def0fc;">2</div></td>
<td><div class="holiday-am" style="background-color: #dbf6cc;">3</div></td>
<td><div >4</div></td>
<td><div class="today holiday-all" style="background-color: #fddde6;">5</div></td>
<td><div class="holiday-all" style="background-color: #fddde6;">6</div></td></tr></tbody></table>
<div class="month-dayname-space"></div>
<table class="month-event">
<tbody><tr><td></td><td></td><td></td><td></td><td></td>
<td colspan="1"><a href="https://mamapocket.net/wp/wp/archives/xo_event/%e4%ba%88%e7%b4%84x" title="予約×"><span class="month-event-title category-%e4%ba%88%e7%b4%84%e4%b8%8d%e5%8f%af" style="color:#333; background-color:#f9f218;">予約×</span></a></td><td></td></tr>
</tbody>
</table>
</td></tr>
<tr><td colspan="7" class="month-week">
<table class="month-dayname">
<tbody><tr class="dayname">
<td><div >7</div></td>
<td><div >8</div></td>
<td><div class="holiday-pm" style="background-color: #def0fc;">9</div></td>
<td><div class="holiday-am" style="background-color: #dbf6cc;">10</div></td>
<td><div >11</div></td>
<td><div class="holiday-all" style="background-color: #fddde6;">12</div></td>
<td><div class="holiday-all" style="background-color: #fddde6;">13</div>
</td></tr>
</tbody>
</table>
<div class="month-dayname-space"></div>
<table class="month-event-space"><tbody>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</tbody>
</table>
</td></tr>
<tr><td colspan="7" class="month-week">
<table class="month-dayname">
<tbody>
<tr class="dayname">
<td><div >14</div></td>
<td><div >15</div></td>
<td><div class="holiday-pm" style="background-color: #def0fc;">16</div></td>
<td><div class="holiday-am" style="background-color: #dbf6cc;">17</div></td>
<td><div >18</div></td>
<td><div class="holiday-all" style="background-color: #fddde6;">19</div></td>
<td><div class="holiday-all" style="background-color: #fddde6;">20</div></td>
</tr>
</tbody>
</table>
<div class="month-dayname-space"></div>
<table class="month-event-space"><tbody>
<tr><td>
<div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</tbody>
</table></td></tr>
<tr><td colspan="7" class="month-week">
<table class="month-dayname">
<tbody>
<tr class="dayname">
<td><div >21</div></td>
<td><div >22</div></td>
<td><div class="holiday-pm" style="background-color: #def0fc;">23</div></td>
<td><div class="holiday-am" style="background-color: #dbf6cc;">24</div></td>
<td><div >25</div></td>
<td><div class="holiday-all" style="background-color: #fddde6;">26</div></td>
<td><div class="holiday-all" style="background-color: #fddde6;">27</div></td>
</tr>
</tbody>
</table>
<div class="month-dayname-space"></div>
<table class="month-event-space"><tbody>
<tr><td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</tbody>
</table></td></tr>
<tr><td colspan="7" class="month-week"><table class="month-dayname"><tbody>
<tr class="dayname">
<td><div >28</div></td>
<td><div >29</div></td>
<td><div class="holiday-pm" style="background-color: #def0fc;">30</div></td>
<td><div class="holiday-am" style="background-color: #dbf6cc;">31</div></td>
<td><div class="other-month" >1</div></td><td><div class="other-month holiday-all" style="background-color: #fddde6;">2</div></td>
<td><div class="other-month holiday-all" style="background-color: #fddde6;">3</div></td></tr>
</tbody>
</table>
<div class="month-dayname-space"></div>
<table class="month-event-space"><tbody>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</tbody>
</table></td></tr>
</tbody>
</table>
</div>
</div>
<div class="holiday-titles" ><p class="holiday-title"><span style="background-color: #fddde6;"></span>定休日</p>
<p class="holiday-title"><span style="background-color: #dbf6cc;"></span>午前休</p>
<p class="holiday-title"><span style="background-color: #def0fc;"></span>午後休</p>
</div>
<div class="loading-animation"></div>
</div>

