JavaScript Scheduler - Un control de calendario de eventos flexible
- Visualice eventos vibrantes en vistas: 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.
- Sincronice fácilmente eventos con Google Calendar y Outlook Calendars.
Trusted by the world’s leading companies
Descripción general
El JavaScript Scheduler, o calendario de eventos, 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 JavaScript Scheduler?
Alto rendimiento
El 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.
Vinculación de datos sin problemas
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 varios modos de vista integrados disponibles: día, semana, semana laboral, mes, agenda, mes-agenda, 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 a diario, semanalmente, mensualmente o anualmente con opciones de recurrencia integradas.
Múltiples recursos y agrupación
Para agrupar recursos según múltiples factores, el Scheduler ofrece una amplia gama de opciones flexibles. También cubre la programación de líneas de tiempo y la agrupación de citas por recurso y fecha.
Se adapta a cualquier resolución
El Scheduler tiene un diseño altamente sensible 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 integrados como Fluent, Tailwind CSS, Bootstrap, Material, Fabric y más. Utilice la herramienta en línea Theme Studio para personalizar temas del Scheduler fácilmente.
Globalización y localización
Permite a los usuarios de diferentes locales usar el Scheduler formateando fechas, moneda y numeración para adaptarse a sus preferencias.
Scheduler impulsado por IA para una gestión eficiente del tiempo
Impulsa la productividad con el AI Scheduler. Simplemente ingresa comandos como “Programar reunión de equipo todos los viernes a las 10 AM”, y gestiona tu calendario de forma inteligente—sugiere los mejores horarios, evita solapamientos y organiza visualmente tu calendario.
Ejemplo de código de JavaScript Scheduler
Comience fácilmente con el JavaScript Scheduler usando unas simples líneas de código HTML y TSX como se demuestra a continuación. Además, explore nuestro ejemplo de JavaScript Scheduler que le muestra cómo renderizar y configurar el Scheduler en JavaScript.
<html>
<head>
<link href=https://cdn.syncfusion.com/ej2/material.css rel="stylesheet">
</head>
<body>
<div class="control-section">
<div id="Schedule"></div>
</div>
</body>
</html>import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let 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'
}
];
let scheduleObj: Schedule = new Schedule({
selectedDate: new Date(2022, 1, 20),
eventSettings: { dataSource: data }
});
scheduleObj.appendTo('#Schedule');Múltiples vistas del planificador
Hay una amplia variedad de modos de vista integrados disponibles: día, semana, semana laboral, mes, agenda, mes-agenda, 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 las citas para un solo día o durante varios días.
Vista de mes
Muestre eventos y citas en un solo día o en 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 de mes
Muestre 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 de año
La vista de año muestra todos los meses de un año particular en 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. Cuando hace clic en la fecha, se mostrará la ventana emergente de eventos y se listarán los eventos.
Vistas de línea de tiempo
JavaScript proporciona cinco vistas de línea de tiempo integradas: día de la línea de tiempo, semana de la línea de tiempo, semana laboral de la línea de tiempo, mes de la línea de tiempo y año de la 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.
Bloquear intervalo de tiempo
Puede bloquear rangos de tiempo específicos en el Calendario de Eventos de JavaScript para evitar la creación de eventos y citas en ese intervalo 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 planificador 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 JavaScript proporciona representaciones claras, vibrantes y exactas de eventos y citas en la línea de tiempo del Planificador, según la duración de tiempo asignada.
Capacidades de añadir y editar
Hay soporte integrado para un mejor manejo de eventos, como la creación y edición más fácil de citas utilizando el editor de eventos predeterminado o mediante acciones intuitivas de arrastrar y redimensionar. Además, también puede añadir 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 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 haciendo un solo toque en otros eventos. Después de seleccionar eventos con éxito, elimínelos o reubíquelos simultáneamente.
Información sobre herramientas
La información sobre herramientas personalizable muestra información del evento mientras el puntero del ratón está sobre el evento. Haga lo mismo en dispositivos móviles tocando y manteniendo presionado un evento.
Personalización de la apariencia
Cambie el aspecto de los eventos y citas de JavaScript Scheduler personalizando su apariencia y estilo predeterminados usando cualquier HTML o CSS.
Zona horaria
Independientemente de la zona horaria del sistema, el Calendario de Eventos de JavaScript admite la configuración de la zona horaria necesaria para el propio control, así como para los eventos.
Portapapeles
El JavaScript Scheduler admite la funcionalidad de portapapeles, lo que permite a los usuarios administrar eventos de manera eficiente. Los usuarios pueden copiar eventos seleccionados usando el acceso directo Ctrl+C, cortar eventos con Ctrl+X y pegar eventos en diferentes intervalos de tiempo usando Ctrl+V.
Filas adaptables
Se ha añadido una opción integrada al Calendario de Eventos de JavaScript para aumentar automáticamente la altura de las filas en las vistas de mes y línea de tiempo cuando se añaden nuevos eventos o citas concurrentes.
Menú contextual
El menú contextual integrado con JavaScript Scheduler se abre cuando se hace clic con el botón 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 JavaScript Scheduler.
Integración con Outlook y Google Calendar
Sincronice fácilmente eventos entre nuestro Calendario de Eventos de JavaScript y Google u 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 Scheduler a todos los clientes conectados a través de SignalR.
Opciones de calendario con muchas funciones
El Calendario de Eventos de JavaScript 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 regional. Puede utilizar esta opción también para vistas individuales.
Horas de inicio y fin personalizadas
Muestre el diseño del planificador 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 planificador (mostradas en blanco) representan visualmente los días y horas de trabajo.
Resaltado de la hora actual
Indique la fecha actual con un encabezado de fecha resaltado. Marque 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 Planificador le permite mostrar solo los días laborables en todas las vistas.
Visualización del número de semana
Muestre 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. Además, muestre 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 tiempo
El control Scheduler admite formatos de hora de 12 y 24 horas.
Interfaz de usuario completamente personalizable
Personalice la apariencia de cualquier parte de la interfaz del Scheduler utilizando estilos HTML y CSS.
Encabezado de fecha
Cambie la apariencia predeterminada de la barra de encabezado añadiendo cualquier tipo de CSS, texto personalizado o imagen.
Interfaz de usuario completa del Scheduler
Un evento integrado del lado del cliente permite a los usuarios finales personalizar cualquier parte de la interfaz de usuario del Scheduler.
Barra de encabezado
Añada elementos personalizados a las opciones predeterminadas de la barra de encabezado. Puede ocultar o mostrar las opciones comunes de la barra de encabezado.
Celdas del Scheduler
Las opciones de plantilla listas para usar le permiten personalizar fácilmente las celdas añadiendo cualquier tipo de texto, imagen o CSS.
Ventanas emergentes rápidas
Personalice fácilmente las ventanas emergentes que se abren haciendo un solo clic 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 JavaScript ofrece un método integrado 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 de JavaScript Scheduler simplifica y hace más eficientes las interacciones del usuario.
Vista rápida del evento
Al hacer clic o tocar los 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 Scheduler para la selección de múltiples celdas. Puede hacer lo mismo con los 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 mostrará todos los detalles de eventos y citas ocultos de un día.
Navegación rápida
El JavaScript Scheduler proporciona una forma intuitiva de navegar hacia adelante y hacia atrás entre los rangos de fechas usando 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 planificadores como parte integral, sirviendo así 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 y Reserva de habitaciones de hotel.
Funciones interactivas
El JavaScript Scheduler permite a los usuarios exportar sus eventos de dos maneras: como un archivo Excel o como un archivo ICS.
Exportar a Excel
El JavaScript 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 personalizadas.
Exportar e importar ICS
El Calendario de Eventos de JavaScript 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 Scheduler.
APIs amigables 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. Le permite personalizar incluso las funcionalidades complejas del Scheduler con facilidad.
Accesibilidad
El componente JavaScript Scheduler es fácilmente accesible por los lectores de pantalla. También se ha proporcionado soporte completo de interacción de teclado.
Completamente accesible
El componente JavaScript Scheduler tiene soporte completo de accesibilidad WAI-ARIA. La interfaz de usuario del Scheduler incluye elementos visuales de alto contraste, lo que brinda a las personas con discapacidad visual la mejor experiencia de visualización. Además, las descripciones de interfaz de usuario válidas 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 Scheduler, como la selección de múltiples celdas o eventos y la navegación a otras vistas.
De derecha a izquierda (RTL)
Renderice el planificador de eventos siguiendo las convenciones adecuadas de derecha a izquierda.
Otros frameworks soportados
El Scheduler está disponible en los frameworks Blazor, React, Angular y Vue. Explore sus opciones específicas de plataforma a través de los siguientes enlaces:
Navegadores compatibles
El JavaScript 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 JavaScript Scheduler? Nuestra documentación puede ayudar.
Me encantaría leerlo ahoraMás de 145+ controles de interfaz de usuario de JavaScript
TODOS LOS CONTROLES
COMPONENTES INTELIGENTES
CUADRÍCULAS
MENÚS DESPLEGABLES
ENTRADAS DE DATOS
VISUALIZACIÓN DE DATOS
NAVEGACIÓN
BOTONES
CHAT INTERACTIVO
NOTIFICACIÓN
FORMULARIOS
Preguntas frecuentes
¿Por qué debería elegir Syncfusion JavaScript Scheduler?
El JavaScript Scheduler con un rico conjunto de características ofrece lo siguiente:
- Diseño altamente responsivo 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 le permite cargar grandes cantidades de recursos y eventos dinámicamente.
- Se adapta a diferentes zonas horarias al instante.
Agrupación de recursos múltiples basada en las vistas de línea de tiempo, horizontal, jerárquica y fecha.
- Fácil sincronización de eventos con Google y Outlook Calendars.
- Uno de los mejores JavaScript Scheduler del mercado que ofrece una interfaz de usuario rica en funciones para interactuar con el software.
Configuración y API sencillas.
- Compatible con todos los navegadores modernos.
Recursos de aprendizaje amplios como demos y documentación para aprender y empezar rápidamente.
¿Cuál es el precio de Syncfusion JavaScript Scheduler?
No vendemos el JavaScript 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 JavaScript 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, es posible que ofrezcamos descuentos basados en las 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 JavaScript Scheduler?
Puede encontrar nuestra demostración de JavaScript Scheduler, que demuestra cómo renderizar y configurar el Scheduler.
¿Puedo comprar el componente Syncfusion JavaScript Scheduler por separado?
No, nuestros 1,600+ componentes y frameworks para web, móvil y escritorio, incluido nuestro JavaScript Scheduler, no se venden individualmente. Solo están disponibles como parte de una licencia de equipo. Sin embargo, hemos fijado el precio del producto de forma competitiva, por lo que solo cuesta un poco más de lo que algunos otros proveedores cobran por su control Scheduler solo. También hemos descubierto que, en nuestra experiencia, nuestros clientes suelen empezar 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, es posible que podamos ofrecer descuentos basados en las 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 JavaScript Scheduler de forma gratuita?
No, este es un producto comercial y requiere una licencia pagada. Sin embargo, también está disponible una licencia comunitaria gratuita para empresas e individuos cuyas organizaciones tengan menos de $1 millón de dólares estadounidenses en ingresos brutos anuales y cinco o menos desarrolladores.
¿Cómo empiezo a usar Syncfusion JavaScript Scheduler?
Un buen punto de partida sería nuestra completa documentación de inicio.
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.
Light and fast
I like JS controls the most, they are simple to use and easy to integrate to JS apps. In ASP.NET MVC your controls behave very nice, although I consider I have more control by using the JS version.
Alexis A.
Software Architect
Syncfusion - Great controls and terrific support
The best in Syncfusion is the attention and efforts spent by the technical support whenever needed. It’s priceless. The Syncfusion controls are really usefull to accelerate my projects, mainly those things related to UI.
David B.
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 JavaScript 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.
Actividades recientes en blogs de JavaScript Scheduler
Las publicaciones del blog de JavaScript Scheduler le guiarán en la creación de su primera aplicación con controles de JavaScript. Proporcionan estrategias de resolución de problemas, describen características y funcionalidades, anuncian nuevas versiones de características, explican las mejores prácticas y muestran escenarios de ejemplo. Explore nuestras últimas publicaciones en nuestros canales de blog para obtener actualizaciones de JavaScript Scheduler.
BLOG
Optimización de la productividad: integre Salesforce con JavaScript Scheduler
19 DE NOVIEMBRE DE 2024
