Terminkalender mit JavaScript programmieren - Teil 1

In diesem #Tutorial entwickeln wir einen #Terminkalender mit HTML, CSS und #JavaScript (bzw. jQuery). Im ersten Teil geht es um das grobe Grundgerüst. 📅

*Hinweis* (weil dazu viele Fragen kommen): Zum Öffnen der HTML braucht ihr, wie im Tutorial erklärt, die Visual Studio Code Erweiterung "Live Server", weil ich hier JavaScript-Module verwende. Das Öffnen der HTML aus dem Dateisystem heraus funktioniert nicht.


📝 Demo & Quellcode

⏱ Zeitmarken
● Vorstellung: 00:00
● HTML: 03:13
● Setup der Zeiten: 09:04
● Setup der Tage: 13:59
● Styling: 18:40
● Anzeige der Woche: 31:29
● Woche ändern: 41:02
● Aktueller Tag: 43:04
● Hover-Effekt: 46:00

📙 Quellen

📺 Empfehlenswerte YouTube-Kanäle

💻 Verwendete Tools (Entwicklung)

🎤 Verwendete Software (Aufnahme)

[bambindien]

Hab 2 Jahre nach einem funtionellem Wochenkalender gesucht. Hier isser endlich – WELTBEST und vielen Dank!!!

[rowheadrex]

neuer Abonierer, sehr gut gemacht und erklärt! mach bitte mehrere solche Vanilla/JQuery Projekte in zukunft
ich habe bisher 8 Calendar Projects von youtube nachgemact, die hier ist die beste

[ScriptRaccoon]

2:50 Das sehe ich heute natürlich nicht mehr so, nachdem ich Svelte kennengelernt habe :-). Mit jQuery muss man sowas heute nicht mehr bauen. Ich überarbeite das Projekt irgendwann noch einmal mit Svelte / SvelteKit und erstelle dann vielleicht auch ein Tutorial dazu.

[rokoyfa]

Wenn Ich die Konsole öffne wie du in min 10:51 dann steht da bei mir garnichts aber warum?

[esadbasoren]

Hallo hätte eine Frage. Bei mir werden die Uhrzeiten in minute 13:57, was könnte ich dagegen machen. Danke im Vorraus!

[guneycan]

Werden die Einträge als Cookies gespeichert?. Wenn ja wo im Code ist die Speicherung? Würde gerne lokal speichern

[khazylive]

Kannst du das System vielleicht noch weiter ausbauen, dass man das Geräteübergreifend verwenden kann.
Ich habe es nun auf mein Webspace gezogen, habe mir 2-3 Testtermine angelegt, auf dem Handy werden diese auf der Webseite allerdings leider nicht angezeigt und die Webseite ist nicht richtig für das Handy formatiert.

Meine Idee für die Terminübertragung auf mehrere Geräte wäre ein Registrations-/ und LogIn-Fenster, bei dem man sich registrieren und einloggen kann, dazu gehört natürlich auch eine Datenbank.

[crazypanda]

Was ist das für eine Software Architekture?

[ruthplett]

Warum stehen bei mir die Icons unter dem Überschrift „Calender“ und nicht auf eine Linie?
Ich habe alles genauso geschrieben wie auf dem Video, ich bin schon so verzweifelt 😫

[chebbo]

Moin, bei mir sagt es immer das $ in der main.js nicht definiert ist. Sitze grad schon ne Stunde dran und finde einfach nicht den Fehler, hast du vielleicht einen Tipp?

[flyV]

Hallo. Super Tutorial!
Ich habe mir das verlinkte Repo heruntergeladen, VS Code installiert, LiveServer installiert aber irgendwie wird der JS Code nicht ausgeführt. Wenn ich in der main.js die import Anweisung auskommentiere und anstelle der Instanzierung der Calendar-Klasse (inkl. dem Aufruf der setup Methode), eine alert-Anweisung hinzufüge, wird diese ausgeführt. Hast Du mir ein Tipp, was ich ich falsch mache? Vielen Dank im Voraus.

[mixschnack]

Warum rufst du setupTimes() mit this auf? Jetzt wirst du sagen: Weil this das Kalender-Objekt, innerhalb dessen setupTimes() aufgerufen wird, referenziert. Deshalb meine weitere Frage: Warum brauche ich überhaupt das Kalender-Objekt? Ginge es nicht auch ohne irgendein Objekt? Hängt das vielleicht damit zusammen, dass ich nur Objekte, bzw. Klassen exportieren kann?

[mixschnack]

Ok, meine letzte Frage war ein bisschen blöd, deshalb habe ich sie gelöscht. Die neue Frage ist: Wie kann ich folgendes: const header = ohne jQuery schreiben?

[dirkkucklick]

Hallo Script Raccoon, ich habe mich nun doch entschlossen, Dein tolles Tutorial durchzuarbeiten, aber ich scheitere bereits beim Import der Klasse Calendar. import declarations may only appear at top level of a module Und zwar ist die Meldung sowohl im VS Code, als auch auf dem WebServer. Was mache ich falsch? Und ich habe mich, denke ich, nicht vertippt, denn mit dem Code vom Download ist es ebenso. Vielen Dank im Voraus für Deine Hilfe.

[jeannoelhonisch]

bin gespannt hab nur wenig js Erfahrung mal sehen wie es wird.

[mixschnack]

Wie bist du auf die Farben gekommen? Hast du per Zufall je einen Wert für rot, grün, blau und gelb gewählt?