Key Takeaways

• Kendo UI Scheduler, ein Teil des Kendo UI -Frameworks, ben?tigt eine kommerzielle Lizenz für die Nutzung und bietet einen grundlegenden, leicht anpassbaren Scheduler mit allen erforderlichen Funktionen. Es ist jedoch m?glicherweise nicht die beste Wahl, wenn Sie nicht an anderen Komponenten des Kendo UI -Frameworks interessiert sind.
• Fullcalendar, ein JQuery-Plugin von Drittanbietern, ist ein leichtes Tool, das eine vollst?ndige Steuerung über Ihre Anwendung erm?glicht. Es bietet einen minimalistischen Basiskalender, der mit zus?tzlichen Funktionen gem?? den Anforderungen verbessert werden kann. Es wird unter der MIT -Lizenz ver?ffentlicht, die fast keine Einschr?nkungen für die Nutzung bietet.
• dhtmlxScheduler ist ein eigenst?ndiger JavaScript-Ereigniskalender, der in einer kostenlosen Standardausgabe, einer mobilen Version, einer Windows 8-Version und einer featurereichen Pro-Edition erh?ltlich ist. Es ist eine gute Wahl, wenn ein Scheduler alles ist, was Sie brauchen, mit Beispielen für die Integration mit Google Maps und einer Reihe von Führern für Anf?nger.
• Wenn Sie Ihren eigenen Scheduler erstellen, berücksichtigen Sie Anwendungsf?lle wie das Erstellen einer Intranet -Anwendung, die keinen Zugriff auf das ?u?ere Web haben sollte, die bereits in Ihrem System vorhanden Kalender.

Die Tage bewegen sich schnell, und moderne Leute w?hlen eine Online -App -App und nicht eine Reihe von Haftnotizen, um ihr Leben zu organisieren. Online-Apps k?nnen auf einem Smartphone oder Laptop verwendet werden. Es ist nicht erforderlich, Daten zwischen Ger?ten zu synchronisieren. Wenn Sie Ihren eigenen Kalender oder Scheduler erstellen m?chten, aber nicht wissen, wo Sie anfangen sollen, haben Sie keine Angst. Das Ziel dieses Artikels ist es, Ihnen bei Ihrer Entscheidung zu helfen.

Warum Ihren eigenen Scheduler erstellen, anstatt die vorhandenen zu verwenden? Nun, hier sind einige Anwendungsf?lle:

• Wenn Sie eine Intranet -Anwendung erstellen, die nicht unbedingt Zugriff auf das ?u?ere Web haben sollte. In diesem Fall m?chten Sie wahrscheinlich eine eigenst?ndige Komponente, für die keine externen Dienste erforderlich sind und Daten, an denen Sie sie m?chten, gespeichert werden. Oder wenn Sie eine vollst?ndige Kontrolle über Ihre App haben und sich nicht auf externe Dienste verlassen m?chten
• Wenn Sie einen Scheduler verwenden, um Daten zu visualisieren und zu verwalten, die Sie bereits in Ihrem System haben, besteht nicht unbedingt aus ?Termine“, die bis Datum/Titel/Beschreibung definiert sind. Diese Daten k?nnen beispielsweise verschiedene Unternehmen mit vielen Gesch?ftsregeln enthalten
• Wenn Sie eine erweiterte Funktionalit?t ben?tigen, wird dies vom Google -Kalender nicht unterstützt. Oder wenn Sie das Erscheinungsbild oder die Logik einer Komponente anpassen müssen, z. Mehrere Ressourcenansichten, Arbeits-/Nicht-Arbeitszeiten usw.

Wir werden uns drei verschiedene Arten von JavaScript -Kalendern ansehen:

• Kendo UI Scheduler, der Teil des Kendo UI -Frameworks
ist
• Fullcalendar, ein JQuery-Plugin von Drittanbietern
• dhtmlxScheduler-Astand-Alone JavaScript-Ereigniskalender

Erstellen des Scheduler

Bevor Sie anfangen, definieren wir, welche Eigenschaften für uns wertvoll sind:

• Nutzungsbedingungen
• Aussehen
• Usability
• Komplexit?t codieren

Beginnen wir jetzt.

Kendo UI Scheduler

Sie sollten das vollst?ndige Bibliothekspaket für diesen Scheduler erhalten. Mit dem benutzerdefinierten Download k?nnen Sie die gewünschten Module ausw?hlen, müssen jedoch eine kommerzielle Lizenz zur Verwendung haben. Um die 30-t?gige Testversion zu erhalten, müssen Sie sich registrieren, indem Sie ein Webformular oder über Ihr soziales Netzwerkkonto ausfüllen. übrigens gibt es auch eine kostenlose Open-Source-Version von Kendo UI. Es hei?t Kendo UI Core und Sie k?nnen die Details auf dieser GitHub -Seite überprüfen. Aber leider ist der Scheduler nicht einer seiner Teile.

Nachdem Sie die Bibliothek extrahiert haben, k?nnen Sie einen grundlegenden Scheduler erstellen. Geben Sie zun?chst die erforderlichen Dateien an:

<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

Beachten Sie, dass Sie jQuery vor den Kendo UI JavaScript -Dateien einschlie?en sollten.

Der n?chste Schritt besteht darin, die Stile zu definieren. Neben dem Styling der Tags und

sollten Sie den richtigen Stil für den Container des Schedulers definieren, damit es im Vollbildmodus gut aussieht.

<span>html<span>, body</span>{
</span>  <span>margin:0;
</span>  <span>padding:0;
</span>  <span>height: 100%;
</span><span>}
</span><span><span>#scheduler</span> {
</span>  <span>border-width: 0;
</span>  <span>height: 100%;
</span><span>}
</span>

Jetzt k?nnen Sie den Konstruktor verwenden, um den Scheduler zu initialisieren:

<div ></div>

<span>$("#scheduler").kendoScheduler({
</span>  <span>// The current date of the scheduler
</span>  <span>date: new Date(),
</span>  <span>views: [
</span>    <span>"day",
</span>    <span>{ type: "week", selected: true },
</span>    <span>"month"
</span>  <span>]
</span><span>});
</span>

Mit der Immobilie der Ansichten k?nnen Sie den Tag, die Woche und der Monat die ursprünglich ausgew?hlten Auswahl anstellen.

.

Dieser Code erstellt einen grundlegenden Scheduler, der unten angezeigt wird:

Ein Doppelklick ?ffnet das neue Fenster zur Erstellung von Ereignissen.

Erstellte Ereignisse sind draggierbar, sodass Sie sie bei Bedarf neu ordnen k?nnen. Eine weitere praktische Funktion ist ein Mini -Kalender, der für die Navigation durch den Zeitplan hilfreich ist.

Die -Begusteitszeiten / Die Schaltfl?che

Umschaltung hilft, Ihre Arbeitszeitveranstaltungen von den regul?ren Zeiten zu filtern. Sie finden es am Ende des Schedulers:

Der Scheduler ist intuitiv und verfügt über alle grundlegenden Funktionen, die Sie m?glicherweise ben?tigen. Sie k?nnen ein Ereignis erstellen und es über das Kalenderraster bewegen. Zus?tzliche Funktionen wie Mini -Kalender und Die Gesch?ftszeiten

sind eher praktisch.

Das ist alles, was wir standardm??ig bekommen k?nnen. Lassen Sie uns also weitermachen.

fullcalendar

Dieser Kalender wird unter der MIT -Lizenz ver?ffentlicht, sodass es fast keine Einschr?nkungen dafür gibt, wie Sie ihn verwenden k?nnen. Es gibt verschiedene M?glichkeiten, wie Sie diesen Kalender installieren k?nnen: Sie k?nnen Bower verwenden, die erforderlichen Dateien über CDNJS zu Ihrer Seite hinzufügen oder das Paket mit JavaScript- und CSS -Dateien herunterladen. Weitere Informationen finden Sie auf der Seite Download.

Eine weitere Sache, bevor Sie vorw?rts gehen. Da Fullcalendar ein JQuery -Plugin ist, vergessen Sie nicht, es Ihrer Seite hinzuzufügen. Eine weitere Abh?ngigkeit ist moment.js, eine JavaScript -Bibliothek für die Arbeit mit Daten. So k?nnen Sie die Dateien in Ihrer Seite aufnehmen, falls Sie ein CDN verwenden:

<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

Danach k?nnen Sie einen Div -Beh?lter definieren, der den Kalender enth?lt, CSS -Regeln bei Bedarf definiert und schlie?lich den Kalender initialisieren kann. Zum Beispiel haben wir einen Container:

<span>html<span>, body</span>{
</span>  <span>margin:0;
</span>  <span>padding:0;
</span>  <span>height: 100%;
</span><span>}
</span><span><span>#scheduler</span> {
</span>  <span>border-width: 0;
</span>  <span>height: 100%;
</span><span>}
</span>

So sieht der Initialisierungsprozess aus:

<div ></div>

Wie Sie sehen, gibt es nicht viel Code, den Sie ben?tigen, damit dieser Kalender funktioniert. Und standardm??ig gibt es nicht so viele Funktionen, die Sie verwenden k?nnen.

Hier k?nnen Sie sehen, wie der Standardplaner aussieht:

Dies ist die monatliche Ansicht mit dem aktuellen Datum, das hervorgehoben wurde, die M?glichkeit, den angezeigten Monat zu ?ndern, und eine -Taste . Das ist alles. Sie sehen, Fullcalendar ist eine Art DIY-Tool. Es gibt viele praktische Funktionen, die Sie verwenden k?nnen, aber der Standardkalender ist sehr grundlegend. Es ist eine gute Wahl, wenn Sie minimalistische Anwendungen erstellen m?chten, die nur über das erforderliche Mindestfunktionen verfügen.

Schreiben wir einen Code, damit unsere App besser aussieht und funktioniert:

<span>$("#scheduler").kendoScheduler({
</span>  <span>// The current date of the scheduler
</span>  <span>date: new Date(),
</span>  <span>views: [
</span>    <span>"day",
</span>    <span>{ type: "week", selected: true },
</span>    <span>"month"
</span>  <span>]
</span><span>});
</span>

Da wir ein benutzerdefiniertes Thema verwenden m?chten, sollten wir die erforderliche CSS -Datei hinzufügen:

<link rel='stylesheet'  />

<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.min.js'></script>

fast fertig! Der letzte Schritt besteht darin, einige Ereignisse zum Rendern zu definieren. Es gibt verschiedene M?glichkeiten, wie Sie Ereignisse definieren k?nnen: als Array, als JSON -Feed und sogar als Funktion.

Hier ist ein Beispiel:

<div id='calendar'></div>

überprüfen Sie nun das Ergebnis:

Diesmal viel besser! Jetzt k?nnen Sie die Ansicht ?ndern, die vorhandenen Ereignisse, die Gesch?ftszeiten betont und die Woche und Tagesansichten die gesamten Ereignisse alle Tage von den anderen filtern:

:

filtern

Hier ist der Gesamteindruck von Fullcalendar. Es wurde als leichtes Tool konzipiert, mit dem Sie Ihre App die volle Kontrolle über Ihre App erhalten. Sie k?nnen eine niedrig funktionsf?hige grundlegende Anwendung erstellen und dann die Funktionen nacheinander hinzufügen. Und es gibt viele von ihnen: F?rben, Ereignisse, vorhandene Anpassung der Ansicht usw. überprüfen Sie diese Dokumentationsseite für die vollst?ndige Liste.

dhtmlxScheduler

Wenn Sie die Download -Seite überprüfen, werden Sie feststellen, dass eine kostenlose Standardausgabe verfügbar ist. Darüber hinaus sind zwei Sonderausgaben verfügbar: die mobile Version und die Windows 8 -Version. Sie k?nnen eine Pro -Edition kaufen, wenn Sie erweiterte Funktionen erhalten m?chten.

Um ein Basic -Diagramm zu erstellen Jetzt k?nnen wir die notwendigen

-Abschnitte definieren:

<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

Und schlie?lich k?nnen wir unseren Scheduler initialisieren:

<span>html<span>, body</span>{
</span>  <span>margin:0;
</span>  <span>padding:0;
</span>  <span>height: 100%;
</span><span>}
</span><span><span>#scheduler</span> {
</span>  <span>border-width: 0;
</span>  <span>height: 100%;
</span><span>}
</span>

Die Init () -Methode initialisiert ein DHTMLXScheduler -Objekt. In diesem Fall wird der Scheduler in dem zuvor definierten Scheduler_here -Container initialisiert. Das neue Datum () wird das aktuelle Datum als Scheduler -Anfangsdatumwert festgelegt. Der Parameter "Woche" legt die erste Ansicht fest. Die m?glichen Werte sind "Tag", "Woche" und "Monat".

<div ></div>

<span>$("#scheduler").kendoScheduler({
</span>  <span>// The current date of the scheduler
</span>  <span>date: new Date(),
</span>  <span>views: [
</span>    <span>"day",
</span>    <span>{ type: "week", selected: true },
</span>    <span>"month"
</span>  <span>]
</span><span>});
</span>

Alles ist fertig und wir k?nnen sehen, wie der Standardplaner aussieht:

standardm??ig besteht die M?glichkeit, zwischen Tag, Woche und Monatsansicht zu wechseln. Das heutige Datum wird hervorgehoben, aber wenn Sie sich im Zeitplan verlieren, verwenden Sie die Taste

. Sie k?nnen ein neues Ereignis erstellen, indem Sie auf den richtigen Kalenderbereich doppelklicken. Die Gr??e eines Ereignisses wird seine Dauer ?ndern. Drag-and-Drop-Event-Neubestehen ist ebenfalls verfügbar.

Um ein langfristiges Ereignis zu erstellen, sollten Sie die Taste

auf der linken Seite des Ereignisses verwenden.

Um seinen Platz in Ihrem Zeitplan zu ?ndern, sollten Sie die monatliche Ansicht ausw?hlen.

Gesamtergebnisse

Kendo UI Scheduler

kendo ui ist ein gro?es und erweitertes JavaScript -Framework. Es enth?lt Tonnen von Widgets und Werkzeugen. Vielleicht ist es keine gute Idee, sein Scheduler -Widget zu verwenden, wenn Sie nicht an anderen Komponenten interessiert sind. Die Kendo UI -Dokumentation ist gut geschrieben, und Sie k?nnen eine Reihe von Scheduler -Demos überprüfen, die mit Code -Beispielen erg?nzt werden. In Bezug auf die Codierung dauert es nicht viel Zeit, einen grundlegenden Scheduler zu erstellen und einige Funktionen hinzuzufügen. Die Standardansicht ist etwas klar, aber es ist leicht zu ?ndern.

fullcalendar

Dies ist eine gute Wahl für diejenigen, die wissen, was sie wollen. Es gibt keine detaillierten Schritt-für-Schritt-Führer, die beschreiben, was zu tun ist, um das Ziel zu erreichen. Nur eine kurze Seite mit Ersteanleitung und Dokumentation. Leichtes Gewicht.

dhtmlxScheduler

Dies ist eine gute Wahl, wenn ein Scheduler alles ist, was Sie wollen. Es gibt ein Beispiel für die Integration mit Google Maps, sodass Sie die grundlegende Funktionalit?t erweitern k?nnen, wenn Sie ben?tigen. Die Dokumentationsseite enth?lt eine Reihe von Leitf?den, die für Anf?nger nützlich sein k?nnen. Die Gruppe von

Das obige ist der detaillierte Inhalt vonEin Vergleich von JavaScript -Kalendern und Schedulern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!