Empecé a trabajar en Full Calender con Vue. Intenté pero no pude adoptar algunas de las funcionalidades en Calendario completo. Me gusta:
Cómo agregar columnHeaderFormat like- for Month - Monday, Tuesday , for week- Mon 08/11
Cómo mostrar solo el tiempo programado en el calendario de la semana. Por ejemplo, si el evento es de 2 p. m. a 4 p. m., solo se deben mostrar estas 2 horas para el calendario de semana/día.
Cómo agregar la fecha predeterminada en el calendario completo.
Cómo agregar límite de eventos en FC.
CÓDIGO: PLANTILLA: <full-calendar class="calendar" :options="calendarOptions"/>
GUIÓN: datos() {
return { calendarOptions: { plugins: [dayGridPlugin, interactionPlugin, listPlugin, timeGridPlugin], initialView: 'dayGridMonth', headerToolbar: { left: 'today prev,next', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' }, events: this.eventDates, eventDisplay: 'block', displayEventTime: false, allDaySlot: false }Enlace CodeSandBox : https://codesandbox.io/s/vue-fullcalendar-scheduler-example-forked-0vgy6?file=/components/Calendar.vue
Amablemente ayúdame en esto. Su respuesta sería muy apreciada. Gracias
basado en la documentación aquí https://fullcalendar.io/docs/dayHeaderFormat
// like 'Mon', for month view { weekday: 'short' } // like 'Mon 9/7', for week views { weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true } // like 'Monday', for day views { weekday: 'long' } var calendar = new Calendar(calendarEl, { views: { dayGrid: { weekday: 'long' } } });para aplicar a su código
return { calendarOptions: { views: { dayGrid: { weekday: 'long' } }, plugins: [dayGridPlugin, interactionPlugin, listPlugin, timeGridPlugin], initialView: 'dayGridMonth', headerToolbar: { left: 'today prev,next', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' }, events: this.eventDates, eventDisplay: 'block', displayEventTime: false, allDaySlot: false }consolidar código:
> data() { > return { > calendarOptions: { > plugins: [dayGridPlugin, interactionPlugin, listPlugin, timeGridPlugin], > initialView: 'dayGridMonth', > headerToolbar: { > left: 'today prev,next', > center: 'title', > right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' > }, > events: this.eventDates, > eventDisplay: 'block', > displayEventTime: false, > allDaySlot: false, > initialDate: this.startingDate, > dayMaxEvents: 2, > dayHeaderFormat: { > weekday: 'long', month: 'numeric', day: 'numeric', omitCommas: true > }, > expandRows: true, > slotEventOverlap: false, > buttonText: { > today: 'Today', > month: 'Month', > week: 'Week', > day: 'Day' > } > } > }; }