La versión con la que comencé originalmente tiene el primer día de la semana como lunes, pero necesito que sea domingo:
<script> import { beforeUpdate } from 'svelte'; import { startOfMonth, addMonths, format, subMonths, addDays, startOfWeek, sub, add, eachDayOfInterval, getDay, isToday } from 'date-fns'; let firstDayOfWeek; let currentMonth; let nextMonth; let previousMonth; let daysOfCurrentMonth; let weekdayOffset; let weekNames; beforeUpdate(() => { firstDayOfWeek = startOfWeek(new Date(), { locale: navigator?.language.split('-').pop().toLowerCase() || 'us', weekStartsOn: 0 }); currentMonth = startOfMonth(new Date()); nextMonth = startOfMonth(addMonths(new Date(currentMonth), 1)); previousMonth = startOfMonth(subMonths(new Date(currentMonth), 1)); daysOfCurrentMonth = eachDayOfInterval({ start: currentMonth, end: sub(nextMonth, { days: 1 }) }); weekdayOffset = (getDay(currentMonth) + 7) % 7 || 7; weekNames = [...Array(7)].map((_, index) => format(addDays(firstDayOfWeek, index), 'EEEEEE')); }); </script> {#if weekNames} <div class="week-days"> {#each weekNames as weekName} <p>{weekName}</p> {/each} </div> {/if} {#if daysOfCurrentMonth} <div class="days"> {#each daysOfCurrentMonth as day, index} <p class="day" style={` grid-column: column(${index}); grid-column-start: ${index === 0 ? weekdayOffset : 0}; color: ${isToday(day) ? 'red' : 'white'}; `} > {format(day, 'dd')} </p> {/each} </div> {/if} <style> .days, .week-days { display: grid; grid-template-columns: repeat(7, 50px); grid-column: 7; } </style>Creo que el problema reside en esta línea:
weekdayOffset = (getDay(currentMonth) + 7) % 7 || 7;
Tiene el 1 de febrero de 2022 a partir del lunes cuando debería ser martes.
Aquí hay un violín:https://codesandbox.io/s/naughty-surf-bovu8?file=/Button.svelte