Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

238
Vistas
Representación de vista de mes de Fullcalendar resourceTimeGrid

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(), } }

ingrese la descripción de la imagen aquí

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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:

  • slotLabelFormat
  • Formato de fecha
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda