これは何?

Chrome拡張機能StylusやArc Boostsを使って、 Notionのカレンダービューとタイムラインビューの土日部分に背景色を付けるためのコードです。

参考: Stylusの使い方, Arc Boostsの使い方

カレンダービュー

1. 週の始めが日曜日の場合

CleanShot 2023-12-05 at 22.14.38@2x.png

.notion-calendar-view > .notion-selectable.notion-collection_view_page-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view_page-block:nth-child(7),
.notion-calendar-view > .notion-collection_view-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view-block:nth-child(7){
  background: #EBF3FE!important;
}

.notion-calendar-view > .notion-selectable.notion-collection_view_page-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view_page-block:nth-child(1),
.notion-calendar-view > .notion-collection_view-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view-block:nth-child(1){
  background: #FFEBE9!important;
}

2. 週の始めを月曜日にしている場合

CleanShot 2023-12-05 at 21.56.34@2x.png

.notion-calendar-view > .notion-selectable.notion-collection_view_page-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view_page-block:nth-child(6),
.notion-calendar-view > .notion-collection_view-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view-block:nth-child(6){
  background: #EBF3FE!important;
}

.notion-calendar-view > .notion-selectable.notion-collection_view_page-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view_page-block:nth-child(7),
.notion-calendar-view > .notion-collection_view-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view-block:nth-child(7){
  background: #FFEBE9!important;
}

タイムラインビュー

参考: https://notion-lab.jp/2023-07-15-coloring-timeline/

.notion-timeline-view > .notion-selectable.notion-collection_view_page-block > div:first-child div,
.notion-timeline-view > .notion-selectable.notion-collection_view-block > div:first-child div {
  background: linear-gradient(90deg, #EBF3FE 0%, #EBF3FE 50%, #FFEBE9 50%, #FFEBE9 100%)!important;
  display: flex;
  justify-content: center;
  align-items: center;
}

※フルページ用のセレクターを追記しました。