Add weekend day backgrounds

June 1, 2022

I’m using flatpicker calendar and want to make every weekend day’s background #7a73aa. Unfortunately flatpicker does not add a class to weekend day’s.

I’ve tried this with css but that’s not working:

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

Page source:

Any idea how I could do this with css?

>Solution :

You can replace 6n with 7n to highlight sundays. Then add a rule for 7n-1 to highlight saturdays :

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">