Как отрендерить календарь, чтобы числа дней выводились в соответствии с днями недели?

Question

[Esm322]

Необходимо, чтобы числа каждого месяца отображались в соответствии с днями недели.

const date = reactive({
  currentDate: new Date(),
});
const currentYear = ref(date.currentDate.getFullYear());
const currentMonth = ref(date.currentDate.getMonth());
const currentDay = ref(date.currentDate.getDate());

const lastDayMonth = computed(
  () => new Date(currentYear.value, currentMonth.value + 1, 0).getDate(),
);
const firstDayMonth = computed(
  () => new Date(currentYear.value, currentMonth.value, 1).getDate(),
);

const getCalendar = computed(() => {
  const currMonthDays = [];
  const preMonthDays = [];

  for (let i = 1; i <= lastDayMonth.value; i += 1) {
    currMonthDays.push(i);
  }

  for (let i = firstDayMonth.value; i > 0; i -= 1) {
    preMonthDays.push('');
  }

  const resDays = [...preMonthDays, ...currMonthDays];

  return resDays;
});

Есть проблема именно с этим циклом:

for (let i = firstDayMonth.value; i > 0; i -= 1) {
    preMonthDays.push('');
  }

Но в чём именно ошибка, не могу понять.

Answer 1

[0xD34F]

Отдельные циклы для чисел за текущий и предыдущий месяцы (кстати, а где у вас следующий?) не нужны. Чтобы получить число, надо не на счётчик цикла смотреть, а на дату - начальным значением будет первое число месяца минус количество дней, прошедших с последнего понедельника. Цикл крутить надо не до конца месяца, а немного дальше - чтобы общее количество чисел было кратно семи (т.е., чтобы в последней неделе не было отсутствующих дней) и всегда одно и то же (чтобы размер календаря не зависел от отображаемого месяца). Вот так.

Answer 2

[Adamos]

Нет в этом цикле никакой проблемы. Проблема в логике.
Там должен быть день недели первого числа, а у вас - тупо первое число, единица. Соответственно, перед ним втыкается один пробел независимо от того, с какого дня начинается месяц.