React Scheduler - Un composant de calendrier dévénements flexible
- Consultez des événements dynamiques en vue jour, semaine, mois, agenda, année ou chronologie.
- Affichez plusieurs calendriers sur une même page, événements finement regroupés.
- Personnalisez sans effort avec des options de modèles prêtes à l’emploi et intégrées.
Quick Overview Video
Trusted by the world’s leading companies
Le React Scheduler, ou calendrier d’événements, est un composant de calendrier d’événements complet qui aide les utilisateurs à gérer leur temps efficacement. Il facilite la planification facile des ressources et la replanification des événements ou des rendez-vous via des pop-ups d’édition, le glisser-déposer et les actions de redimensionnement.
Pourquoi choisir Syncfusion React Scheduler ?
Haute performance
Le React Scheduler charge les données à la demande par défaut pour réduire les temps de transfert et de chargement. Un mappage de champs approprié est obligatoire lors de la liaison du Scheduler à des sources de données avec des noms de champs différents.
Liaison de données transparente
Liez les données de manière transparente avec diverses sources de données locales et distantes telles que JSON, OData, WCF et les services Web RESTful à l’aide d’un gestionnaire de données.
Vues intégrées
Plusieurs modes de vue intégrés sont disponibles : jour, semaine, semaine de travail, mois, agenda, mois-agenda, année et chronologie. Avec une variété de variables spécifiques à la vue, vous pouvez personnaliser chaque vue.
Événements récurrents
Configurez facilement des événements récurrents à répéter quotidiennement, hebdomadairement, mensuellement ou annuellement avec des options de récurrence intégrées.
Plusieurs ressources et regroupement
Pour regrouper les ressources selon plusieurs facteurs, le React Scheduler offre un large éventail d’options flexibles. Il couvre également la planification des chronologies et le regroupement des rendez-vous par ressource et par date.
S’adapte à n’importe quelle résolution
Le Scheduler a une mise en page très réactive et une conception optimisée pour les ordinateurs de bureau, les écrans tactiles et les smartphones. Il fonctionne bien sur tous les téléphones mobiles utilisant iOS, Android ou Windows OS.
Thèmes personnalisables attrayants
Design de pointe avec plus de 5 thèmes intégrés tels que Fluent, Tailwind CSS, Bootstrap, Material, Fabric, et plus encore. Utilisez l’outil Theme Studio en ligne pour personnaliser facilement les thèmes du Scheduler.
Mondialisation et localisation
Permet aux utilisateurs de différentes régions d’utiliser le Scheduler en formatant les dates, la devise et la numérotation selon leurs préférences.
AI Scheduler pour une planification plus intelligente
L’AI Scheduler organise facilement votre calendrier. Il suffit de taper des instructions comme “Rencontrez l’équipe tous les vendredis à 10h”, et il s’occupe du reste. Il vérifie les conflits, suggère les horaires optimaux et organise visuellement votre calendrier.
Découvrez une planification plus intelligente avec cette démo
Exemple de code React Scheduler
Commencez facilement avec le React Scheduler en utilisant quelques lignes simples d’exemple de code TSX comme démontré ci-dessous. Explorez également notre exemple de React Scheduler qui vous montre comment rendre et configurer un Scheduler dans 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 />);Plusieurs vues de planificateur
Une grande variété de modes de vue intégrés sont disponibles : jour, semaine, semaine de travail, mois, agenda, mois-agenda, année et chronologie. Configurez facilement chaque vue individuelle avec différentes options spécifiques à la vue.
Vue jour, semaine et semaine de travail
Affichez les rendez-vous pour un seul jour ou sur plusieurs jours à l’aide du React Scheduler.
Vue mois
Dans le React Scheduler, vous pouvez afficher les événements et les rendez-vous sur un seul jour ou plusieurs jours pour un mois entier.
Vue agenda
Chargez les événements virtuellement et affichez-les sous forme de liste dans un ordre séquentiel regroupé par jour. Une option existe pour spécifier le nombre de jours à charger initialement dans la vue agenda du React Scheduler.
Vue mois-agenda
Affichez la disposition du calendrier et les événements de la date actuellement sélectionnée. Un indicateur rond au bas d’une date indique la présence d’un ou plusieurs événements ce jour-là.
Vue année
La vue année affiche tous les mois d’une année particulière au format calendrier. Dans cette vue calendrier, les dates contenant des événements et des rendez-vous sont mises en évidence par des points placés sous la date individuelle. Lorsque vous cliquez sur la date, la fenêtre contextuelle de l’événement s’affiche et les événements sont répertoriés.
Vues chronologiques
React fournit cinq vues chronologiques intégrées : jour chronologique, semaine chronologique, semaine de travail chronologique, mois chronologique et année chronologique. Chaque vue affiche les événements avec précision le long d’un axe temporel horizontal pour un seul jour ou plusieurs jours.
Pour offrir de meilleures performances, les vues chronologiques chargent les ressources, les événements et les rendez-vous virtuellement à chaque action de défilement.
Configurations de vue uniques
Configurez facilement chaque mode de vue individuel avec des paramètres de calendrier différents. Par exemple, vous pouvez activer la fonction de regroupement en vue mois et appliquer des modèles d’événements en vue semaine.
Intervalles de vue extensibles
Affichez plusieurs jours, semaines et mois en étendant chaque mode de vue en fonction du nombre d’intervalles fourni.
Intervalle de temps de blocage
Vous pouvez bloquer des plages horaires spécifiques sur le calendrier d’événements React pour empêcher la création d’événements et de rendez-vous dans ce créneau horaire.
Rendez-vous en ligne
Lorsque cette fonction est activée, les utilisateurs peuvent créer et modifier des rendez-vous en ligne en un seul clic sur les cellules du planificateur ou sur le sujet du rendez-vous existant. Appuyer sur Entrée après avoir tapé le nouveau texte du sujet dans la zone de texte en ligne mettra à jour et enregistrera le rendez-vous de manière appropriée.
Options de gestion d’événements avancées
Le React Event Calendar fournit des représentations claires, vives et exactes des événements et des rendez-vous sur la chronologie du Scheduler, en fonction de leur durée assignée.
Capacités d’ajout et d’édition
Il existe un support intégré pour une meilleure gestion des événements, comme la création et l’édition plus faciles des rendez-vous à l’aide de l’éditeur d’événements par défaut ou par des actions intuitives de glisser-déposer et de redimensionnement. De plus, vous pouvez également ajouter des champs de données personnalisés aux événements et à la source de données de ressources.
Sélection multiple d’événements
Sélectionnez facilement plusieurs événements à la fois en appuyant sur la touche Ctrl et en cliquant sur les événements. Sur les appareils mobiles, faites de même en appuyant longuement sur un événement, puis continuez la sélection en appuyant simplement sur d’autres événements. Après avoir sélectionné les événements avec succès, supprimez-les ou repositionnez-les simultanément.
Info-bulle
L’info-bulle personnalisable affiche les informations de l’événement lorsque le pointeur de la souris survole l’événement. Faites de même sur les appareils mobiles en appuyant longuement sur un événement.
Personnalisation de l’apparence
Modifiez l’apparence des événements et des rendez-vous du React Scheduler en personnalisant leur apparence et leur style par défaut à l’aide de n’importe quel HTML ou CSS.
Fuseau horaire
Indépendamment du fuseau horaire du système, le React Event Calendar prend en charge la définition du fuseau horaire requis pour le contrôle lui-même, ainsi que pour les événements.
Presse-papiers
Le React Scheduler prend en charge la fonctionnalité du presse-papiers, permettant aux utilisateurs de gérer les événements efficacement. Les utilisateurs peuvent copier les événements sélectionnés à l’aide du raccourci Ctrl+C, couper les événements avec Ctrl+X, et coller les événements dans différents créneaux horaires à l’aide de Ctrl+V.
Lignes adaptatives
Une option intégrée a été ajoutée au React Event Calendar pour augmenter automatiquement la hauteur des lignes dans les vues mois et chronologie lorsque de nouveaux événements ou rendez-vous concurrents sont ajoutés.
Menu contextuel
Un menu contextuel intégré au React Scheduler s’ouvre lorsqu’une cellule ou un rendez-vous est cliqué avec le bouton droit.
Synchronisation des données en temps réel
Les données de rendez-vous en temps réel se synchronisent précisément avec notre React Scheduler.
Intégration d’Outlook et de Google Calendar
Synchronisez facilement les événements entre notre React Event Calendar et Google ou Outlook Calendar via l’API Google Calendar ou la bibliothèque d’objets Microsoft Outlook.
Mises à jour en temps réel
La communication de données bidirectionnelle transmet les mises à jour de rendez-vous côté serveur effectuées sur le Scheduler à tous les clients connectés via SignalR.
Options de calendrier riches en fonctionnalités
Le React Event Calendar hérite de presque toutes les fonctionnalités spécifiques au calendrier, telles que le premier jour de la semaine et l’échelle de temps.
Premier jour de la semaine
Personnalisez le premier jour de la semaine, qui est par défaut le dimanche, selon les paramètres régionaux par défaut. Vous pouvez également utiliser cette option pour les vues individuelles.
Heures de début et de fin personnalisées
Affichez la mise en page du planificateur d’événements avec des durées spécifiques en masquant les heures indésirables.
Échelle de temps flexible
Utilisez des options d’échelle de temps personnalisables pour visualiser clairement une chronologie d’événements et définir une durée différente.
Temps de travail
Les cellules actives du planificateur (affichées en blanc) représentent visuellement les jours de travail et les heures de travail.
Mise en évidence de l’heure actuelle
Indiquez la date actuelle avec un en-tête de date mis en évidence. Marquez précisément l’heure actuelle sur toutes les vues.
Dissimuler les jours de week-end
Dissimuler les jours de week-end du planificateur vous permet d’afficher uniquement les jours de travail dans toutes les vues.
Affichage du numéro de semaine
Affichez le numéro de semaine de la plage de dates actuelle à côté de l’en-tête de date dans les vues jour, semaine et semaine de travail. Affichez également le numéro de semaine dans la vue mois comme première colonne. Le numéro de semaine est déterminé par le premier jour de la semaine et les règles de semaine (premier jour ou première semaine complète, ou première semaine de quatre jours).
Mode horaire
Le contrôle Scheduler prend en charge les formats horaires de 12 heures et de 24 heures.
Interface utilisateur entièrement personnalisable
Personnalisez l’apparence de n’importe quelle partie de l’interface du Scheduler à l’aide de styles HTML et CSS.
En-tête de date
Modifiez l’apparence par défaut de la barre d’en-tête en ajoutant n’importe quel type de CSS, de texte personnalisé ou d’image.
Interface utilisateur complète du planificateur
Un événement côté client intégré permet aux utilisateurs finaux de personnaliser n’importe quelle partie de l’interface utilisateur du planificateur.
Barre d’en-tête
Ajoutez des éléments personnalisés aux options de la barre d’en-tête par défaut. Vous pouvez masquer ou afficher les options de la barre d’en-tête communes.
Cellules du planificateur
Les options de modèle prêtes à l’emploi vous permettent de personnaliser facilement les cellules en ajoutant n’importe quel type de texte, d’image ou de CSS.
Pop-ups rapides
Personnalisez facilement les pop-ups qui s’ouvrent en cliquant simplement sur les cellules, les événements ou les rendez-vous avec votre propre interface utilisateur ou conception de modèle.
Ouvrir l’éditeur d’événements en externe
Le calendrier d’événements React offre une méthode intégrée pour ouvrir la fenêtre de l’éditeur d’événements par défaut par programmation.
Interactions conviviales
La conception UI moderne et tendance du React Scheduler rend les interactions utilisateur plus simples et plus efficaces.
Aperçu rapide des événements
Cliquer ou appuyer sur des événements affiche leurs détails importants, tels que le sujet et l’heure, ainsi que les options d’édition et de suppression.
Sélection de cellules
Cliquez et faites glisser le pointeur sur les cellules du planificateur pour une sélection multiple de cellules. Vous pouvez faire de même avec les raccourcis clavier.
Conteneur d’événements
Un clic sur l’indicateur de texte (+n more) dans les vues mois et chronologie ouvrira un conteneur d’événements répertoriant tous les détails d’événements et de rendez-vous masqués d’une journée.
Navigation rapide
Le React Scheduler offre un moyen intuitif de naviguer entre les plages de dates à l’aide d’un calendrier intégré, et également de naviguer entre les différents modes d’affichage.
Applications en temps réel
De nombreuses applications en temps réel utilisent des planificateurs comme partie intégrante, servant ainsi à différentes fins selon le type de projet. Certaines des applications actives sont : Calendrier tarifaire, Calendrier de salles de réunion, Planificateur de rendez-vous chez le médecin, Réservation de chambres d’hôtel.
Fonctionnalités interactives
Le React Scheduler permet aux utilisateurs d’exporter ses événements de deux manières : sous forme de fichier Excel ou sous forme de fichier ICS.
Exporter vers Excel
Le React Scheduler vous permet d’exporter tous ses événements vers un document Excel par défaut. Il offre également des options de personnalisation supplémentaires pour exporter des collections de données d’événements personnalisées.
Exporter et importer des ICS
Le React Event Calendar prend en charge l’exportation de toutes ses données d’événements au format iCal, et il prend en charge l’importation d’événements à partir d’un fichier iCal dans le Scheduler.
APIs conviviales pour les développeurs
Les développeurs peuvent avoir un contrôle total sur l’interface utilisateur et le comportement du calendrier d’événements grâce à ses APIs intégrées et conviviales pour les développeurs. Cela vous permet de personnaliser facilement même les fonctionnalités complexes du planificateur.
Accessibilité
Le composant React Scheduler est facilement accessible par les lecteurs d’écran. Un support complet d’interaction au clavier a également été fourni.
Entièrement accessible
Le composant React Scheduler offre une prise en charge complète de l’accessibilité WAI-ARIA. L’interface utilisateur du Scheduler comprend des éléments visuels à contraste élevé, offrant aux personnes malvoyantes la meilleure expérience de visualisation. De plus, les descriptions d’interface utilisateur valides sont facilement accessibles grâce aux technologies d’assistance telles que les lecteurs d’écran.
Interactif au clavier
Divers raccourcis clavier sont disponibles pour effectuer presque toutes les actions du planificateur, telles que la sélection multiple de cellules ou d’événements et la navigation vers d’autres vues.
De droite à gauche (RTL)
Affichez l’ordonnanceur d’événements en suivant les conventions appropriées de droite à gauche.
Vous ne savez pas comment créer votre premier React Scheduler? Nos vidéos de tutoriel et notre documentation peuvent vous aider.
J’aimerais le regarder maintenant J’aimerais le lire maintenantDécouvrez l'écosystème complet de composants React de Syncfusion
Découvrez plus de 145+ composants d'interface utilisateur React, comprenant des contrôles éprouvés et prêts pour la production, ainsi que les derniers composants React purs conçus nativement pour le développement d'applications web modernes.
-
Composants React
-
Composants React purs
-
Composants intelligentsGrillesVisualisation des donnéesListes déroulantesVisionneuses et éditeurs de fichiersBoutonsChat interactifChamps de saisieNavigationFormulairesNotifications
-
GrillesVisualisation des donnéesNavigationEntrées
Foire aux questions
Pourquoi devriez-vous choisir Syncfusion Essential Studio® React Scheduler?
Le React Scheduler de Syncfusion offre les fonctionnalités suivantes :- Une mise en page très réactive et un design finement optimisé pour les ordinateurs de bureau, les tablettes et les téléphones mobiles.- Différentes vues de base comme le jour, la semaine, la semaine de travail, le mois et le mode calendrier annuel et le mode chronologique.- Le défilement virtuel permet aux utilisateurs de charger un grand nombre de ressources et d’événements dynamiquement.- S’adapte instantanément aux différents fuseaux horaires.- Regroupement de plusieurs ressources basé sur les vues chronologique, horizontale, hiérarchique et par date.- L’un des meilleurs React Scheduler du marché qui offre une interface utilisateur riche en fonctionnalités pour interagir avec le logiciel.- Synchronisation facile des événements avec les calendriers Google et Outlook.- Configuration simple et API.- Prend en charge tous les navigateurs modernes.- De vastes ressources d’apprentissage telles que des démos, de la documentation et des vidéos pour apprendre rapidement et démarrer avec le React Scheduler.
Quel est le prix du Syncfusion React Scheduler?
Nous ne vendons pas le React Scheduler séparément. Il n’est disponible à l’achat qu’en tant que partie de la licence d’équipe Syncfusion. Celle-ci contient plus de 1,600 composants et frameworks, y compris le React Scheduler. Le prix de la licence d’équipe commence à 395 $ par mois pour 5 développeurs et comprend le support et les mises à jour jusqu’à l’expiration de l’abonnement. De plus, nous pourrions offrir des réductions basées sur les promotions actuellement actives. Veuillez contacter nos spécialistes produits dès aujourd’hui pour voir si vous êtes admissible à des réductions supplémentaires.
Où puis-je trouver la démo du Syncfusion React Scheduler?
Vous pouvez trouver notre démo du React Scheduler, qui montre comment rendre et configurer le Scheduler.
Comment créer un Scheduler dans React?
Vous pouvez créer un Scheduler dans React en utilisant le composant React Scheduler de Syncfusion Démarrage rapide. Installez le paquet @syncfusion/ej2-react-schedule, importez le ScheduleComponent et configurez les vues, les sources de données et les paramètres d’événements.
Qu’est-ce qui fait du planificateur de rendez-vous gratuit de Syncfusion un choix exceptionnel pour les utilisateurs?
Syncfusion propose une licence communautaire gratuite pour les particuliers et les petites entreprises, ce qui fait de son React Scheduler l’une des meilleures options gratuites. Il offre des fonctionnalités de niveau entreprise, notamment plusieurs vues, le regroupement de ressources et l’édition d’événements sans limitations.
Puis-je acheter le composant Syncfusion React Scheduler séparément?
Non, nos 1,600+ composants et frameworks pour le web, le mobile et le bureau, y compris notre React Scheduler, ne sont pas vendus individuellement. Ils ne sont disponibles que dans le cadre d’une licence d’équipe. Cependant, nous avons fixé un prix compétitif pour le produit, de sorte qu’il ne coûte qu’un peu plus cher que ce que certains autres fournisseurs facturent pour leur composant Scheduler seul. Nous avons également constaté, d’après notre expérience, que nos clients commencent généralement par utiliser l’un de nos produits, puis s’étendent rapidement à plusieurs produits. C’est pourquoi nous avons estimé qu’il était préférable d’offrir tous les 1,600+ composants et frameworks pour un forfait d’abonnement qui commence à 395 $ par mois pour une équipe de 5 développeurs. De plus, nous pourrions être en mesure d’offrir des réductions basées sur les promotions actuellement actives. Veuillez contacter nos spécialistes produits dès aujourd’hui pour savoir si vous êtes admissible à des réductions supplémentaires.
Puis-je télécharger et utiliser gratuitement le Syncfusion React Scheduler?
Non, il s’agit d’un produit commercial et il nécessite une licence payante. Cependant, une licence communautaire gratuite est également disponible pour les entreprises et les particuliers dont les organisations ont un chiffre d’affaires annuel brut inférieur à 1 million USD et cinq développeurs ou moins.
Comment démarrer avec Syncfusion React Scheduler?
Un bon point de départ serait notre documentation complète de démarrage.
Qu’est-ce que le composant Scheduler dans React?
Le composant Schedule de Syncfusion React est un composant complet de gestion de calendrier et de rendez-vous. Il vous permet d’afficher des événements, de gérer des ressources, d’activer le glisser-déposer et de personnaliser les vues. Il prend en charge les événements récurrents, la gestion des fuseaux horaires et l’intégration avec des calendriers externes comme Google et Outlook.
Quelle est la différence entre un Scheduler et un Calendar?
Syncfusion React Calendar est un sélecteur de dates léger pour sélectionner une ou plusieurs dates. Il se concentre sur l’affichage des dates et la navigation de base entre les mois et les années.Syncfusion React Scheduler est un gestionnaire de rendez-vous complet qui prend en charge les événements, les ressources, les rendez-vous récurrents, plusieurs vues (jour, semaine, mois, chronologique), le glisser-déposer et l’intégration avec des calendriers externes comme Google et Outlook.
Nos clients nous aiment
Grâce à un excellent ensemble d’outils et à une excellente équipe d’assistance, Syncfusion® réduit le temps de développement de ses clients.Voici quelques-uns de leurs témoignages.
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
Voir de vraies histoires de réussite
Des développeurs du monde entier font confiance à Essential Studio de Syncfusion pour simplifier les projets complexes et accélérer leur livraison. Grâce à sa vaste bibliothèque de contrôles d’interface utilisateur, à ses SDK puissants et à son support fiable, Essential Studio aide les équipes à créer des applications prêtes pour l’entreprise en toute confiance.
Explorer des études de casIndustrie
Développement de logiciels
75% Réduction des coûts
50% Développement plus rapide
Industrie
Services publics (pétrole et gaz)
450+ heures économisées
Processus rationalisés et heures d’effort de développement économisées.
Fonctionnalités avancées et flexibles
Utilisateurs autonomisés grâce à une fonctionnalité robuste et polyvalente.
Industrie
Logiciel et technologie
1000+ heures économisées
Développement accéléré grâce à des composants d’interface utilisateur prêts pour l’entreprise.
Gestion de fichiers efficace
Flux de travail rationalisés grâce à des bibliothèques de documents, sans les construire à partir de zéro.
Industrie
Logiciel et technologie
2 ans de retard évité
Deux ans de retards évités grâce à une planification proactive.
Livraison à temps
Projets livrés dans les délais à l’aide de contrôles fiables.
Industrie
Services informatiques et conseil en TI
Performances améliorées
Grands ensembles de données gérés avec une personnalisation aisée et un débogage rapide.
Hautement personnalisable
Contrôles plug-and-play avec intégration rapide de modèles.
Industrie
Services professionnels
Accès instantané
Disponibilité rapide des fonctionnalités et des ressources.
Dépendances réduites
Moins de dépendances pour un développement plus rapide.
Evalue par des utilisateurs du monde entier.
Ressources du Syncfusion React Scheduler
Kits d’interface utilisateur
Téléchargement Figma
Téléchargement Figma
Recompenses
L’excellence—c’est une chose de l’affirmer, mais cela signifie davantage lorsque les autres la reconnaissent. Syncfusion® est fier de détenir les récompenses de l'industrie suivantes.
Activités récentes dans les blogs et tutoriels React Scheduler
Les articles de blog et les vidéos tutoriels sur le React Scheduler vous guideront dans la création de votre première application avec les composants React. Ils fournissent des stratégies de résolution de problèmes, décrivent les fonctionnalités, annoncent les nouvelles versions de fonctionnalités, expliquent les meilleures pratiques et présentent des scénarios d’exemple. Explorez nos derniers articles sur notre blog et nos chaînes vidéo tutoriel pour les mises à jour du React Scheduler.
