DHTMLX CALENDAR v2.0

Una pequeña libreria desarrollada en javascript que nos ofrece toda la potencia de un Calendario de eventos.

• Funcionalidades con javascript (ES6 2022)
• Eventos personalizados.

Uso

Instalacion en un proyecto Vuejs 3

Esta libreria de facil montaje en cualquier tipo de proyecto desarrollado en Vuejs.

1. Installar: .

   npm i --save calendar-hansa-js

2. Crear un componente Vuejs EventCalendarComponent.vue y montar la libreria .

   <template>
     <div ref="calendarContent" style="width: 100%; height: 100dvh"></div>
   </template>
   <script setup lang="ts">
       import { onMounted, onUnmounted, ref } from 'vue';
       import { EventCalendar, } from 'calendar-hansa-js';
   
       const calendarContent = ref();
   
       onMounted(() => {
           calendar.value = new EventCalendar(calendarContent.value, {
               theme: 'material',
               events: getData(),
               date: date,
               sidebar: { show: false }
           });
       });
   
       onUnmounted(() => {
         calendarContent.value.innerHTML = '';
       });
   </script>

   Para más ejemplos de configuracion revise la documentación oficial.
   https://docs.dhtmlx.com/eventcalendar/guides/configuration/ .

3. La libreria nos expone ciertos eventos para poder personalizar su comportamiento.

    const addEvent = () => {
       const uId = uuid();
       const new_calendar_data = {
           id: uId,
           active: true,
           label: "New calendar",
           color: {
               background: "#d5eaf7",
               border: "#098CDC"
           }
       };
       calendar.value?.addCalendar({ calendar: new_calendar_data });
    }

   Para más ejemplos de eventos expuestos revise la documentación oficial.
   https://docs.dhtmlx.com/eventcalendar/api/overview/methods_overview/ .

4. Se agregaron nuevos eventos personalizados que son mucho más versátiles los cuales actuan como eventos a nivel global del DOM.

     window.addEventListener('custom-event', ({ detail }: any) => {
       console.log('custom action')
     });

   El parametro detail nos retorna el siguiente esquema de información:

     {
       "data": {
         "id": string,
         "text": string,
         "start_date":string,
         "end_date": date,
         "allDay": boolean,
         "type": string
       }
     }

• Evento DoubleClick : Este evento cambia el comportamiento de la accion doble click sobre el calendario nativo, agregando una capa de interrupción sobre el formulario nativo.

    window.addEventListener('calendarDoubleClick', ({ detail }: any) => {
      console.log('custom action')
    });

• Evento Drag : Este evento cambia el comportamiento de la acción de creacion dibujando el evento sobre el calendario, agregando una capa de interrupción sobre el formulario nativo.

   window.addEventListener('calendarDragEvent', ({ detail }: any) => {
      console.log('custom action')
   });

• Evento ShowAlert : Este evento cambia el comportamiento de la accion doble click sobre el calendario nativo, agregando una capa de interrupción sobre el formulario nativo.

   window.addEventListener('calendarAlertEvent', ({ detail }: any) => {
      console.log('custom action')
   });

• Evento ShowAllEvents : Este evento cambia el comportamiento de la accion click en el botón "Ver todos", agregando una capa de interrupción sobre el formulario nativo.

   window.addEventListener('calendarShowAllEvents', ({ detail }: any) => {
      console.log('custom action')
   });

5. Aún se esta trabajando para tener nuevas funcionalidades.

Descripción de la herramienta

Esta herramienta es una modificacíon de la Suite DHTMLX Event Calendar. para más detalles y ejemplos que le interesen visite su página web.

Contribuyentes