llevo un par de días con el diseño de un calendario utilizando VueJS y MomentJS e iba de maravilla hasta que me topé con el siguiente problema:
He diseñado un componente con la siguiente estructura:
<div id="calendar_box">
<div id="month_title">{{contextMonthName}} <span>{{contextYear}}</span></div>
<div id="tags_container">
<div id="day_tag" v-for="dayTag in daysFormat">{{dayTag}}</div>
</div>
<div id="calendar_days_container">
<div v-on:click="selectDay" v-for="day in contextMonthDays" v-bind:id='contextYear + "-" + contextMonth + "-" + day' class="day_box">{{day}}</div>
</div>
</div>
Con el me permito mostrar una caja con el mes y año actual, debajo una barra con los siete días de las semanas (comenzando por domingo) y, finalmente, los días correspondientes al mes mostrado. Por ejemplo, en Octubre el "calendar_days_container" muestra 31 cajas de la clase "day_box" por los 31 días del mes. Además, estas "day_box" no contienen otra cosa más que el número de dicho fecha.
Mi problema es el siguiente: Todas las fechas caerán en el mismo día durante todos los meses y años, por ejemplo: el primero de cada mes (1) será el domingo.
Sé que los calendarios (un ejemplo rápido, el de Windows 10) poseen un contenedor de 6 filas y 7 columnas, donde los valores de algunas fechas corresponden a días del mes anterior o próximo a la fecha mostrada... pero no tengo idea de como hacer tal cosa.
¿Alguna idea?