Angular Scheduler - Un Componente de Calendario de Eventos Flexible
- Vea eventos vibrantes en vistas de día, semana, mes, agenda, año y línea de tiempo.
- Muestre múltiples calendarios en un solo diseño con eventos finamente agrupados.
- Personalice sin esfuerzo con opciones de plantilla incorporadas y listas para usar.
Quick Overview Video
Trusted by the world’s leading companies
Resumen
El Angular Scheduler (o Calendario de Eventos de Angular), es un componente de calendario de eventos con todas las funciones que ayuda a los usuarios a administrar su tiempo de manera eficiente. Facilita la programación de recursos y la reprogramación de eventos o citas a través de ventanas emergentes de edición, arrastrar y soltar, y acciones de redimensionamiento.
¿Por qué elegir Syncfusion Essential Studio® Angular Scheduler?
Alto rendimiento
El Angular Scheduler carga datos bajo demanda por defecto para reducir los tiempos de transferencia y carga. El mapeo de campos adecuado es obligatorio al vincular el Scheduler a fuentes de datos con diferentes nombres de campo.
Enlace de datos sin interrupciones
Vincule datos sin problemas con varias fuentes de datos locales y remotas como JSON, OData, WCF y servicios web RESTful con la ayuda de un administrador de datos.
Vistas integradas
Hay varias vistas integradas disponibles: día, semana, semana laboral, mes, agenda, agenda mensual, año y línea de tiempo. Con una variedad de variables específicas de la vista, puede personalizar cada vista.
Eventos recurrentes
Configure fácilmente eventos recurrentes para que se repitan diaria, semanal, mensual o anualmente con opciones de recurrencia integradas.
Múltiples recursos y agrupación
Para agrupar recursos según múltiples factores, el Angular Scheduler ofrece una amplia gama de opciones flexibles. También cubre la programación de cronogramas y la agrupación de citas por recurso y fecha.
Se adapta a cualquier resolución
Scheduler tiene un diseño altamente receptivo y un diseño optimizado para computadoras de escritorio, pantallas táctiles y teléfonos inteligentes. Funciona bien en todos los teléfonos móviles que usan iOS, Android o Windows OS.
Temas atractivos y personalizables
Diseño de vanguardia con más de 5 temas incorporados como Fluent, Tailwind CSS, Bootstrap, Material, Fabric y más. Utilice la herramienta en línea Theme Studio para personalizar los temas del Scheduler fácilmente.
Globalización y localización
Permite a los usuarios de diferentes ubicaciones utilizar el Scheduler formateando fechas, monedas y números para adaptarlos a sus preferencias.
Planificación inteligente con Scheduler impulsado por IA
Experimenta una programación más inteligente con nuestro Scheduler impulsado por IA. Simplemente escribe “Reunión de equipo todos los viernes a las 10 AM”, y organiza automáticamente tus eventos, resuelve conflictos y se adapta a tu flujo de trabajo. Tu calendario no solo registra el tiempo, sino que te ayuda a aprovecharlo al máximo.
Ejemplo de Código de Angular Scheduler
Comience fácilmente con el Angular Scheduler utilizando unas pocas líneas de código HTML y TS como se demuestra a continuación. Además, explore nuestro Ejemplo de Angular Scheduler que le muestra cómo renderizar y configurar el Scheduler en Angular.
<ejs-schedule [selectedDate]="selectedDate" [eventSettings]="eventSettings">
</ejs-schedule>//app.component.ts
import { Component } from '@angular/core';
import { EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, AgendaService } from '@syncfusion/ej2-angular-schedule';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService]
})
export class AppComponent {
public selectedDate: Date = new Date(2022, 1, 20);
private data: Object[] = [
{
Id: 1,
Subject: 'Scrum Meeting',
Location: 'Office',
StartTime: new Date(2022, 1, 12, 9, 30),
EndTime: new Date(2023, 1, 12, 10, 30),
RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1'
},
];
public eventSettings: EventSettingsModel = { dataSource: this.data };
}
//app.module.ts
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from '../app.component';
@NgModule({
declarations: [AppComponent],
imports: [CommonModule, ScheduleModule, BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}Múltiples vistas de programador
Una amplia variedad de modos de vista integrados están disponibles: día, semana, semana laboral, mes, agenda, agenda mensual, año y línea de tiempo. Configure fácilmente cada vista individual con diferentes opciones específicas de la vista.
Vistas de día, semana y semana laboral
Muestre citas para un solo día o durante varios días.
Vista de mes
Muestre eventos y citas en un solo día o varios días durante un mes completo.
Vista de agenda
Cargue eventos virtualmente y muéstrelos como una lista en orden secuencial agrupados por día. Existe una opción para especificar el número de días a cargar inicialmente en la vista de agenda.
Vista de agenda mensual
Muestra el diseño del calendario y los eventos de la fecha actualmente seleccionada. Un indicador redondo en la parte inferior de una fecha muestra la presencia de uno o más eventos en ese día.
Vista anual
La vista anual muestra todos los meses de un año determinado en un formato de vista de calendario. En esa vista de calendario, las fechas que contienen eventos y citas se resaltan con puntos colocados debajo de la fecha individual. Al hacer clic en la fecha, se mostrará la ventana emergente de eventos y se listarán los eventos.
Vistas de línea de tiempo
Angular proporciona cinco vistas de línea de tiempo integradas: día de línea de tiempo, semana de línea de tiempo, semana laboral de línea de tiempo, mes de línea de tiempo y año de línea de tiempo. Cada vista muestra los eventos con precisión a lo largo de un eje de tiempo horizontal para un solo día o varios días.
Para proporcionar un mejor rendimiento, las vistas de línea de tiempo cargan recursos, eventos y citas virtualmente en cada acción de desplazamiento.
Configuraciones de vista únicas
Configure fácilmente cada modo de vista individual con diferentes configuraciones de calendario. Por ejemplo, puede habilitar la función de agrupación en la vista de mes y aplicar plantillas de eventos en la vista de semana.
Intervalos de vista extensibles
Muestre varios días, semanas y meses extendiendo cada modo de vista según el recuento de intervalos proporcionado.
Intervalo de tiempo de bloqueo
Puede bloquear rangos de tiempo específicos en el Calendario de Eventos de Angular para evitar la creación de eventos y citas en ese espacio de tiempo.
Cita en línea
Con esta función habilitada, los usuarios pueden crear y editar citas en línea con un solo clic en las celdas del programador o en el asunto de la cita existente. Al presionar Enter después de escribir el nuevo texto del asunto en el cuadro de texto en línea, se actualizará y guardará la cita de manera adecuada.
Opciones avanzadas de manejo de eventos
El Calendario de Eventos de Angular proporciona representaciones claras, vibrantes y exactas de eventos y citas en la línea de tiempo del Programador, según la duración de tiempo asignada.
Capacidades de agregar y editar
Existe un soporte integrado para un mejor manejo de eventos, como la creación y edición más sencilla de citas utilizando el editor de eventos predeterminado o mediante acciones intuitivas de arrastrar y redimensionar. Además, también puede agregar campos de datos personalizados tanto a los eventos como a la fuente de datos de recursos.
Selección de múltiples eventos
Seleccione fácilmente múltiples eventos a la vez presionando y manteniendo presionada la tecla Ctrl mientras hace clic en los eventos. En dispositivos móviles, haga lo mismo tocando y manteniendo presionado un evento, y continúe seleccionando tocando una sola vez otros eventos. Después de seleccionar eventos con éxito, elimínelos o reposicione inmediatamente.
Tooltip
El tooltip personalizable muestra información del evento mientras el puntero del mouse está sobre el evento. Haga lo mismo en dispositivos móviles tocando y manteniendo presionado un evento.
Personalización de apariencia
Cambie el aspecto de los eventos y citas de Angular Scheduler personalizando su apariencia y estilo predeterminados utilizando HTML o CSS.
Zona horaria
Independientemente de la zona horaria del sistema, el Calendario de Eventos de Angular admite la configuración de la zona horaria requerida para el propio control, así como para los eventos.
Portapapeles
El Angular Scheduler admite la funcionalidad de copiar y pegar, lo que permite a los usuarios administrar eventos de manera eficiente. Los usuarios pueden copiar eventos seleccionados usando el atajo Ctrl+C, cortar eventos con Ctrl+X y pegar eventos en diferentes espacios de tiempo usando Ctrl+V.
Filas adaptables
Se ha agregado una opción integrada al Calendario de eventos de Angular para aumentar automáticamente la altura de las filas en las vistas de mes y línea de tiempo cuando se agregan nuevos eventos o citas concurrentes.
Menú contextual
El menú contextual integrado con Angular Scheduler se abre al hacer clic derecho en una celda o cita.
Sincronización de datos en tiempo real
Los datos de citas en tiempo real se sincronizan con precisión con nuestro Angular Scheduler.
Integración con Outlook y Google Calendar
Sincronice fácilmente eventos entre nuestro Calendario de Eventos de Angular y Google o Outlook Calendar a través de la API de Google Calendar o la biblioteca de objetos de Microsoft Outlook.
Actualizaciones en tiempo real
La comunicación de datos bidireccional transmite las actualizaciones de citas del lado del servidor realizadas en el Programador a todos los clientes conectados a través de SignalR.
Opciones de calendario ricas en funciones
El Calendario de Eventos de Angular hereda casi todas las características específicas del calendario, como el primer día de la semana y la escala de tiempo.
Primer día de la semana
Personalice el primer día de la semana, que por defecto es domingo, según la configuración local predeterminada. También puede utilizar esta opción para vistas individuales.
Horas de inicio y fin personalizadas
Muestra el diseño del programador de eventos con duraciones de tiempo específicas ocultando las horas no deseadas.
Escala de tiempo flexible
Utilice opciones de escala de tiempo personalizables para ver una línea de tiempo de eventos claramente y establecer una duración diferente.
Tiempo de trabajo
Las celdas activas del programador (que se muestran en blanco) representan visualmente los días y horas de trabajo.
Resaltar la hora actual
Indica la fecha actual con un encabezado de fecha resaltado. Marca con precisión la hora actual en todas las vistas.
Ocultar días de fin de semana
Ocultar los días de fin de semana del Programador le permite mostrar solo los días laborables en todas las vistas.
Visualización del número de semana
Muestra el número de semana del rango de fechas actual junto al encabezado de la fecha en las vistas de día, semana y semana laboral. También muestra el número de semana en la vista de mes como la primera columna. El número de semana se determina por el primer día de la semana y las reglas de la semana (primer día o primera semana completa, o primera semana de cuatro días).
Modo de hora
El control del Programador admite los formatos de hora de 12 y 24 horas.
Interfaz de usuario completamente personalizable
Personalice la apariencia de cualquier parte de la interfaz del Programador utilizando estilos HTML y CSS.
Encabezado de fecha
Cambie la apariencia predeterminada de la barra de encabezado agregando cualquier tipo de CSS, texto personalizado o imagen.
Interfaz de usuario completa del programador
Un evento del lado del cliente incorporado permite a los usuarios finales personalizar cualquier parte de la interfaz de usuario del Programador.
Barra de encabezado
Agregue elementos personalizados a las opciones de la barra de encabezado predeterminadas. Puede ocultar o mostrar las opciones comunes de la barra de encabezado.
Celdas del programador
Las opciones de plantilla listas para usar le permiten personalizar fácilmente las celdas agregando cualquier tipo de texto, imagen o CSS.
Ventanas emergentes rápidas
Personalice fácilmente las ventanas emergentes que se abren al hacer clic individualmente en las celdas, eventos o citas con su propia interfaz de usuario o diseño de plantilla.
Abrir editor de eventos externamente
El Calendario de Eventos de Angular ofrece un método incorporado para abrir la ventana del editor de eventos predeterminada mediante programación.
Interacciones fáciles de usar
El diseño moderno y de moda de la interfaz de usuario del Angular Scheduler hace que las interacciones del usuario sean más simples y eficientes.
Descripción general rápida del evento
Al hacer clic o tocar eventos, se muestran sus detalles importantes, como el asunto y la hora, junto con las opciones de edición y eliminación.
Selección de celda
Haga clic y arrastre el puntero sobre las celdas del Programador para la selección de varias celdas. Puede hacer lo mismo con atajos de teclado.
Contenedor de eventos
Al hacer clic en el indicador de texto (+n más) en las vistas de mes y línea de tiempo, se abrirá un contenedor de eventos que lista todos los detalles ocultos de eventos y citas de un día.
Navegación rápida
El Angular Scheduler proporciona una forma intuitiva de navegar hacia adelante y hacia atrás entre los rangos de fechas utilizando un calendario en línea, y también para navegar entre diferentes modos de vista.
Aplicaciones en tiempo real
Muchas aplicaciones en tiempo real utilizan programadores como parte integral, sirviendo así a diferentes propósitos según el tipo de proyecto. Algunas de las aplicaciones activas son: Calendario de Tarifas, Calendario de Salas de Reuniones, Planificador de Citas Médicas, Reserva de Habitaciones de Hotel.
Características interactivas
El Angular Scheduler permite a los usuarios exportar sus eventos de dos maneras: como un archivo Excel o como un archivo ICS.
Exportar a Excel
El Angular Scheduler le permite exportar todos sus eventos a un documento de Excel por defecto. También proporciona opciones de personalización adicionales para exportar colecciones de datos de eventos personalizados.
Exportar e importar ICS
El Calendario de Eventos de Angular admite la exportación de todos sus datos de eventos a formato iCal, y admite la importación de eventos desde un archivo iCal al Programador.
APIs intuitivas para desarrolladores
Los desarrolladores pueden tener control total sobre la interfaz de usuario y el comportamiento del calendario de eventos a través de sus APIs integradas y amigables para desarrolladores. Permite personalizar incluso las funcionalidades complejas del programador con facilidad.
Accesibilidad
El componente Angular Scheduler es fácilmente accesible para los lectores de pantalla. También se ha proporcionado soporte completo de interacción con el teclado.
Completamente accesible
El componente Angular Scheduler tiene soporte completo de accesibilidad WAI-ARIA. La interfaz de usuario del programador incluye elementos visuales de alto contraste, brindando a las personas con discapacidad visual la mejor experiencia de visualización. Además, las descripciones válidas de la interfaz de usuario son fácilmente accesibles a través de tecnologías de asistencia como los lectores de pantalla.
Interactivo con teclado
Hay varios atajos de teclado disponibles para realizar casi todas las acciones del programador, como la selección de varias celdas o eventos y la navegación a otras vistas.
De derecha a izquierda (RTL)
Renderice el programador de eventos siguiendo las convenciones adecuadas de derecha a izquierda.
Compatibilidad de versiones de Angular
Con la mejora continua en las versiones de Angular, el Angular Scheduler se mantiene actualizado para que sea compatible con las versiones desde la 4 hasta la última versión.
Otros frameworks compatibles
El Programador está disponible en los frameworks Blazor, React, JavaScript y Vue. Explore sus opciones específicas de plataforma a través de los siguientes enlaces:
Navegadores compatibles
El Angular Scheduler funciona bien con todos los navegadores web modernos, incluidos Chrome, Firefox, Edge, Safari y Opera.
¿No está seguro de cómo crear su primer Angular Scheduler? Nuestros videos tutoriales y documentación pueden ayudar.
Me encantaría verlo ahora Me encantaría leerlo ahoraMás de 145+ componentes de interfaz de usuario de Angular
TODOS LOS COMPONENTES
COMPONENTES INTELIGENTES
CUADRÍCULAS
Visualización de datos
MENÚS DESPLEGABLES
VISUALIZADORES Y EDITORES DE ARCHIVOS
BOTONES
CHAT INTERACTIVO
ENTRADAS
NAVEGACIÓN
FORMAS
NOTIFICACIÓN
Preguntas frecuentes
¿Por qué debería elegir Syncfusion Essential Studio® Angular Scheduler?
- Diseño altamente receptivo y finamente optimizado para computadoras de escritorio, tabletas y teléfonos móviles.
Diferentes vistas básicas como día, semana, semana laboral, mes y año del modo calendario y modo línea de tiempo.
El desplazamiento virtual permite cargar una gran cantidad de recursos y eventos dinámicamente.
- Se adapta a diferentes zonas horarias al instante.
Agrupación de múltiples recursos basada en las vistas de línea de tiempo, horizontal, jerárquica y fecha.
- Uno de los mejores Angular Scheduler del mercado que ofrece una interfaz de usuario rica en funciones para interactuar con el software.
- Fácil sincronización de eventos con Google y Outlook Calendars.
Configuración y API sencillas.
- Soporte para todos los navegadores modernos.
Amplios recursos de aprendizaje como demos, documentación y videos para aprender rápidamente y empezar con Angular Scheduler.
¿Cuál es el precio de Syncfusion Angular Scheduler?
No vendemos el Angular Scheduler por separado. Solo está disponible para su compra como parte de la licencia de equipo de Syncfusion. Esta contiene más de 1,600 componentes y frameworks, incluido el Angular Scheduler. El precio de la licencia de equipo comienza en $395 por mes para 5 desarrolladores, e incluye soporte y actualizaciones hasta que expire la suscripción. Además, podríamos ofrecer descuentos basados en promociones actualmente activas. Póngase en contacto con nuestros especialistas de producto hoy mismo para ver si califica para algún descuento adicional.
¿Dónde puedo encontrar la demostración de Syncfusion Angular Scheduler?
Puede encontrar nuestra demostración de Angular Scheduler, que muestra cómo renderizar y configurar el programador.
¿Puedo comprar el componente Syncfusion Angular Scheduler por separado?
No, nuestros 1,600+ componentes y frameworks para web, móvil y escritorio, incluyendo nuestro Angular Scheduler, no se venden individualmente. Solo están disponibles como parte de una licencia de equipo. Sin embargo, hemos puesto un precio competitivo al producto, por lo que solo cuesta un poco más de lo que algunos otros proveedores cobran por su componente Scheduler solo. También hemos descubierto que, en nuestra experiencia, nuestros clientes usualmente comienzan usando uno de nuestros productos y luego se expanden a varios productos rápidamente, por lo que consideramos que era mejor ofrecer todos los 1,600+ componentes y frameworks por una tarifa de suscripción que comienza en $395 por mes para un equipo de 5 desarrolladores. Además, podríamos ofrecer descuentos basados en promociones actualmente activas. Póngase en contacto con nuestros especialistas de producto hoy mismo para ver si califica para algún descuento adicional.
¿Puedo descargar y utilizar el Syncfusion Angular Scheduler de forma gratuita?
No, este es un producto comercial y requiere una licencia de pago. Sin embargo, también está disponible una licencia comunitaria gratuita para empresas e individuos cuyas organizaciones tengan ingresos brutos anuales inferiores a 1 millón de dólares estadounidenses y cinco o menos desarrolladores.
¿Cómo empiezo con Syncfusion Angular Scheduler?
Un buen lugar para comenzar sería nuestra completa documentación de introducción.
Nuestros clientes nos aman
Con un excelente conjunto de herramientas y un gran equipo de soporte, Syncfusion® reduce el tiempo de desarrollo de los clientes.Estas son algunas de sus experiencias.
An amazing toolset to accelerate UI development
The number of components available is the best thing about this library. We think of a UI component, and the Angular JS library already offers it. We use the Angular JS library to accelerate development. The experience using and implementing has been great. The support is also excellent.
Shrikant P.
Customer Success Manager
A giant framework with great pricing options
I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.
Alejandro Javier V.
CEO
Ver historias de éxito reales
Desarrolladores de todo el mundo confían en Essential Studio de Syncfusion para simplificar proyectos complejos y acelerar la entrega. Con una amplia biblioteca de controles de interfaz de usuario, potentes SDK y soporte confiable, Essential Studio ayuda a los equipos a crear aplicaciones de nivel empresarial con confianza.
Explorar estudios de casoIndustria
Desarrollo de software
75% Reducción de costos
50% Desarrollo más rápido
Industria
Servicios públicos (petróleo y gas)
450+ horas ahorradas
Procesos optimizados y horas de esfuerzo de desarrollo ahorradas.
Funciones avanzadas y flexibles
Usuarios potenciados mediante una funcionalidad sólida y versátil.
Industria
Software y tecnología
1000+ horas ahorradas
Desarrollo acelerado con componentes de interfaz de usuario listos para empresa.
Gestión eficiente de archivos
Flujos de trabajo optimizados con bibliotecas de documentos sin crearlas desde cero.
Industria
Software y tecnología
2 años de retraso evitado
Se evitaron dos años de retrasos gracias a la planificación proactiva.
Entrega punctual
Proyectos entregados a tiempo utilizando controles de confianza.
Industria
Servicios de TI y consultoría de TI
Rendimiento Mejorado
Grandes conjuntos de datos gestionados con fácil personalización y depuración rápida.
Altamente personalizable
Controles plug-and-play con integración rápida de plantillas.
Industria
Servicios profesionales
Acceso instantáneo
Disponibilidad rápida de funciones y recursos.
Dependencias reducidas
Menos dependencias para un desarrollo más rápido.
Calificado por usuarios de todo el mundo
Recursos de Syncfusion Angular Scheduler
Kits de UI
Descarga de Figma
Descarga de Figma
Premios
Grandeza: Decir que la tienes es una cosa, pero significa más cuando otros la reconocen. Syncfusion® se enorgullece de haber recibido los siguientes premios de la industria.
