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:
Wir werden uns drei verschiedene Arten von JavaScript -Kalendern ansehen:
Bevor Sie anfangen, definieren wir, welche Eigenschaften für uns wertvoll sind:
Beginnen wir jetzt.
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.
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>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.css' /> <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>
Hier ist ein Beispiel:
<div id='calendar'></div>
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.
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
<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>
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, 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!
So verwenden Sie den Fragezeichenausdruck in der C-Sprache
Verlauf der Oracle-Ansichtstabellenoperationen
Welche Software ist Twitter?
So erstellen Sie eine responsive Webseite
Implementierungsmethode der js-Sperrfunktion
Welche privaten Informationen werden Douyins enge Freunde sehen?
Was ist ECharts?
So handeln Sie auf Binance
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
