添加周末背景

Question

我正在使用 flatpicker 日历并想制作每个周末的背景 #7a73aa。不幸的是，flatpicker 不会在周末添加 class。

我已经用 css 试过了，但没用：

.dayContainer span:nth-child(6n) {
  background: #7a73aa;
  font-size: 20px;
}

页面来源：

知道如何用 css 做到这一点吗？

Answer 1

您可以将 6n 替换为 7n 以突出显示星期日。然后添加 7n-1 的规则以突出显示星期六：

flatpickr('#calendar', {
  "locale": {
    "firstDayOfWeek": 1 // start week on Monday
  }
});

.dayContainer > .flatpickr-day:nth-child(7n),
.dayContainer > .flatpickr-day:nth-child(7n-1) {
    background: #7a73aa;
    font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.1/flatpickr.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
<input type="text" id="calendar">

添加周末背景

Add weekend day backgrounds

css

tailwind-css