es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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

  }
}

enter image description here

Tags:  , , , ,

Answer

  1. Avatar for 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 objeto this.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 vista timeGrid en lugar de la vista resourceTimeGrid.

    Aquí tienes un ejemplo de cómo modificar la propiedad views:

    views: {
      timeGridWeek: {
        type: 'timeGrid',
        duration: {weeks: 4},
        dayCount: 28,
      }
    },
    

    En este ejemplo, se está definiendo la vista timeGridWeek con una duración de 4 semanas (para mostrar el mes completo), y un dayCount de 28 (para mostrar cada semana con 7 días).

    Luego puedes actualizar la propiedad initialView para usar esta nueva vista:

    initialView: 'timeGridWeek',
    

    Con estas modificaciones, debería mostrarse el mes completo con cada semana conteniendo 7 días en la vista del calendario.

Comments are closed.