Hola chicos, quiero separar un mes en 4-5 semanas para que cada semana tenga 7 días. No puedo encontrar una manera de mostrar el mes completo en esta vista, solo la semana actual, como pueden ver, cada columna de semana contiene la semana real. días, pero me gustaría renderizar todo el mes con este esquema.
this.calendarOptions = { headerToolbar: { left: '', center: 'title', right: 'prev next' }, defaultAllDay:false, aspectRatio: 2.45, editable: false, slotMinWidth: 75, selectable: false, eventClassNames: ['mt-1'], eventResourceEditable: false, eventOverlap: false, initialView: 'resourceTimeGridSevenDay', resourceLabelClassNames: ['p-0'], resourceGroupLabelContent: (arg) => { return {html: `<strong>${arg.groupValue}</strong> `}; }, resourceLabelContent : (arg) => { return {html: `<span> ${arg.resource._resource.title}</span> `}; }, slotLabelContent: (arg) => { return {html: ` `}; }, eventClick: (arg) => { console.log('event click') }, now: new Date().toISOString(), resourceAreaHeaderContent: 'Sponsor/Protocol', resourceAreaWidth: '10%', views: { resourceTimeGridSevenDay: { type: 'resourceTimeGrid', duration: {days: 7}, slotDuration: { weeks: 4 }, } }, events: 'https://fullcalendar.io/demo-events.json?with-resources=2', fixedWeekCount: false, rerenderDelay: 2, progressiveEventRendering: true, showNonCurrentDates: false, initialDate: new Date().toISOString(), } }No estoy seguro de que pueda crear exactamente lo que ha mostrado en su captura de pantalla usando fullCalendar, pero es posible acercarse bastante y podría ser lo suficientemente bueno.
En la documentación de la configuración de slotLabelFormat , se menciona que para la vista de línea de tiempo se puede configurar con varias filas en el área de la etiqueta.
Por lo tanto, aún podría usar la vista "mes" para obtener la cantidad correcta de días, pero configure el etiquetado de ranuras de esta manera:
views: { resourceTimelineMonth: { slotLabelFormat: [ { week: 'long', }, // top level of text { weekday: 'short', day: '2-digit' } // lower level of text ], } },Muestra el número de semana como la semana del año en lugar de la semana del mes, y el formato de la fecha es similar pero no idéntico (y de todos modos variará un poco dependiendo de su ubicación).
Demostración en vivo: https://codepen.io/ADyson82/pen/BawNMEp
Si desea tener aún más control sobre el formato de fecha exacto, debe usar uno de los complementos que se mencionan en la documentación sobre formato de fecha.
Documentación: