---
type: snippet
tags: ['calendar', 'date']
status: release
ctime: 2022-11-05
mtime: 2024-03-22
---

```js
import {
  addDays,
  addMonths,
  eachDayOfInterval,
  eachWeekOfInterval,
  startOfMonth,
} from 'date-fns'

const startOfMonthDate = startOfMonth(new Date())
const matrix = eachWeekOfInterval({
  start: startOfMonthDate,
  end: addMonths(startOfMonthDate, 1),
}).map((weekDay) => {
  const startDate = new Date(weekDay)

  return eachDayOfInterval({
    start: startDate,
    end: addDays(startDate, 6),
  })
})
```

- matrix 구현
  - [bclinkinbeard/calendar-matrix](https://github.com/bclinkinbeard/calendar-matrix)
  - [Calendar Matrix (date-fns, ES6)](https://gist.github.com/miljan-aleksic/bd70452a3f0cd6a11545db9f6ab57df6)
- 튜토리얼
  - [How to Make a Monthly Calendar With Real Data | CSS-Tricks](https://css-tricks.com/how-to-make-a-monthly-calendar-with-real-data)
  - [Let's Make a Vue-Powered Monthly Calendar | CSS-Tricks](https://css-tricks.com/lets-make-a-vue-powered-monthly-calendar)