Buenas, tengo un prototipo de calendario con CSS GRID con 7 columnas
Código HTML:
<grid-calendar style="--y:2023; --m:10; --d:1;">
<strong>Lu</strong>
<strong>Ma</strong>
<strong>Mi</strong>
<strong>Ju</strong>
<strong>Vi</strong>
<strong>Sa</strong>
<strong>Do</strong>
<time>1</time>
<time>2</time>
...
<time>30</time>
<time>31</time>
</grid-calendar>
Tengo este código de ejemplo para adaptar usando la función CALC() en combinación con grid-column-start
Código:
n = ((14-Mes)\12)
Bisiesto ((Año\4)-(Año\100)+(Año\400))
Año = (Año-n)
Mes = (Mes+(12*n)-2)
Return DiaSemana(((Dia+Año+Bisiesto+((31*Mes)\12))Mod7))
Hasta donde he podido he estado jugando con el siguiente código
Código HTML:
grid-calendar{display:grid; grid-template-columns:repeat(7,1fr);}
time:first-of-type{grid-column-start:2;}
time:first-of-type:before{content: var(--d);}
time:nth-child(8):before{margin:124.75px;}
Por ejemplo la siguiente linea no funciona
Código HTML:
time:first-of-type:before{content: calc(var(--d) + 1);}
La idea es que time:nth-child(8), DIA1 salte a una columna determinada, integrando el algoritmo de cálculo de día de la semana
He comprobado que hoy por hoy la función CALC() solo soporta +-*/ y parece que hay otras funciones aritméticas en camino
EN muchos casos veo que CALC() no me hace los cálculos o incluso a veces la variable no se muestra
Quizás haya alguna forma de hacerlo más fácil, gracias