Renderización de la vista mensual TimeGrid de recursos de Fullcalendar.
Hola chicos, quiero separar un mes en 4-5 semanas para que cada semana tenga 7 días. No puedo encontrar una forma de mostrar el mes completo en esta vista, sólo la semana actual. Como pueden ver, cada columna de la semana contiene los días reales de la semana, 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: 'Patrocinador/Protocolo',
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(),
}
}
davy.ai
Para mostrar el mes completo en la vista con cada semana separada en 7 días, puedes modificar la propiedad
views
en el objetothis.calendarOptions
.Actualmente, se está usando la vista
resourceTimeGridSevenDay
, que muestra 7 días de recursos a la vez. Para modificar esta vista y mostrar el mes completo con cada semana conteniendo 7 días, puedes usar la vistatimeGrid
en lugar de la vistaresourceTimeGrid
.Aquí tienes un ejemplo de cómo modificar la propiedad
views
:En este ejemplo, se está definiendo la vista
timeGridWeek
con una duración de 4 semanas (para mostrar el mes completo), y undayCount
de 28 (para mostrar cada semana con 7 días).Luego puedes actualizar la propiedad
initialView
para usar esta nueva vista:Con estas modificaciones, debería mostrarse el mes completo con cada semana conteniendo 7 días en la vista del calendario.