Configuración del Calendario

Configuración del Calendario

La pantalla de Configuración del Calendario permite personalizar varios aspectos de la aplicación, asegurando una mejor adaptación a las necesidades del proyecto.

A través de estas configuraciones, el desarrollador puede ajustar el comportamiento del calendario, elegir los campos que se mostrarán, definir reglas para la creación y edición de eventos, además de configurar colores y estilos para una mejor visualización.

Configuración

Pantalla de Configuración del Calendario

Márgenes

Permite al desarrollador definir los valores de los márgenes de la aplicación en píxeles. Si no se especifica ningún valor, la aplicación utilizará los valores predeterminados del tema configurado.

Atención:
Al configurar el atributo Alineación Vertical, los valores definidos para los márgenes serán ignorados.

Ejemplo de cómo usar el atributo

Ancho del Iframe del Formulario

Define el ancho, en píxeles, del formulario utilizado para insertar eventos en el Calendario.

Alto del Iframe del Formulario

Define la altura, en píxeles, del formulario utilizado para insertar eventos en el Calendario.

Formato de Hora

Define si la visualización de la hora seguirá el formato 12 horas (AM/PM) o 24 horas, afectando la forma en que se muestran e ingresan los eventos.

• 13:00 - Utiliza el formato 24 horas.
• 1:00 PM - Utiliza el formato 12 horas (AM/PM).

Modo de Inicio

Define el modo de visualización inicial del calendario, que puede configurarse como: Agenda, Día, Semana, Mes, Multi-Mes o Año.

Ejemplo de Vista Multi-Mes

Ejemplo de Vista de Agenda

Modos Disponibles

El desarrollador debe definir qué modos de visualización estarán disponibles para el usuario final, desmarcando aquellos que no desea habilitar.

Deshabilitar Drag & Drop

Deshabilita la función de arrastrar y soltar (Drag & Drop) para los eventos del calendario. Esta función permite actualizar fechas y horarios de los eventos sin necesidad de acceder al formulario de edición.

Ejemplo de Uso de Drag & Drop

Desactivar la Opción ‘Todo el Día’

Desactiva la opción para definir un evento como “Todo el día”, eliminando este campo del formulario de creación de eventos.

Límite Horario Mínimo

Define la hora mínima que se mostrará en las vistas de Semana y Día del calendario.

Importante:
La hora ingresada debe seguir el formato hh:mm, como se muestra en la imagen; de lo contrario, no será considerada.

Ejemplo Usando Límite de Horas Inicial

Límite Horario Máximo

Define la hora máxima que se mostrará en el calendario en las vistas de Semana y Día, limitando así el horario disponible para la creación de eventos.

Importante:
La hora ingresada debe seguir el formato hh:mm, como se muestra en la imagen; de lo contrario, no será considerada.

Posición del Mini Calendario y Categoría

Determina la posición de la columna de visualización del Mini Calendario y las Categorías. Esta columna puede ubicarse a la izquierda o a la derecha del calendario principal.

La columna se muestra cuando se usa el mini calendario o las categorías de eventos.

Mostrar Mini Calendario

Habilita la visualización del Mini Calendario. Este recurso permite la navegación independiente del calendario principal.

Todo el Día - Ocultar Campos de Hora

Define si los campos de hora (Hora de inicio y Hora de fin) serán ocultados al marcar el evento como “Todo el día” en el formulario de creación de eventos.

Si este atributo está desmarcado, los valores ingresados en los campos de hora serán ignorados al marcar el evento como “Todo el día”.

Recurrencia - Ocultar Campos

Oculta los campos relacionados con el período y la información de recurrencia en el formulario de creación de eventos del Calendario.

Recurrencia - Agregar Marca de Agua en el Formato de Fecha

Muestra un texto indicativo (marca de agua) en el campo de fecha de recurrencia, ayudando al usuario a identificar el formato esperado.

Ocultar Filtro del Campo Categoría

Oculta el filtro del campo Categoría, impidiendo que el usuario seleccione categorías específicas para mostrar en el Calendario.

Salto de Línea en el Título

Habilita el salto de línea automático en el título de los eventos cuando el texto excede el espacio disponible.

Intervalo de Tiempo

Define el intervalo de tiempo, en minutos, utilizado para organizar los eventos en las vistas de Semana y Día.

Intervalo de Tiempo para Arrastrar

Especifica el intervalo de tiempo aplicado al crear o mover eventos en las vistas de Día y Semana. Si este valor es mayor que el definido en el atributo Intervalo de Tiempo, se ajustará automáticamente al menor valor configurado.

Campos del Calendario

Esta interfaz muestra la relación de campos que se usará en la aplicación.

Necesita relacionar los campos de tabla con los campos de aplicación de formulario.

Pantalla de configuración de campos de calendario

API de Google

La API de Google Calendar le permitirá sincronizar su calendario de Google con la aplicación desarrollada en Scriptcase.

Primero debe activar la API de Google Calendar haciendo click en https://console.developers.google.com/apis/api/calendar-json.googleapis.com/overview.

Después de la activación, debe configurar la “pantalla de consentimiento de OAuth” haciendo clic en https://console.developers.google.com/apis/credentials/consent.

Pantalla de consentimiento de OAuth

• Dirección E-mail: Seleccione el correo electrónico que se utilizará como fuente para el calendario de google. La aplicación usará estos datos para la sincronización.
• Nombre del producto que se muestra a los usuarios: Le permite ingresar el nombre de consentimiento que se mostrará a los clientes. Asegúrese de que el nombre describa con precisión su producto y tenga cuidado de no utilizar nombres que sugieran que el producto es de Google o de otra empresa.
• URL de Inicio: Le permite ingresar una URL a la página de inicio. (Opcional)
• Logotipo del Producto URL: Le permite ingresar una URL que contiene una imagen que servirá como el logotipo del producto. (Opcional)
• Política de Privacidad URL: Le permite ingresar la URL de la política de privacidad del producto. (Opcional)
• Términos de Servicio URL: Le permite informar a la URL de los términos de servicio del producto. (Opcional)

Nota: Solo necesita informar la dirección de correo electrónico y el nombre del producto. Todos los demás artículos son opcionales

Ahora necesita crear una Credential> OAuth client ID

Seleccione la opción “Aplicación Web” y siga la configuración a continuación.

Pantalla de configuración de ID de OAuth Client

• Nombre: Ingrese un nombre para la identificación del cliente de OAuth.
• Orígenes Autorizados de JavaScripts : Inserta la URL raíz de tu sistema. Por ejemplo: http://yourdomain.com or http://localhost
• URL de Redireccionamiento Autorizadas: ingrese la URL completa hasta la aplicación de calendario.

Después de ingresar los datos anteriores, haga click en “Guardar”

Ahora configuremos la aplicación Scriptcase.

Google Calendar API Settings Screen

• Integrar con Google Calendar: Sincronice con los eventos del calendario de Google, lo que le permite importar o exportar eventos.
• OAuth Client Json: Json de Google OAuth con la credencial para acceder al proyecto. Para obtener este contenido, abra el OAuth Client ID del Cliente OAuth previamente configurado y descargue el JSON.
• Iniciar sesión en Google OAuth: Elija si desea almacenar el inicio de sesión realizado en la aplicación para no volver a preguntar o si va a solicitar la autenticación de la sesión.
• Integrar Formulario: Permite que el formulario inserte, elimine o actualice eventos en Google Calendar.
• Insertar: Al insertar un evento en el formulario, también se inserta en el calendario de google.
• Modificar: Al actualizar un evento en el formulario, también se actualiza en el calendario de google.
• Borrar: Al eliminar un evento en el formulario, también se excluye en el calendario de google.