Angular Schedular - Un composant de calendrier dévénements flexible
- Affichez événements dynamiques en vues jour, semaine, mois, agenda, année et chronologique.
- Affichez plusieurs calendriers dans une mise en page avec des événements groupés finement.
- Personnalisez sans effort avec des options de modèle prêtes à l’emploi et intégrées.
Quick Overview Video
Trusted by the world’s leading companies
Aperçu
Le Planificateur Angular (ou Calendrier d’événements Angular) est un composant de calendrier d’événements entièrement fonctionnel qui aide les utilisateurs à gérer leur temps efficacement. Il facilite la planification et la replanification des ressources via des fenêtres contextuelles d’édition, le glisser-déposer et les actions de redimensionnement.
Pourquoi choisir Syncfusion Essential Studio® Planificateur Angular ?
Haute performance
Le Planificateur Angular charge les données à la demande par défaut pour réduire les temps de transfert et de chargement. Un mappage approprié des champs est obligatoire lors de la liaison du planificateur à des sources de données avec des noms de champs différents.
Liaison de données transparente
Lie 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 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 les ressources selon plusieurs facteurs, le Planificateur Angular offre un large éventail d’options flexibles. Il couvre également les délais de planification et le regroupement des rendez-vous par ressource et par date.
S’adapte à toute résolution
Le planificateur 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
Conception 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 planificateur.
Mondialisation et localisation
Permet aux utilisateurs de différentes régions d’utiliser le planificateur en formatant les dates, la devise et la numérotation selon leurs préférences.
Planification intelligente avec Scheduler piloté par IA
Découvrez une planification plus intelligente grâce à notre Scheduler piloté par IA. Il vous suffit de taper “Réunion d’équipe tous les vendredis à 10 h” et il organise automatiquement vos événements, résout les conflits et s’adapte à votre flux de travail. Votre calendrier ne se contente pas de suivre le temps : il vous aide à en tirer le meilleur parti.
Exemple de code du Planificateur Angular
Démarrez facilement avec le planificateur Angular en utilisant quelques lignes simples de code HTML et TS comme démontré ci-dessous. Explorez également notre exemple de planificateur Angular qui vous montre comment rendre et configurer le planificateur dans Angular.
<ejs-schedule [selectedDate]="selectedDate" [eventSettings]="eventSettings">
</ejs-schedule>//app.component.ts
import { Component } from '@angular/core';
import { EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, AgendaService } from '@syncfusion/ej2-angular-schedule';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService]
})
export class AppComponent {
public selectedDate: Date = new Date(2022, 1, 20);
private data: Object[] = [
{
Id: 1,
Subject: 'Scrum Meeting',
Location: 'Office',
StartTime: new Date(2022, 1, 12, 9, 30),
EndTime: new Date(2023, 1, 12, 10, 30),
RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1'
},
];
public eventSettings: EventSettingsModel = { dataSource: this.data };
}
//app.module.ts
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from '../app.component';
@NgModule({
declarations: [AppComponent],
imports: [CommonModule, ScheduleModule, BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}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 des options différentes et spécifiques à la vue.
Vues Jour, semaine et semaine de travail
Affichez les rendez-vous pour une seule journée ou sur plusieurs jours.
Vue Mois
Afficher 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és par jour. Une option existe pour spécifier le nombre de jours à charger initialement dans la vue agenda.
Vue Mois-agenda
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 sous forme 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
Angular 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 de temps 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 des paramètres de calendrier différents. Par exemple, vous pouvez activer la fonction de regroupement en mode mois et appliquer des modèles d’événements en mode semaine.
Intervalles de vue extensibles
Affichez plusieurs jours, semaines et mois en étendant chaque mode de vue en fonction du nombre d’intervalles fourni.
Bloquer l’intervalle de temps
Vous pouvez bloquer des plages horaires spécifiques sur le Calendrier d’événements Angular pour empêcher la création d’événements et de rendez-vous dans cet intervalle de temps.
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 planificateur ou sur le sujet d’un 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 des événements avancées
Le Calendrier d’événements Angular fournit des représentations claires, vivantes et exactes des événements et des rendez-vous le long de la chronologie du planificateur, en fonction de leur durée assignée.
Capacités d’ajout et de modification
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 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 multiple d’é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 tapant une seule fois sur les 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 sur 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 Planificateur Angular en personnalisant leur apparence et leur style par défaut à l’aide de n’importe quel code HTML ou CSS.
Fuseau horaire
Quel que soit le fuseau horaire du système, le Calendrier d’événements Angular 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 Planificateur Angular 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érentes plages horaires à l’aide de Ctrl+V.
Lignes adaptatives
Une option intégrée a été ajoutée au Calendrier d’événements Angular pour augmenter automatiquement la hauteur des lignes dans les vues mois et chronologiques lorsque de nouveaux événements ou rendez-vous simultanés sont ajoutés.
Menu contextuel
Le menu contextuel intégré au Planificateur Angular s’ouvre lorsqu’une cellule ou un rendez-vous est cliqué avec le bouton droit de la souris.
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 Planificateur Angular.
Intégration Outlook et Google Agenda
Synchronisez facilement les événements entre notre Calendrier d’événements Angular 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 de rendez-vous côté serveur effectuées sur le planificateur à tous les clients connectés via SignalR.
Options de calendrier riches en fonctionnalités
Le Calendrier d’événements Angular 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 disposition 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 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.
Masquer les jours de week-end
Masquer les jours de week-end du planificateur 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 mois comme première colonne. Le numéro de semaine est déterminé par le premier jour de la semaine et les règles des semaines (premier jour ou première semaine complète, ou première semaine de quatre jours).
Mode horaire
Le contrôle du planificateur prend en charge les formats horaires de 12 et 24 heures.
Interface utilisateur entièrement personnalisable
Personnalisez l’apparence de n’importe quelle partie de l’interface du planificateur à l’aide de styles HTML et CSS.
En-tête de date
Changez 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 commune.
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 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 Angular 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 moderne et tendance de l’interface utilisateur du planificateur Angular rend les interactions utilisateur plus simples et plus efficaces.
Aperçu rapide de l’événement
Cliquer ou taper 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 cellule
Cliquez et faites glisser le pointeur sur les cellules du planificateur pour une sélection de plusieurs cellules. Vous pouvez faire de même avec les raccourcis clavier.
Conteneur d’événements
Cliquer sur l’indicateur de texte (+n more) dans les vues mois 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 planificateur Angular offre un moyen intuitif de naviguer en avant et en arrière parmi les plages de dates à l’aide d’un calendrier intégré, et également de naviguer entre les différents modes de vue.
Applications en temps réel
De nombreuses applications en temps réel utilisent des planificateurs comme partie intégrante, servant ainsi différents objectifs en fonction du type de projet. Certaines des applications actives sont : Calendrier des tarifs, Calendrier des salles de réunion, Planificateur de rendez-vous médicaux, Réservation de chambres d’hôtel.
Fonctionnalités interactives
Le Planificateur Angular permet aux utilisateurs d’exporter ses événements de deux manières : sous forme de fichier Excel ou de fichier ICS.
Exportation vers Excel
Le Planificateur Angular 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 Angular 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 planificateur.
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 pour les développeurs. Cela vous permet de personnaliser même les fonctionnalités complexes du planificateur avec facilité.
Accessibilité
Le composant Planificateur Angular est facilement accessible par les lecteurs d’écran. Un support complet d’interaction au clavier a également été fourni.
Entièrement accessible
Le composant Planificateur Angular dispose d’un support d’accessibilité WAI-ARIA complet. L’interface utilisateur du planificateur comprend des éléments visuels à contraste élevé, offrant aux personnes malvoyantes la meilleure expérience visuelle. De plus, les descriptions d’interface utilisateur valides sont facilement accessibles grâce à des 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 de plusieurs cellules ou événements et la navigation vers d’autres vues.
Droite à gauche (RTL)
Rendez le planificateur d’événements en suivant les conventions appropriées de droite à gauche.
Compatibilité des versions Angular
Avec l’amélioration continue des versions d’Angular, le Planificateur Angular est tenu à jour pour le rendre compatible avec les versions à partir de 4 jusqu’à la dernière version.
Autres frameworks pris en charge
Le Planificateur est disponible dans les frameworks Blazor, React, JavaScript et Vue. Explorez ses options spécifiques à la plateforme via les liens suivants :
Navigateurs pris en charge
Le Planificateur Angular 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 Planificateur Angular ? Nos vidéos tutoriels et notre documentation peuvent vous aider.
J’aimerais le regarder maintenant J’aimerais le lire maintenantPlus de 145+ composants d'interface utilisateur Angular
TOUS LES COMPOSANTS
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 choisir Syncfusion Essential Studio® Planificateur Angular ?
- Disposition très réactive et conception finement optimisée 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 ouvrable, le mois, et l’année en mode calendrier et le mode chronologique.
Le défilement virtuel permet de charger un grand nombre de ressources et d’événements dynamiquement.
- S’adapte instantanément aux différents fuseaux horaires.
Regroupement de ressources multiples basé sur la chronologie, l’horizontale, la hiérarchique, et les vues par date.
- L’un des meilleurs planificateurs Angular du marché qui offre une interface utilisateur riche en fonctionnalités pour interagir avec le logiciel.
- Synchronisation facile des événements avec Google et Outlook Calendars.
Configuration simple et API.
- Prise en charge de tous les navigateurs modernes.
Ressources d’apprentissage étendues telles que des démos, de la documentation et des vidéos pour apprendre rapidement et démarrer avec le planificateur Angular.
Quel est le prix du Planificateur Angular Syncfusion ?
Nous ne vendons pas le planificateur Angular 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 planificateur Angular. 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 produit dès aujourd’hui pour savoir si vous êtes admissible à des réductions supplémentaires.
Où puis-je trouver la démo du Planificateur Angular Syncfusion ?
Vous pouvez trouver notre démo du Planificateur Angular, qui montre comment rendre et configurer le planificateur.
Puis-je acheter le composant Syncfusion Angular Scheduler séparément ?
Non, nos 1,600+ composants et frameworks pour le web, le mobile et le bureau, y compris notre planificateur Angular, 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 seul composant planificateur. Nous avons également constaté que, d’après notre expérience, nos clients commencent généralement par utiliser un de nos produits, puis s’étendent rapidement à plusieurs produits. Nous avons donc estimé qu’il était 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 produit dès aujourd’hui pour savoir si vous êtes admissible à des réductions supplémentaires.
Puis-je télécharger et utiliser le Planificateur Angular Syncfusion gratuitement ?
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 un chiffre d’affaires annuel brut inférieur à 1 million USD et cinq développeurs ou moins.
Comment démarrer avec le Planificateur Angular 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.
An amazing toolset to accelerate UI development
The number of components available is the best thing about this library. We think of a UI component, and the Angular JS library already offers it. We use the Angular JS library to accelerate development. The experience using and implementing has been great. The support is also excellent.
Shrikant P.
Customer Success Manager
A giant framework with great pricing options
I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.
Alejandro Javier V.
CEO
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 Planificateur Angular 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.
