Как отрендерить календарь, чтобы числа дней выводились в соответствии с днями недели?
Необходимо, чтобы числа каждого месяца отображались в соответствии с днями недели.
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; }); |
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(''); } |
for (let i = firstDayMonth.value; i > 0; i -= 1) { preMonthDays.push(''); }
Но в чём именно ошибка, не могу понять.
Дополнительно:
Отдельные циклы для чисел за текущий и предыдущий месяцы (кстати, а где у вас следующий?) не нужны. Чтобы получить число, надо не на счётчик цикла смотреть, а на дату - начальным значением будет первое число месяца минус количество дней, прошедших с последнего понедельника. Цикл крутить надо не до конца месяца, а немного дальше - чтобы общее количество чисел было кратно семи (т.е., чтобы в последней неделе не было отсутствующих дней) и всегда одно и то же (чтобы размер календаря не зависел от отображаемого месяца). Вот так.
Ответы:
Нет в этом цикле никакой проблемы. Проблема в логике.
Там должен быть день недели первого числа, а у вас - тупо первое число, единица. Соответственно, перед ним втыкается один пробел независимо от того, с какого дня начинается месяц.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы отрендерить календарь с числами дней, соответствующими дням недели, необходимо использовать соответствующий алгоритм или библиотеку программирования. Один из способов - это написание собственного кода на языке программирования, который будет учитывать текущий день недели и выводить числа дней в соответствии с ним.
Для начала необходимо определить текущий день недели, который можно получить с помощью стандартных функций языка программирования, таких как JavaScript или Python. Затем можно создать массив с числами от 1 до 31 (или нужным количеством дней для конкретного месяца) и распределить их в соответствии с днями недели. Например, если текущий месяц начинается с среды, то числа от 1 до 3 будут выводиться под средой, а далее - по порядку.
Если использовать готовые библиотеки программирования, то можно воспользоваться, например, библиотекой FullCalendar для JavaScript. Она позволяет легко создавать календари с возможностью отображения чисел дней в соответствии с днями недели. Для этого необходимо настроить параметры отображения календаря и задать начальный день недели.
Таким образом, отрендерить календарь с числами дней, соответствующими дням недели, можно как написав собственный код на языке программирования, так и используя готовые библиотеки, что значительно упростит процесс создания календаря.