Trusted by the world’s leading companies
Überblick
Der Angular Scheduler (oder Angular Ereigniskalender) ist eine voll ausgestattete Ereigniskalender-Komponente, die Benutzern hilft, ihre Zeit effizient zu verwalten. Er ermöglicht eine einfache Ressourcenplanung und die Neuplanung von Ereignissen oder Terminen durch Editor-Pop-ups, Drag & Drop und Größenänderungsaktionen.
Warum Syncfusion Essential Studio® Angular Scheduler wählen?
Hohe Leistung
Der Angular Scheduler lädt Daten bei Bedarf, um die Übertragungs- und Ladezeiten zu reduzieren. Eine korrekte Feldzuordnung ist obligatorisch, wenn der Scheduler an Datenquellen mit unterschiedlichen Feldnamen gebunden wird.
Nahtlose Datenbindung
Binden Sie Daten nahtlos mit verschiedenen lokalen und entfernten Datenquellen wie JSON, OData, WCF und RESTful-Webdiensten mithilfe eines Datenmanagers.
Integrierte Ansichten
Es sind verschiedene integrierte Ansichtsmodi verfügbar: Tag, Woche, Arbeitswoche, Monat, Agenda, Monats-Agenda, Jahr und Zeitleiste. Mit einer Vielzahl von ansichtsspezifischen Variablen können Sie jede Ansicht anpassen.
Wiederkehrende Ereignisse
Konfigurieren Sie einfach wiederkehrende Ereignisse, die täglich, wöchentlich, monatlich oder jährlich wiederholt werden, mit integrierten Wiederholungsoptionen.
Mehrere Ressourcen und Gruppierung
Um Ressourcen nach mehreren Faktoren zu gruppieren, bietet der Angular Scheduler eine breite Palette flexibler Optionen. Er deckt auch die Planung von Zeitleisten und die Gruppierung von Terminen nach Ressourcen und Datum ab.
Passt sich an jede Auflösung an
Der Scheduler verfügt über ein hochgradig reaktionsschnelles Layout und ein optimiertes Design für Desktops, Touchscreens und Smartphones. Er funktioniert gut auf allen Mobiltelefonen, die iOS, Android oder Windows OS verwenden.
Attraktive anpassbare Themes
Modernes Design mit über 5 integrierten Themes wie Fluent, Tailwind CSS, Bootstrap, Material, Fabric und mehr. Nutzen Sie das Online Theme Studio Tool, um Themes des Schedulers einfach anzupassen.
Globalisierung und Lokalisierung
Ermöglicht Benutzern aus verschiedenen Regionen die Verwendung des Schedulers durch Formatierung von Daten, Währung und Nummerierung entsprechend ihren Präferenzen.
Intelligente Planung mit KI-gesteuertem Scheduler
Erleben Sie intelligentere Terminplanung mit unserem KI-gesteuerten Scheduler. Geben Sie einfach “Team-Meeting jeden Freitag um 10 Uhr” ein, und er organisiert Ihre Termine automatisch, löst Konflikte und passt sich Ihrem Arbeitsablauf an. Ihr Kalender zeichnet nicht nur die Zeit auf – er hilft Ihnen, das Beste daraus zu machen.

Angular Scheduler Code Beispiel
Beginnen Sie einfach mit dem Angular Scheduler mit ein paar einfachen Zeilen HTML- und TS-Code, wie unten gezeigt. Erkunden Sie auch unser Angular Scheduler Beispiel, das Ihnen zeigt, wie Sie den Scheduler in Angular rendern und konfigurieren.
<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 {}Mehrere Scheduler-Ansichten
Eine Vielzahl von integrierten Ansichtsmodi ist verfügbar: Tag, Woche, Arbeitswoche, Monat, Agenda, Monats-Agenda, Jahr und Zeitleiste. Konfigurieren Sie jede einzelne Ansicht einfach mit verschiedenen, ansichtsspezifischen Optionen.

Tages-, Wochen- und Arbeitswochenansichten
Zeigen Sie Termine für einen einzelnen Tag oder über mehrere Tage an.

Monatsansicht
Zeigen Sie Ereignisse und Termine an einem einzelnen Tag oder über mehrere Tage für einen ganzen Monat an.

Agenda-Ansicht
Laden Sie Ereignisse virtuell und zeigen Sie sie als Liste in sequenzieller Reihenfolge, nach Tag gruppiert, an. Eine Option zum Angeben der Anzahl der Tage, die anfänglich in der Agenda-Ansicht geladen werden sollen, ist vorhanden.

Monats-Agenda-Ansicht
Zeigen Sie das Kalenderlayout und die Ereignisse des aktuell ausgewählten Datums an. Ein runder Indikator am unteren Rand eines Datums zeigt das Vorhandensein eines oder mehrerer Ereignisse an diesem Tag an.

Jahresansicht
Die Jahresansicht zeigt alle Monate eines bestimmten Jahres in einem Kalenderformat an. In dieser Kalenderansicht werden Daten, die Ereignisse und Termine enthalten, mit Punkten unter dem einzelnen Datum hervorgehoben. Wenn Sie auf das Datum klicken, wird das Ereignis-Pop-up angezeigt und die Ereignisse werden aufgelistet.
Zeitleistenansichten
Angular bietet fünf integrierte Zeitleistenansichten: Zeitleisten-Tag, Zeitleisten-Woche, Zeitleisten-Arbeitswoche, Zeitleisten-Monat und Zeitleisten-Jahr. Jede Ansicht zeigt Ereignisse präzise entlang einer horizontalen Zeitachse für einen einzelnen Tag oder mehrere Tage an.
Um eine bessere Leistung zu erzielen, laden Zeitleistenansichten Ressourcen, Ereignisse und Termine bei jeder Scroll-Aktion virtuell.


Eindeutige Ansichtskonfigurationen
Konfigurieren Sie jeden einzelnen Ansichtsmodus einfach mit verschiedenen Kalendereinstellungen. Sie können beispielsweise die Gruppierungsfunktion in der Monatsansicht aktivieren und Ereignisvorlagen in der Wochenansicht anwenden.
Erweiterbare Ansichtsintervalle
Zeigen Sie mehrere Tage, Wochen und Monate an, indem Sie jeden Ansichtsmodus basierend auf der angegebenen Intervallanzahl erweitern.


Blockzeitintervall
Sie können bestimmte Zeitbereiche im Angular Event Calendar blockieren, um die Erstellung von Ereignissen und Terminen in diesem Zeitfenster zu verhindern.
Inline-Termin
Mit dieser Funktion können Benutzer Termine inline erstellen und bearbeiten, indem sie einfach auf die Scheduler-Zellen oder auf den Betreff eines vorhandenen Termins klicken. Durch Drücken der Eingabetaste, nachdem der neue Betrefftext in das Inline-Textfeld eingegeben wurde, wird der Termin entsprechend aktualisiert und gespeichert.

Erweiterte Optionen zur Ereignisbehandlung
Der Angular Event Calendar bietet klare, lebendige und exakte Darstellungen von Ereignissen und Terminen in der Scheduler-Zeitleiste, basierend auf ihrer zugewiesenen Zeitdauer.

Funktionen zum Hinzufügen und Bearbeiten
Es gibt eine integrierte Unterstützung für eine bessere Ereignisbehandlung, wie z.B. das einfachere Erstellen und Bearbeiten von Terminen über den Standard-Ereignis-Editor oder durch intuitive Drag-and-Resize-Aktionen. Darüber hinaus können Sie den Ereignissen und Ressourcendatenquellen auch benutzerdefinierte Datenfelder hinzufügen.

Mehrfachereignisauswahl
Wählen Sie einfach mehrere Ereignisse gleichzeitig aus, indem Sie die Strg-Taste gedrückt halten, während Sie auf Ereignisse klicken. Auf mobilen Geräten tun Sie dasselbe, indem Sie ein Ereignis antippen und halten und die Auswahl durch einmaliges Tippen auf andere Ereignisse fortsetzen. Nach erfolgreicher Auswahl von Ereignissen können Sie diese gleichzeitig löschen oder neu positionieren.

Tooltip
Der anpassbare Tooltip zeigt Ereignisinformationen an, während der Mauszeiger über dem Ereignis schwebt. Tun Sie dasselbe auf mobilen Geräten, indem Sie ein Ereignis antippen und halten.

Anpassung des Erscheinungsbilds
Ändern Sie das Aussehen und Verhalten von Angular Scheduler-Ereignissen und -Terminen, indem Sie deren Standarderscheinungsbild und -stil mithilfe von HTML oder CSS anpassen.

Zeitzone
Unabhängig von der Systemzeitzone unterstützt der Angular Event Calendar das Festlegen der erforderlichen Zeitzone für die Steuerung selbst sowie für Ereignisse.

Zwischenablage
Der Angular Scheduler unterstützt die Zwischenablagefunktion, die es Benutzern ermöglicht, Ereignisse effizient zu verwalten. Benutzer können ausgewählte Ereignisse mit der Tastenkombination Strg+C kopieren, Ereignisse mit Strg+X ausschneiden und Ereignisse mit Strg+V in verschiedene Zeitfenster einfügen.

Adaptive Zeilen
Eine integrierte Option wurde dem Angular Event Calendar hinzugefügt, um die Höhe der Zeilen in der Monats- und Zeitleistenansicht automatisch zu erhöhen, wenn neue gleichzeitige Ereignisse oder Termine hinzugefügt werden.
Kontextmenü
Das in den Angular Scheduler integrierte Kontextmenü öffnet sich, wenn eine Zelle oder ein Termin mit der rechten Maustaste angeklickt wird.

Echtzeit-Datensynchronisation
Echtzeit-Termindaten synchronisieren sich präzise mit unserem Angular Scheduler.

Outlook- und Google Kalender Integration
Synchronisieren Sie Ereignisse einfach zwischen unserem Angular Event Calendar und Google oder Outlook Kalender über die Google Kalender API oder die Objektbibliothek von Microsoft Outlook.

Echtzeit-Updates
Die bidirektionale Datenkommunikation übermittelt serverseitige Terminaktualisierungen, die am Scheduler vorgenommen wurden, über SignalR an alle verbundenen Clients.
Funktionsreiche Kalenderoptionen
Der Angular Event Calendar erbt fast alle kalenderspezifischen Funktionen, wie den ersten Wochentag und die Zeitskala.

Erster Wochentag
Passen Sie den ersten Wochentag, der standardmäßig auf Sonntag eingestellt ist, gemäß dem Standardgebietsschema an. Sie können diese Option auch für individuelle Ansichten verwenden.

Benutzerdefinierte Start- und Endstunden
Zeigen Sie das Ereignisplaner-Layout mit spezifischen Zeitdauern an, indem Sie die unerwünschten Stunden ausblenden.

Flexible Zeitskala
Verwenden Sie anpassbare Zeitskalenoptionen, um eine Zeitachse von Ereignissen klar anzuzeigen und eine andere Dauer festzulegen.

Arbeitszeit
Die aktiven Zellen des Schedulers (weiß dargestellt) stellen visuell die Arbeitstage und Arbeitsstunden dar.

Hervorhebung der aktuellen Uhrzeit
Markieren Sie das aktuelle Datum mit einer hervorgehobenen Datumsüberschrift. Markieren Sie die aktuelle Uhrzeit in allen Ansichten genau.

Wochenendtage ausblenden
Das Ausblenden von Wochenendtagen aus dem Scheduler ermöglicht es Ihnen, nur Arbeitstage in allen Ansichten anzuzeigen.

Anzeige der Wochennummer
Zeigen Sie die Wochennummer des aktuellen Datumsbereichs neben der Datumsüberschrift in der Tages-, Wochen- und Arbeitswochenansicht an. Zeigen Sie auch die Wochennummer in der Monatsansicht als erste Spalte an. Die Wochennummer wird durch den ersten Wochentag und die Wochenregeln (erster Tag oder erste volle Woche oder erste Viertageswoche) bestimmt.

Zeitmodus
Die Scheduler-Steuerung unterstützt sowohl das 12-Stunden- als auch das 24-Stunden-Zeitformat.
Vollständig anpassbare Benutzeroberfläche
Passen Sie das Erscheinungsbild jedes Teils der Scheduler-Oberfläche mithilfe von HTML- und CSS-Stilen an.

Datumsüberschrift
Ändern Sie das Standarderscheinungsbild der Kopfzeile, indem Sie jede Art von CSS, benutzerdefinierten Text oder Bild hinzufügen.

Vollständige Scheduler-Benutzeroberfläche
Ein integriertes clientseitiges Ereignis ermöglicht es den Endbenutzern, jeden Teil der Scheduler-Benutzeroberfläche anzupassen.

Header-Leiste
Fügen Sie der standardmäßigen Header-Leiste benutzerdefinierte Elemente hinzu. Sie können gemeinsame Header-Leistenoptionen ausblenden oder anzeigen.

Scheduler-Zellen
Vorlagenoptionen, die sofort einsatzbereit sind, ermöglichen es Ihnen, die Zellen einfach anzupassen, indem Sie jede Art von Text, Bild oder CSS hinzufügen.

Schnelle Pop-ups
Passen Sie Pop-ups, die beim Einzelklick auf Zellen, Ereignisse oder Termine geöffnet werden, einfach mit Ihrer eigenen Benutzeroberfläche oder Ihrem Vorlagendesign an.

Ereignis-Editor extern öffnen
Der Angular Event Calendar bietet eine integrierte Methode, um das Standard-Ereignis-Editor-Fenster programmatisch zu öffnen.
Benutzerfreundliche Interaktionen
Das moderne und trendige UI-Design des Angular Schedulers macht die Benutzerinteraktionen einfacher und effizienter.

Schneller Ereignisüberblick
Durch Klicken oder Tippen auf Ereignisse werden deren wichtige Details, wie Betreff und Uhrzeit, zusammen mit Bearbeitungs- und Löschoptionen angezeigt.

Zellenauswahl
Klicken und ziehen Sie den Mauszeiger über die Scheduler-Zellen für eine Mehrfachzellenauswahl. Sie können dasselbe mit Tastenkombinationen tun.

Ereigniscontainer
Ein Klick auf den Textindikator (+n weitere) in der Monats- und Zeitleistenansicht öffnet einen Ereigniscontainer, der alle verborgenen Ereignis- und Termindetails eines Tages auflistet.

Schnelle Navigation
Der Angular Scheduler bietet eine intuitive Möglichkeit, mithilfe eines Inline-Kalenders zwischen Datumsbereichen zu navigieren und auch zwischen verschiedenen Ansichtsmodi zu wechseln.

Echtzeitanwendungen
Viele Echtzeitanwendungen verwenden Scheduler als integralen Bestandteil und dienen je nach Projekttyp unterschiedlichen Zwecken. Einige der aktiven Anwendungen sind: Fahrplan, Besprechungsraumkalender, Terminplaner für Ärzte, Hotelzimmerreservierung.
Interaktive Funktionen
Der Angular Scheduler ermöglicht Benutzern den Export seiner Ereignisse auf zwei Arten: als Excel-Datei oder als ICS-Datei.

Export nach Excel
Der Angular Scheduler ermöglicht Ihnen den Export aller seiner Ereignisse in ein Excel-Dokument standardmäßig. Er bietet auch zusätzliche Anpassungsoptionen zum Exportieren benutzerdefinierter Ereignisdatensammlungen.

Export und Import von ICS
Der Angular Event Calendar unterstützt den Export all seiner Ereignisdaten im iCal-Format und den Import von Ereignissen aus einer iCal-Datei in den Scheduler.

Entwicklerfreundliche APIs
Entwickler können die Benutzeroberfläche und das Verhalten des Ereigniskalenders über dessen integrierte, entwicklerfreundliche APIs vollständig steuern. Es ermöglicht Ihnen, selbst die komplexen Scheduler-Funktionalitäten mit Leichtigkeit anzupassen.
Barrierefreiheit
Die Angular Scheduler-Komponente ist problemlos von Screenreadern zugänglich. Eine vollständige Tastaturinteraktionsunterstützung wurde ebenfalls bereitgestellt.

Vollständig barrierefrei
Die Angular Scheduler-Komponente verfügt über vollständige WAI-ARIA-Barrierefreiheitsunterstützung. Die Scheduler-Benutzeroberfläche enthält visuelle Elemente mit hohem Kontrast, die sehbehinderten Menschen das beste Seherlebnis bieten. Gültige UI-Beschreibungen sind auch über unterstützende Technologien wie Screenreader leicht zugänglich.

Tastaturinteraktiv
Es stehen verschiedene Tastaturkürzel zur Verfügung, um fast alle Scheduler-Aktionen auszuführen, wie z. B. die Auswahl mehrerer Zellen oder Ereignisse und die Navigation zu anderen Ansichten.

Rechts nach links (RTL)
Rendern Sie den Ereignisplaner gemäß den entsprechenden Rechts-nach-links-Konventionen.
Angular Version Kompatibilität
Mit kontinuierlichen Verbesserungen in den Angular-Versionen wird der Angular Scheduler stets aktualisiert, um mit Versionen von 4 bis zur neuesten Version kompatibel zu sein.

Andere unterstützte Frameworks
Der Scheduler ist in den Frameworks Blazor, React, JavaScript und Vue verfügbar. Erkunden Sie die plattformspezifischen Optionen über die folgenden Links:
Unterstützte Browser
Der Angular Scheduler funktioniert gut mit allen modernen Webbrowsern, einschließlich Chrome, Firefox, Edge, Safari und Opera.

Nicht sicher, wie Sie Ihren ersten Angular Scheduler erstellen sollen? Unsere Tutorial-Videos und Dokumentation können helfen.
Ich möchte es jetzt ansehen Ich möchte es jetzt lesen145+ Angular-UI-Komponenten
Häufig gestellte Fragen
Warum sollten Sie Syncfusion Essential Studio® Angular Scheduler wählen?
- Hochgradig reaktionsschnelles Layout und ein fein optimiertes Design für Desktops, Tablets und Mobiltelefone.
Verschiedene grundlegende Ansichten wie Tag, Woche, Arbeitswoche, Monat und Jahr des Kalendermodus und Zeitleistenmodus.
Virtuelles Scrollen ermöglicht das dynamische Laden einer großen Anzahl von Ressourcen und Ereignissen.
- Passt sich sofort an verschiedene Zeitzonen an.
Gruppierung mehrerer Ressourcen basierend auf den Zeitleisten, horizontalen, hierarchischen und Datumsansichten.
- Einer der besten Angular Scheduler auf dem Markt, der eine funktionsreiche Benutzeroberfläche zur Interaktion mit der Software bietet.
- Einfache Synchronisation von Ereignissen mit Google und Outlook Kalender.
Einfache Konfiguration und API.
- Unterstützung für alle modernen Browser.
Umfangreiche Lernressourcen wie Demos, Dokumentation und Videos, um schnell zu lernen und mit dem Angular Scheduler zu beginnen.
Was kostet der Syncfusion Angular Scheduler?
Wir verkaufen den Angular Scheduler nicht separat. Er ist nur als Teil der Syncfusion Teamlizenz erhältlich. Diese enthält über 1,600 Komponenten und Frameworks, einschließlich des Angular Schedulers. Der Preis der Teamlizenz beginnt bei 395 $ pro Monat für 5 Entwickler und beinhaltet Support und Updates bis zum Ablauf des Abonnements. Darüber hinaus können wir möglicherweise Rabatte basierend auf aktuell aktiven Aktionen anbieten. Bitte kontaktieren Sie unsere Produktspezialisten noch heute, um zu prüfen, ob Sie für zusätzliche Rabatte qualifiziert sind.
Wo finde ich die Syncfusion Angular Scheduler Demo?
Sie finden unsere Angular Scheduler Demo, die zeigt, wie der Scheduler gerendert und konfiguriert wird.
Kann ich die Syncfusion Angular Scheduler Komponente separat erwerben?
Nein, unsere 1,600+ Komponenten und Frameworks für Web, Mobil und Desktop, einschließlich unseres Angular Schedulers, werden nicht einzeln verkauft. Sie sind nur als Teil einer Teamlizenz erhältlich. Wir haben das Produkt jedoch wettbewerbsfähig bepreist, sodass es nur unwesentlich mehr kostet als das, was einige andere Anbieter für ihre Scheduler-Komponente allein verlangen. Wir haben auch festgestellt, dass unsere Kunden in unserer Erfahrung normalerweise mit der Verwendung eines unserer Produkte beginnen und dann schnell auf mehrere Produkte erweitern. Daher hielten wir es für am besten, alle 1,600+ Komponenten und Frameworks für ein Abonnement anzubieten, das 395 $ pro Monat für ein Team von 5 Entwicklern beginnt. Zusätzlich können wir möglicherweise Rabatte aufgrund aktuell aktiver Aktionen anbieten. Bitte kontaktieren Sie unsere Produktspezialisten noch heute, um zu prüfen, ob Sie für zusätzliche Rabatte qualifiziert sind.
Kann ich den Syncfusion Angular Scheduler kostenlos herunterladen und nutzen?
Nein, dies ist ein kommerzielles Produkt und erfordert eine kostenpflichtige Lizenz. Eine kostenlose Community-Lizenz ist jedoch auch für Unternehmen und Einzelpersonen verfügbar, deren Organisationen weniger als 1 Million USD Jahresumsatz und fünf oder weniger Entwickler haben.
Wie fange ich mit dem Syncfusion Angular Scheduler an?
Ein guter Ausgangspunkt wäre unsere umfassende Dokumentation zum Einstieg.
Unsere Kunden lieben uns
Auszeichnungen
Viele behaupten, dass sie herausragend sind. Doch wenn andere das erkennen und loben, bedeutet es viel mehr. Syncfusion® präsentiert mit Stolz folgende Branchenauszeichnungen.