Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

233
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!