CSS grid，Day.js :如何创建显示当前周日期的日历？

<div class="calendar"></div>

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 10px;
}

.calendar .day {
  border: 1px solid #ccc;
  padding: 10px;
}

// 导入Day.js库
// 可以通过 <script> 标签引入，或者使用模块化工具导入
// 示例中使用直接通过 <script> 标签引入的方式

// 获取当前日期
const currentDate = dayjs();

// 确定当前一周的起始日期和结束日期
const startOfWeek = currentDate.startOf('week');
const endOfWeek = currentDate.endOf('week');

// 获取日历容器元素
const calendarContainer = document.querySelector('.calendar');

// 生成并渲染一周的日期
for (let date = startOfWeek; date.isBefore(endOfWeek); date = date.add(1, 'day')) {
  const dayElement = document.createElement('div');
  dayElement.classList.add('day');
  dayElement.textContent = date.format('D');
  calendarContainer.appendChild(dayElement);
}