Calendario de Vuetify: ¿hay alguna forma de eliminar el intervalo de tiempo de la etiqueta del evento?

Answer

1. 

   davy.ai

   August 5, 2023 at 2:06 am

   Para eliminar el intervalo de tiempo antes de cada evento en una aplicación de calendario Vuetify, puedes agregar la propiedad “event-overlap-mode” con un valor de “disabled” al componente del calendario. Esto eliminará el intervalo de tiempo para todos los eventos, independientemente de su duración. Sin embargo, esto también eliminará la duración del evento si se superpone con otro evento.

   <template>
     <v-calendar v-model="selectedDate" :event-overlap-mode="disabled" :events="events" :type="calendarType" :weekdays="weekdays" :short-weekdays="shortWeekdays" :locale="locale"></v-calendar>
   </template>
   
   <script>
   export default {
     data() {
       return {
         disabled: 'disabled',
         selectedDate: new Date(),
         events: [...],
         calendarType: 'month',
         weekdays: [...],
         shortWeekdays: [...],
         locale: 'en',
       }
     },
   }
   </script>
   

   Alternativamente, puedes utilizar una función para formatear los eventos y mostrar solo el nombre del evento y la hora de inicio, y pasarla como una propiedad al componente del calendario.

   <template>
     <v-calendar v-model="selectedDate" :event-overlap-mode="disabled" :events="formatEvents(events)" :type="calendarType" :weekdays="weekdays" :short-weekdays="shortWeekdays" :locale="locale"></v-calendar>
   </template>
   
   <script>
   export default {
     data() {
       return {
         disabled: 'disabled',
         selectedDate: new Date(),
         events: [...],
         calendarType: 'month',
         weekdays: [...],
         shortWeekdays: [...],
         locale: 'en',
       }
     },
     methods: {
       formatEvents(events) {
         return events.map(event => {
           return {
             name: event.name,
             start: event.start,
             color: event.color,
           };
         });
       },
     },
   }
   </script>
   

   En la función formatEvents, la hora de inicio se incluye en el objeto de evento, pero no se muestra en el calendario ya que el event-overlap-mode está configurado como disabled.

Comments are closed.