React Scheduler - Un Componente Flexible de Calendario de Eventos
- 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
Descripción general
Explorar Demostración en Vivo
El React 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 y reprogramación de recursos y eventos o citas a través de ventanas emergentes de edición, arrastrar y soltar, y acciones de redimensionamiento.
¿Por qué elegir Syncfusion React Scheduler?
Alto rendimiento
El React 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, 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 React 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
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 utilizan 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 de 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 que se adapten a sus preferencias.
AI Scheduler para una planificación más inteligente
El AI Scheduler organiza su calendario fácilmente. Simplemente escriba instrucciones como “Reúnase con el equipo todos los viernes a las 10 AM”, y él se encarga del resto. Comprueba conflictos, sugiere los momentos óptimos y organiza su calendario visualmente.
Experimente una planificación más inteligente con esta demostración
Ejemplo de Código de React Scheduler
Comience fácilmente con el React Scheduler utilizando unas pocas líneas de código TSX simples como se demuestra a continuación. Explore también nuestro Ejemplo de React Scheduler que le muestra cómo renderizar y configurar un Scheduler en React.
import * as React from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, Inject
} from '@syncfusion/ej2-react-schedule';
const App = () => {
const data = [{
Id: 1,
Subject: 'Scrum Meeting',
Location: 'Office',
StartTime: new Date(2022, 0, 1, 9, 30),
EndTime: new Date(2023, 0, 1, 10, 30),
RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1'
}];
return (
<div>
<ScheduleComponent height='650px' eventSettings=>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
<ViewDirective option='Agenda' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);Múltiples vistas de programador
Hay una amplia variedad de modos de vista incorporados 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 para varios días usando React Scheduler.
Vista mensual
En React Scheduler, puede mostrar eventos y citas en un solo día o varios días para 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 de React Scheduler.
Vista de agenda mensual
Muestra el diseño del calendario y los eventos de la fecha seleccionada actualmente. 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 en 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. Al hacer clic en la fecha, se mostrará la ventana emergente del evento y se enumerarán los eventos.
Vistas de línea de tiempo
React proporciona cinco vistas de línea de tiempo incorporadas: 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 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 mensual y aplicar plantillas de eventos en la vista semanal.
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 React 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. Pulsar Enter después de escribir el nuevo texto del asunto en el cuadro de texto en línea actualizará y guardará la cita de forma adecuada.
Opciones avanzadas de manejo de eventos
El Calendario de Eventos de React proporciona representaciones claras, vibrantes y exactas de eventos y citas a lo largo de la línea de tiempo del Programador, según su duración asignada.
Capacidades de añadir y editar
Existe soporte integrado para un mejor manejo de eventos, como la creación y edición más fáciles 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 tocando una sola vez 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 mouse 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 React Scheduler personalizando su apariencia y estilo predeterminados utilizando cualquier HTML o CSS.
Zona horaria
Independientemente de la zona horaria del sistema, el Calendario de eventos de React admite la configuración de la zona horaria requerida para el control en sí, así como para los eventos.
Portapapeles
El React Scheduler admite la funcionalidad del 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 franjas horarias usando Ctrl+V.
Filas adaptativas
Se ha añadido una opción incorporada al Calendario de eventos de React 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 React 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 React Scheduler.
Integración con Outlook y Google Calendar
Sincronice fácilmente eventos entre nuestro Calendario de eventos de React 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 con muchas funciones
El Calendario de Eventos de React 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 predeterminada. También puede utilizar esta opción para vistas individuales.
Horas de inicio y fin personalizadas
Muestra 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 programador (mostradas en blanco) representan visualmente los días laborables y las horas de trabajo.
Resaltando 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
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 mensual 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 planificador 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 planificador
Un evento integrado del lado del cliente permite a los usuarios finales personalizar cualquier parte de la interfaz de usuario del planificador.
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 planificador
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 al hacer clic una sola vez en 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 React ofrece un método incorporado para abrir la ventana predeterminada del editor de eventos mediante programación.
Interacciones fáciles de usar
El diseño de interfaz de usuario moderno y actual del React Scheduler hace que las interacciones del usuario sean más simples y eficientes.
Resumen rápido 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 celdas
Haga clic y arrastre el puntero sobre las celdas del planificador para seleccionar 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 React 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 de navegar entre diferentes modos de vista.
Aplicaciones en tiempo real
Muchas aplicaciones en tiempo real utilizan planificadores 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.
Funciones interactivas
El React Scheduler permite a los usuarios exportar sus eventos de dos maneras: como archivo de Excel o como archivo ICS.
Exportar a Excel
El React 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 React 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.
API 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 API integradas y amigables para desarrolladores. Permite personalizar incluso las funcionalidades complejas del programador con facilidad.
Accesibilidad
El componente React Scheduler es fácilmente accesible mediante lectores de pantalla. También se ha proporcionado soporte completo de interacción con el teclado.
Completamente accesible
El componente React 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 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.
¿No está seguro de cómo crear su primer React Scheduler? Nuestros videos tutoriales y documentación pueden ayudarle.
Me encantaría verlo ahora Me encantaría leerlo ahoraDescubra el ecosistema completo de componentes React de Syncfusion
Explore más de 145+ componentes de interfaz de usuario de React que incluyen controles establecidos y listos para producción, y los últimos componentes puros de React creados de forma nativa para el desarrollo de aplicaciones web modernas.
-
Componentes de React
-
Componentes puros de React
-
COMPONENTES INTELIGENTESCUADRÍCULASEDITORESMENÚS DESPLEGABLESENTRADAS DE DATOSVISUALIZACIÓN DE DATOSNAVEGACIÓNBOTONESCHAT INTERACTIVONOTIFICACIÓNFORMULARIOS
-
CuadrículasVisualización de datosNavegaciónEntradas
Preguntas frecuentes
¿Por qué debería elegir Syncfusion Essential Studio® React Scheduler?
El Syncfusion React Scheduler ofrece las siguientes características:- Diseño altamente responsivo y finamente optimizado para equipos de escritorio, tabletas y teléfonos móviles.- Diferentes vistas básicas como día, semana, semana laboral, mes y modo de calendario anual y modo de línea de tiempo.- El desplazamiento virtual permite a los usuarios cargar un gran número 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 React Scheduler del mercado que ofrece una interfaz de usuario rica en funciones para interactuar con el software.- Fácil sincronización de eventos con calendarios de Google y Outlook.- Configuración y APIs sencillas.- Compatible con todos los navegadores modernos.- Amplios recursos de aprendizaje como demostraciones, documentación y videos para aprender rápidamente y comenzar con el React Scheduler.
¿Cuál es el precio de Syncfusion React Scheduler?
No vendemos el React 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 React Scheduler. El precio de la licencia de equipo comienza en $395 al mes para 5 desarrolladores e incluye soporte y actualizaciones hasta que expire la suscripción. Además, podríamos ofrecer descuentos basados en las promociones activas actualmente. 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 React Scheduler?
Puede encontrar nuestra demostración del React Scheduler, que muestra cómo renderizar y configurar el Scheduler.
¿Cómo crear un Scheduler en React?
Puede crear un Scheduler en React utilizando el componente React Scheduler de Syncfusion Primeros pasos. Instale el paquete @syncfusion/ej2-react-schedule, importe el ScheduleComponent y configure las vistas, las fuentes de datos y la configuración de eventos.
¿Qué hace que el planificador de citas gratuito de Syncfusion sea una opción destacada para los usuarios?
Syncfusion ofrece una licencia comunitaria gratuita para individuos y pequeñas empresas, lo que convierte a su React Scheduler en una de las mejores opciones gratuitas. Ofrece características de nivel empresarial que incluyen múltiples vistas, agrupación de recursos y edición de eventos sin limitaciones.
¿Puedo comprar el componente Syncfusion React Scheduler por separado?
No, nuestros 1,600+ componentes y frameworks para web, móvil y escritorio, incluido nuestro React Scheduler, no se venden individualmente. Solo están disponibles como parte de una licencia de equipo. Sin embargo, hemos fijado un precio competitivo para el producto, por lo que solo cuesta un poco más de lo que cobran otros proveedores por su componente Scheduler solo. También hemos descubierto que, según nuestra experiencia, nuestros clientes suelen empezar a utilizar uno de nuestros productos y luego se expanden rápidamente a varios productos, por lo que creímos que lo mejor era ofrecer todos los 1,600+ componentes y frameworks por una tarifa de suscripción que comienza en $395 al mes para un equipo de 5 desarrolladores. Además, podríamos ofrecer descuentos basados en las promociones activas actualmente. 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 React 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 y personas cuyas organizaciones tengan menos de 1 millón de USD en ingresos brutos anuales y cinco o menos desarrolladores.
¿Cómo empiezo a usar Syncfusion React Scheduler?
Un buen punto de partida sería nuestra completa documentación de introducción.
¿Qué es el componente Schedule en React?
El componente Schedule en Syncfusion React es un componente completo de gestión de calendario y citas. Le permite mostrar eventos, gestionar recursos, habilitar arrastrar y soltar, y personalizar vistas. Admite eventos recurrentes, gestión de zonas horarias e integración con calendarios externos como Google y Outlook.
¿Cuál es la diferencia entre un Scheduler y un Calendar?
Syncfusion React Calendar es un selector de fechas ligero para seleccionar una o varias fechas. Se centra en mostrar fechas y en la navegación básica entre meses y años.Syncfusion React Scheduler es un gestor de citas con todas las funciones que admite eventos, recursos, citas recurrentes, múltiples vistas (día, semana, mes, línea de tiempo), arrastrar y soltar, e integración con calendarios externos como Google y Outlook.
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.
Aweseome, enough said. really
Easy usability, solving real life problems. easy to implement. most of the cases has the operators and settings possibilities you right away need. never fails to impress.
Oliver O.
Geschäftsführung Kreation/Artdirektion
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
Don M.
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 React 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 y tutoriales de React Scheduler
Las publicaciones de blogs y videos tutoriales de React Scheduler lo guiarán en la creación de su primera aplicación con componentes de React. 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 nuestro blog y canales de videos tutoriales para obtener actualizaciones de React Scheduler.
