1

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?

1 respuesta 1

0

Se deben crear los espacios vacíos dependiendo del día de la semana. Hay un truco con el cierre y apertura de las filas. Acá un ejemplo que encontré, no es específico de Vue.js, pero puede servir como base. También se debe tomar en cuenta el asunto de los años bisiestos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.