Scheduler JavaScript - Un contrôle de calendrier dévénements flexible
- Affichez des événements dynamiques en vues jour, semaine, mois, agenda, année, chronologie.
- Affichez plusieurs calendriers sur une seule page avec des événements finement groupés.
- Synchronisez facilement les événements avec les calendriers Google et Outlook.
Trusted by the world’s leading companies
Aperçu
Le Scheduler JavaScript, 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 et la replanification des événements ou rendez-vous grâce à des pop-ups d’édition, des actions de glisser-déposer et de redimensionnement.
Pourquoi choisir le Scheduler JavaScript de Syncfusion ?
Haute performance
Le Scheduler charge les données à la demande par défaut pour réduire les temps de transfert et de chargement. Un mappage de champ 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
Lie facilement des données 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 d’affichage intégrés sont disponibles : jour, semaine, semaine de travail, mois, agenda, agenda mensuel, année et chronologie. Avec une variété de variables spécifiques à chaque vue, vous pouvez personnaliser chaque vue.
Événements récurrents
Configurez facilement les événements récurrents pour qu’ils se répètent quotidiennement, hebdomadairement, mensuellement ou annuellement avec des options de récurrence intégrées.
Plusieurs ressources et regroupement
Pour regrouper des ressources en fonction de plusieurs facteurs, le Scheduler offre un large éventail d’options flexibles. Il couvre également les chronologies de planification et le regroupement des rendez-vous par ressource et par date.
S’adapte à toute résolution
Le Scheduler a une mise en page très réactive et un design optimisé pour les ordinateurs de bureau, les écrans tactiles et les smartphones. Il fonctionne bien sur tous les téléphones mobiles utilisant les systèmes d’exploitation iOS, Android ou Windows.
Thèmes personnalisables attrayants
Un design de pointe avec plus de 5 thèmes intégrés tels que Fluent, Tailwind CSS, Bootstrap, Material, Fabric, et bien 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.
Scheduler propulsé par l’IA pour une gestion du temps efficace
Boostez votre productivité avec l’AI Scheduler. Il vous suffit de saisir des commandes comme « Planifier une réunion d’équipe chaque vendredi à 10 h », et il gère intelligemment votre calendrier—propose les meilleurs créneaux, évite les chevauchements et organise visuellement votre planning.
Exemple de code du Scheduler JavaScript
Démarrez facilement avec le Scheduler JavaScript en utilisant quelques lignes simples de code HTML et TSX comme démontré ci-dessous. Explorez également notre exemple de Scheduler JavaScript qui vous montre comment afficher et configurer le 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: 'Réunion de Scrum',
Location: 'Bureau',
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');Plusieurs vues du Scheduler
Une grande variété de modes d’affichage intégrés est disponible : jour, semaine, semaine de travail, mois, agenda, agenda mensuel, année et chronologie. Configurez facilement chaque vue individuelle avec différentes options spécifiques à chaque vue.
Vues Jour, semaine et semaine de travail
Affichez les rendez-vous pour une seule journée ou sur plusieurs jours.
Vue Mois
Affichez les événements et les rendez-vous sur une seule journée 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.
Vue Agenda mensuel
Affichez la mise en page du calendrier et les événements de la date actuellement sélectionnée. Un indicateur rond en 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 dans un format de calendrier. Dans cette vue de 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 listés.
Vues chronologiques
JavaScript fournit cinq vues chronologiques intégrées : jour de la chronologie, semaine de la chronologie, semaine de travail chronologique, mois de la chronologie et année de la chronologie. Chaque vue affiche les événements avec précision sur un axe temporel horizontal pour une seule journée 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 différents paramètres de calendrier. Par exemple, vous pouvez activer la fonction de regroupement dans la vue mensuelle et appliquer des modèles d’événements dans la vue hebdomadaire.
Intervalles d’affichage 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 JavaScript pour empêcher la création d’événements et de rendez-vous dans ce créneau horaire.
Rendez-vous en ligne
Avec cette fonctionnalité activée, les utilisateurs peuvent créer et modifier des rendez-vous en ligne en un seul clic sur les cellules du Scheduler 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 avancées de gestion des événements
Le Calendrier d’événements JavaScript fournit des représentations claires, dynamiques et exactes des événements et des rendez-vous sur la chronologie du Scheduler , en fonction de leur durée attribuée.
Capacités d’ajout et d’édition
Il existe un support intégré pour une meilleure gestion des événements, tels que la création et l’édition plus faciles de rendez-vous à l’aide de l’éditeur d’événements par défaut ou via 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 des ressources.
Sélection multi-événements
Sélectionnez facilement plusieurs événements à la fois en appuyant et en maintenant la touche Ctrl tout en cliquant sur les événements. Sur les appareils mobiles, faites de même en appuyant et en maintenant un événement, et continuez à sélectionner en cliquant simplement sur d’autres événements. Après avoir sélectionné avec succès les événements, supprimez-les ou repositionnez-les simultanément.
Infobulle
L’infobulle 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 et en maintenant un événement.
Personnalisation de l’apparence
Modifiez l’apparence des événements et des rendez-vous du Scheduler JavaScript 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 Calendrier d’événements JavaScript 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 Scheduler JavaScript prend en charge la fonctionnalité de presse-papiers, permettant aux utilisateurs de gérer efficacement les événements. 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 Calendrier d’événements JavaScript pour augmenter automatiquement la hauteur des lignes dans les vues mensuelles et chronologiques lorsque de nouveaux événements ou rendez-vous simultanés sont ajoutés.
Menu contextuel
Le menu contextuel intégré au Scheduler JavaScript s’ouvre lorsqu’une cellule ou un rendez-vous est cliqué avec le bouton droit de la souris.
Synchronisation de données en temps réel
Les données de rendez-vous en temps réel se synchronisent précisément avec notre Scheduler JavaScript.
Intégration de Google Agenda et Outlook
Synchronisez facilement les événements entre notre Calendrier d’événements JavaScript et Google ou Outlook Calendar via l’API Google Calendar ou la bibliothèque d’objets de Microsoft Outlook.
Mises à jour en temps réel
La communication bidirectionnelle des données transmet les mises à jour des 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 Calendrier d’événements JavaScript 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 par défaut est le dimanche, selon les paramètres régionaux. Vous pouvez également utiliser cette option pour des vues individuelles.
Heures de début et de fin personnalisées
Affichez la mise en page du Scheduler 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 afficher clairement une chronologie des événements et définir une durée différente.
Temps de travail
Les cellules actives du Scheduler (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.
Masquage des jours de week-end
Le masquage des jours de week-end du Scheduler vous permet d’afficher uniquement les jours ouvrables 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 mensuelle comme première colonne. Le numéro de semaine est déterminé par le premier jour de la semaine et les règles (premier jour ou première semaine complète, ou première semaine de quatre jours).
Mode horaire
Le contrôle du Scheduler prend en charge les formats d’heure 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 Scheduler
Un événement côté client intégré permet aux utilisateurs finaux de personnaliser n’importe quelle partie de l’interface utilisateur du Scheduler .
Barre d’en-tête
Ajoutez des éléments personnalisés aux options de barre d’en-tête par défaut. Vous pouvez masquer ou afficher les options de barre d’en-tête communes.
Cellules du Scheduler
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 un seul clic 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 JavaScript 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 Scheduler JavaScript rend les interactions utilisateur plus simples et plus efficaces.
Aperçu rapide de l’événement
Un clic ou un toucher sur les événements affiche leurs détails importants, tels que le sujet et l’heure, ainsi que les options de modification et de suppression.
Sélection de cellules
Cliquez et faites glisser le pointeur sur les cellules du Scheduler 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 mensuelles et chronologiques ouvrira un conteneur d’événements listant tous les détails d’événements et de rendez-vous masqués d’une journée.
Navigation rapide
Le Scheduler JavaScript offre un moyen intuitif de naviguer d’avant en arrière entre les plages de dates à l’aide d’un calendrier intégré, et également de naviguer entre différents modes de vue.
Applications en temps réel
De nombreuses applications en temps réel utilisent des Scheduler s comme partie intégrante, servant ainsi à des fins différentes en fonction du type de projet. Certaines des applications actives sont : Calendrier des tarifs, Calendrier des salles de réunion, Scheduler de rendez-vous chez le médecin et Réservation de chambres d’hôtel.
Fonctionnalités interactives
Le Scheduler JavaScript permet aux utilisateurs d’exporter ses événements de deux manières : sous forme de fichier Excel ou de fichier ICS.
Exporter vers Excel
Le Scheduler JavaScript 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 Calendrier d’événements JavaScript 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 .
API 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 API intégrées et conviviales. Il vous permet de personnaliser même les fonctionnalités complexes du Scheduler avec facilité.
Accessibilité
Le composant Scheduler JavaScript est facilement accessible par les lecteurs d’écran. Un support complet d’interaction au clavier a également été fourni.
Complètement accessible
Le composant Scheduler JavaScript a un support complet d’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, des 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 Scheduler , telles que la sélection multiple de cellules ou d’événements et la navigation vers d’autres vues.
De droite à gauche (RTL)
Affichez le Scheduler d’événements en respectant les conventions de droite à gauche.
Autres frameworks supportés
Le Scheduler est disponible dans les frameworks Blazor, React, Angular et Vue. Explorez ses options spécifiques à la plateforme via les liens suivants :
Navigateurs supportés
Le Scheduler JavaScript fonctionne bien avec tous les navigateurs web modernes, y compris Chrome, Firefox, Edge, Safari et Opera.
Vous ne savez pas comment créer votre premier Scheduler JavaScript ? Notre documentation peut vous aider.
J’aimerais le lire maintenantPlus de 145+ contrôles d'interface utilisateur JavaScript
TOUS LES CONTROLES
Composants intelligents
Grilles
Visualisation des données
Listes déroulantes
Visionneuses et éditeurs de fichiers
Boutons
Chat interactif
Champs de saisie
Navigation
Formulaires
Notifications
Foire aux questions
Pourquoi devriez-vous choisir le Scheduler JavaScript de Syncfusion ?
Le Scheduler JavaScript, riche en fonctionnalités, offre les avantages suivants :
- 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 l’année en mode calendrier et le mode chronologique.
Le défilement virtuel vous permet de charger un grand nombre de ressources et d’événements dynamiquement.
- S’adapte instantanément à différents fuseaux horaires.
Regroupement de ressources multiples basé sur la chronologie, l’horizontale, la hiérarchique et les vues par date.
- Synchronisation facile des événements avec les calendriers Google et Outlook.
- L’un des meilleurs Scheduler s JavaScript du marché qui offre une interface utilisateur riche en fonctionnalités pour interagir avec le logiciel.
Configuration simple et API.
- Prise en charge de tous les navigateurs modernes.
Vastes ressources d’apprentissage telles que des démos et une documentation pour apprendre et démarrer rapidement.
Quel est le prix du Scheduler JavaScript de Syncfusion ?
Nous ne vendons pas le Scheduler JavaScript séparément. Il n’est disponible à l’achat que dans le cadre de la licence d’équipe Syncfusion. Celle-ci contient plus de 1,600 composants et frameworks, y compris le Scheduler JavaScript. Le prix de la licence d’équipe commence à 395 $ par mois pour 5 développeurs et inclut le support et les mises à jour jusqu’à l’expiration de l’abonnement. De plus, nous pourrions offrir des réductions en fonction des 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 Scheduler JavaScript de Syncfusion ?
Vous pouvez trouver notre démo du Scheduler JavaScript, qui montre comment rendre et configurer le Scheduler .
Puis-je acheter le composant Scheduler JavaScript de Syncfusion séparément ?
Non, nos 1,600+ composants et frameworks pour le web, le mobile et le bureau, y compris notre Scheduler JavaScript, 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 que légèrement plus cher que ce que certains autres fournisseurs facturent pour leur seul contrôle de Scheduler . 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 jugé préférable d’offrir tous les 1,600+ composants et frameworks pour un 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 en fonction des promotions actuellement actives. Veuillez contacter nos spécialistes produits dès aujourd’hui pour voir si vous êtes admissible à des réductions supplémentaires.
Puis-je télécharger et utiliser gratuitement le Scheduler JavaScript de Syncfusion ?
Non, il s’agit d’un produit commercial qui nécessite une licence payante. Cependant, une licence communautaire gratuite est également disponible pour les entreprises et les particuliers dont les organisations ont moins d’un million de dollars US de revenus bruts annuels et cinq développeurs ou moins.
Comment démarrer avec le Scheduler JavaScript de Syncfusion ?
Un bon point de départ serait notre documentation complète de démarrage.
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.
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
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 Scheduler JavaScript de Syncfusion
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 sur les blogs du Scheduler JavaScript
Les articles de blog sur le Scheduler JavaScript vous guideront dans la création de votre première application avec les contrôles JavaScript. 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 exemples de scénarios. Explorez nos derniers articles sur nos canaux de blog pour les mises à jour du Scheduler JavaScript.
BLOG
Optimisation de la productivité : Intégrer Salesforce avec le Scheduler JavaScript
19 NOVEMBRE 2024
