Trusted by the world’s leading companies
Überblick
JavaScript Scheduler, oder Ereigniskalender, ist eine voll ausgestattete Ereigniskalenderkomponente, die Benutzer bei der effizienten Zeitverwaltung unterstützt. Sie ermöglicht eine einfache Ressourcenplanung und die Neuplanung von Ereignissen oder Terminen durch Editor-Popups, Drag & Drop und Größenänderungsaktionen.
Warum Syncfusion JavaScript Scheduler wählen?
Hohe Performance
Der Scheduler lädt Daten standardmäßig bei Bedarf, um die Übertragungs- und Ladezeiten zu reduzieren. Eine korrekte Feldzuordnung ist zwingend erforderlich, 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 mit Hilfe eines Datenmanagers.
Integrierte Ansichten
Es stehen verschiedene integrierte Ansichtsmodi zur Verfügung: 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 wiederkehrende Ereignisse ganz einfach so, dass sie täglich, wöchentlich, monatlich oder jährlich mit integrierten Wiederholungsoptionen wiederholt werden.
Mehrere Ressourcen und Gruppierung
Um Ressourcen nach mehreren Faktoren zu gruppieren, bietet der Scheduler eine breite Palette flexibler Optionen. Er deckt auch die Planung von Zeitleisten und die Gruppierung von Terminen nach Ressource und Datum ab.
Passt sich jeder Auflösung an
Der Scheduler verfügt über ein hochgradig responsives 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 die Themes des Schedulers einfach anzupassen.
Globalisierung und Lokalisierung
Ermöglicht Benutzern aus verschiedenen Regionen, den Scheduler zu verwenden, indem Datums-, Währungs- und Nummerierungsformate an ihre Präferenzen angepasst werden.
KI-gesteuerter Scheduler für effizientes Zeitmanagement
Steigern Sie die Produktivität mit dem AI Scheduler. Geben Sie einfach Befehle wie “Team-Meeting jeden Freitag um 10:00 Uhr planen” ein, und er verwaltet intelligent Ihren Kalender—schlägt optimale Zeiten vor, vermeidet Überschneidungen und organisiert Ihren Kalender visuell.

JavaScript Scheduler Codebeispiel
Beginnen Sie ganz einfach mit dem JavaScript Scheduler, indem Sie wie unten gezeigt ein paar einfache Zeilen HTML- und TSX-Code verwenden. Erkunden Sie auch unser JavaScript Scheduler Beispiel, das Ihnen zeigt, wie Sie den Scheduler in JavaScript rendern und konfigurieren.
<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: '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'
}
];
let scheduleObj: Schedule = new Schedule({
selectedDate: new Date(2022, 1, 20),
eventSettings: { dataSource: data }
});
scheduleObj.appendTo('#Schedule');Mehrere Scheduler-Ansichten
Es stehen verschiedene integrierte Ansichtsmodi zur Verfügung: 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 für einen einzelnen Tag oder mehrere Tage eines ganzen Monats an.

Agendansicht
Laden Sie Ereignisse virtuell und zeigen Sie sie als Liste in sequentieller Reihenfolge nach Tagen gruppiert an. Es besteht die Möglichkeit, die Anzahl der Tage anzugeben, die anfänglich in der Agendansicht geladen werden sollen.

Monats-Agendansicht
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 Kalenderansichtformat an. In dieser Kalenderansicht werden Daten, die Ereignisse und Termine enthalten, mit Punkten unter dem jeweiligen Datum hervorgehoben. Wenn Sie auf das Datum klicken, wird das Ereignis-Popup angezeigt und die Ereignisse werden aufgelistet.
Zeitleistenansichten
JavaScript bietet fünf integrierte Zeitleistenansichten: Zeitleisten-Tag, Zeitleisten-Woche, Zeitleisten-Arbeitswoche, Zeitleisten-Monat und Zeitleisten-Jahr. Jede Ansicht zeigt Ereignisse genau auf 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.


Einzigartige 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.


Zeitintervalle blockieren
Sie können bestimmte Zeitbereiche im JavaScript 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 mit einem einzigen Klick auf die Scheduler-Zellen oder auf das Thema eines vorhandenen Termins erstellen und bearbeiten. Das Drücken der Eingabetaste, nachdem der neue Betrefftext in das Inline-Textfeld eingegeben wurde, aktualisiert und speichert den Termin entsprechend.

Erweiterte Optionen zur Ereignisbehandlung
Der JavaScript Event Calendar bietet klare, lebendige und exakte Darstellungen von Ereignissen und Terminen über die Scheduler-Zeitleiste hinweg, basierend auf ihrer zugewiesenen Zeitdauer.

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

Mehrfachereignisauswahl
Wählen Sie einfach mehrere Ereignisse gleichzeitig aus, indem Sie die Strg-Taste gedrückt halten und auf die Ereignisse klicken. Auf Mobilgeräten tun Sie dasselbe, indem Sie auf ein Ereignis tippen und gedrückt halten, und fahren Sie mit der Auswahl fort, indem Sie auf andere Ereignisse tippen. Nachdem Sie die Ereignisse erfolgreich ausgewählt haben, löschen oder verschieben Sie sie gleichzeitig.

Tooltip
Der anpassbare Tooltip zeigt Ereignisinformationen an, wenn der Mauszeiger über das Ereignis schwebt. Auf Mobilgeräten tun Sie dasselbe, indem Sie auf ein Ereignis tippen und gedrückt halten.

Anpassung des Erscheinungsbilds
Ändern Sie das Erscheinungsbild von JavaScript Scheduler-Ereignissen und -Terminen, indem Sie deren Standarderscheinungsbild und Stil mit HTML oder CSS anpassen.

Zeitzone
Unabhängig von der Systemzeitzone unterstützt der JavaScript Event Calendar das Einstellen der erforderlichen Zeitzone für das Steuerelement selbst sowie für Ereignisse.

Zwischenablage
Der JavaScript 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 JavaScript 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 JavaScript 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 JavaScript Scheduler.

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

Echtzeit-Updates
Bidirektionale Datenkommunikation übermittelt serverseitige Termin-Updates, die im Scheduler vorgenommen wurden, an alle verbundenen Clients über SignalR.
Funktionsreiche Kalenderoptionen
Der JavaScript 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, an die Standardregion an. Sie können diese Option auch für einzelne Ansichten verwenden.

Benutzerdefinierte Start- und Endzeiten
Zeigen Sie das Ereignis-Scheduler-Layout mit bestimmten Zeitdauern an, indem Sie die unerwünschten Stunden ausblenden.

Flexible Zeitskala
Verwenden Sie anpassbare Zeitskala-Optionen, um eine Zeitleiste von Ereignissen klar anzuzeigen und eine andere Dauer einzustellen.

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

Hervorhebung der aktuellen Zeit
Geben Sie das aktuelle Datum mit einem hervorgehobenen Datumsheader an. Markieren Sie die aktuelle Uhrzeit in allen Ansichten genau.

Ausblenden von Wochenendtagen
Das Ausblenden von Wochenendtagen im Scheduler ermöglicht es Ihnen, in allen Ansichten nur Arbeitstage anzuzeigen.

Wochennummernanzeige
Zeigen Sie die Wochennummer des aktuellen Datumsbereichs neben dem Datumsheader in den Tages-, Wochen- und Arbeitswochenansichten an. Zeigen Sie die Wochennummer auch 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 viertägige Woche) bestimmt.

Zeitmodus
Das Scheduler-Steuerelement 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 mit HTML- und CSS-Stilen an.

Datumsheader
Ändern Sie das Standarderscheinungsbild der Kopfzeile, indem Sie CSS, benutzerdefinierten Text oder ein Bild hinzufügen.

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

Kopfzeile
Fügen Sie benutzerdefinierte Elemente zu den Standardoptionen der Kopfzeile hinzu. Sie können gemeinsame Kopfzeilenoptionen ein- oder ausblenden.

Scheduler-Zellen
Vorkonfigurierte Vorlageoptionen ermöglichen Ihnen das einfache Anpassen der Zellen durch Hinzufügen von Text, Bildern oder CSS.

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

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

Schnelle Ereignisübersicht
Durch Klicken oder Tippen auf Ereignisse werden deren wichtige Details wie Betreff und Uhrzeit sowie Bearbeitungs- und Löschoptionen angezeigt.

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

Ereignis-Container
Durch Klicken auf den Textindikator (+n weitere) in der Monats- und Zeitleistenansicht wird ein Ereignis-Container geöffnet, der alle ausgeblendeten Ereignis- und Termindetails eines Tages auflistet.

Schnelle Navigation
Der JavaScript Scheduler bietet eine intuitive Möglichkeit, mithilfe eines Inline-Kalenders zwischen Datumsbereichen vor- und zurückzuspringen und auch zwischen verschiedenen Ansichtsmodi zu navigieren.

Echtzeit-Anwendungen
Viele Echtzeit-Anwendungen verwenden Scheduler als integralen Bestandteil und dienen somit unterschiedlichen Zwecken je nach Projekttyp. Einige der aktiven Anwendungen sind: Fahrplan-Kalender, Besprechungsraum-Kalender, Arztterminplaner und Hotelzimmerreservierung.
Interaktive Funktionen
Mit dem JavaScript Scheduler können Benutzer ihre Ereignisse auf zwei Arten exportieren: als Excel-Datei oder als ICS-Datei.

Export nach Excel
Der JavaScript Scheduler ermöglicht Ihnen, alle seine Ereignisse standardmäßig in ein Excel-Dokument zu exportieren. Er bietet auch zusätzliche Anpassungsoptionen zum Exportieren benutzerdefinierter Ereignisdatensammlungen.

ICS exportieren und importieren
Der JavaScript Event Calendar unterstützt den Export aller seiner Ereignisdaten in das iCal-Format und den Import von Ereignissen aus einer iCal-Datei in den Scheduler.

Entwicklerfreundliche APIs
Entwickler haben über die integrierten, entwicklerfreundlichen APIs die volle Kontrolle über die Benutzeroberfläche und das Verhalten des Ereigniskalenders. Dies ermöglicht es Ihnen, selbst komplexe Scheduler-Funktionalitäten einfach anzupassen.
Barrierefreiheit
Die JavaScript Scheduler-Komponente ist für Screenreader leicht zugänglich. Es wurde auch eine vollständige Tastaturinteraktionsunterstützung bereitgestellt.

Vollständig barrierefrei
Die JavaScript Scheduler-Komponente verfügt über eine vollständige WAI-ARIA-Barrierefreiheitsunterstützung. Die Scheduler-Benutzeroberfläche enthält kontrastreiche visuelle Elemente, die sehbehinderten Menschen die beste Anzeigeerfahrung bieten. Außerdem sind gültige UI-Beschreibungen über assistierende Technologien wie Screenreader leicht zugänglich.

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

Rechts-nach-links (RTL)
Rendern Sie den Ereignis-Scheduler gemäß den richtigen Rechts-nach-links-Konventionen.
Weitere unterstützte Frameworks
Der Scheduler ist in den Frameworks Blazor, React, Angular und Vue verfügbar. Erkunden Sie seine plattformspezifischen Optionen über die folgenden Links:
Unterstützte Browser
Der JavaScript Scheduler funktioniert gut mit allen modernen Webbrowsern, einschließlich Chrome, Firefox, Edge, Safari und Opera.

Sie wissen nicht, wie Sie Ihren ersten JavaScript Scheduler erstellen sollen? Unsere Dokumentation kann Ihnen helfen.
Ich würde es jetzt gerne lesenÜber 145+ JavaScript UI-Steuerelemente
Häufig gestellte Fragen
Warum sollten Sie Syncfusion JavaScript Scheduler wählen?
Der JavaScript Scheduler mit umfangreichen Funktionen bietet Folgendes:
- Hochgradig responsives Layout und ein fein optimiertes Design für Desktops, Tablets und Mobiltelefone.
Verschiedene Grundansichten wie Tag, Woche, Arbeitswoche, Monat und Jahr im Kalendermodus sowie Zeitleistenmodus.
Virtuelles Scrolling ermöglicht das dynamische Laden großer Mengen an Ressourcen und Ereignissen.
- Passt sich sofort an verschiedene Zeitzonen an.
Mehrere Ressourcen gruppieren basierend auf den Ansichten Zeitleiste, horizontal, hierarchisch und Datum.
- Einfache Synchronisierung von Ereignissen mit Google und Outlook Kalendern.
- Einer der besten JavaScript Scheduler auf dem Markt, der eine funktionsreiche Benutzeroberfläche zur Interaktion mit der Software bietet.
Einfache Konfiguration und API.
- Unterstützung für alle modernen Browser.
Umfangreiche Lernressourcen wie Demos und Dokumentation zum schnellen Lernen und Einstieg.
Was kostet der Syncfusion JavaScript Scheduler?
Wir verkaufen den JavaScript Scheduler nicht separat. Er ist nur als Teil der Syncfusion Team Lizenz erhältlich. Diese enthält über 1,600 Komponenten und Frameworks, einschließlich des JavaScript Schedulers. Der Preis der Team Lizenz beginnt bei 395 US-Dollar pro Monat für 5 Entwickler und beinhaltet Support und Updates bis zum Ablauf des Abonnements. Darüber hinaus können wir Rabatte basierend auf aktuell aktiven Aktionen anbieten. Bitte kontaktieren Sie noch heute unsere Produktspezialisten, um zu erfahren, ob Sie für zusätzliche Rabatte in Frage kommen.
Wo finde ich die Syncfusion JavaScript Scheduler Demo?
Sie finden unsere JavaScript Scheduler Demo, die zeigt, wie der Scheduler gerendert und konfiguriert wird.
Kann ich die Syncfusion JavaScript Scheduler-Komponente separat erwerben?
Nein, unsere 1,600+ Komponenten und Frameworks für Web, Mobile und Desktop, einschließlich unseres JavaScript 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 ihr Scheduler-Steuerelement allein verlangen. Wir haben auch die Erfahrung gemacht, dass unsere Kunden normalerweise mit einem unserer Produkte beginnen und dann schnell auf mehrere Produkte erweitern, daher hielten wir es für am besten, alle 1,600+ Komponenten und Frameworks gegen eine Abonnementgebühr anzubieten, die bei 395 US-Dollar pro Monat für ein Team von 5 Entwicklern beginnt. Zusätzlich können wir möglicherweise Rabatte basierend auf aktuell aktiven Aktionen anbieten. Bitte kontaktieren Sie noch heute unsere Produktspezialisten, um zu erfahren, ob Sie für zusätzliche Rabatte in Frage kommen.
Kann ich den Syncfusion JavaScript 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 erhältlich, deren Organisationen weniger als 1 Million USD Jahresbruttoumsatz und fünf oder weniger Entwickler haben.
Wie fange ich mit dem Syncfusion JavaScript 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.
Letzte Aktivitäten in JavaScript Scheduler Blogs
Die Blog-Beiträge zum JavaScript Scheduler helfen Ihnen beim Erstellen Ihrer ersten App mit JavaScript-Steuerelementen. Sie bieten Problemlösungsstrategien, beschreiben Funktionen und Funktionalitäten, kündigen neue Funktionsveröffentlichungen an, erklären Best Practices und zeigen Beispielszenarien. Entdecken Sie unsere neuesten Beiträge auf unseren Blog-Kanälen für JavaScript Scheduler-Updates.
