Magyar ünnepnap és névnap jelző program (Ingyenes HTML/JS script)

Hogyan működik a program?

• Felső rész (Aktuális állapot): Megjeleníti a mai dátumot és napot. Ha ma nincs ünnep, a „Ma nem ünnep” felirat látható, alatta pedig egy rövid mondatban kiírja a legközelebbi ünnep nevét, hátralévő napjait, valamint azt, hogy pontosan mit ünnepelünk ekkor. Ha elérkezik az ünnep napja, a felirat átvált arra, hogy „MA ÜNNEP VAN: [Ünnep neve]”, és megjelenik a hozzá tartozó magyarázat.
• Felfelé gördülő lista: Alatta egy ablakban, egymás alatt látható az összes ünnep. Amint egy ünnepnap elmúlik, a program automatikusan kigördíti (törli) a listából, így legfelül mindig az aktuális vagy a soron következő legközelebbi ünnepnap fog elhelyezkedni, alatta pedig a többi jövőbeli alkalom. A lista egérgörgővel szabadon görgethető.
• Automatikus frissítés: A program a háttérben óránként ellenőrzi az időt, így ha éjfélkor nyitva hagyod, magától átvált az új napra és frissíti a listát.

Az alábbi képernyőképen látható, hogyan jelennek meg az ünnepek és a névnapok.

Hogyan működik a weboldal?

• Teljesen automatikus és önellátó: A beépített JavaScript kód tartalmazza a magyar állami ünnepek listáját és a mozgóünnepek (Nagypéntek, Húsvét, Pünkösd) kiszámításához szükséges matematikai algoritmust (Gauss-módszer).
• Felfelé gördülő logika: Amint elmúlik egy ünnep, az oldal újratöltés nélkül vagy a következő megnyitáskor automatikusan kiveszi a listából az adott napot. Így a felső kiemelt státuszban mindig a legfrissebb információ jelenik meg (vagy az, hogy „Ma nem ünnep”, vagy az éppen aktuális ünnep neve a magyarázatával együtt).
• Évváltás kezelése: A kód dinamikusan kezeli az aktuális évet és automatikusan előrevetíti a következő év ünnepeit is, így az év végi ünnepek (példány Karácsony) közeledtével sem ürül ki az ablak alsó görgethető listája.

Amire szükséged lehet: A Notepad++ egy ingyenes forráskódszerkesztő és a Jegyzettömb helyettesítője, amely számos programozási nyelvet támogat.

Az "emoji" ikook megváltoztatása

Pontosan megmutatom, hogyan tudod ezt a meglévő „magyar-unnepnap-jelzo.html" fájlodban másodpercek alatt átvezetni. Az ikonokat közvetlenül az ünnepek listájához (a JavaScript részbe) adjuk hozzá, így a program automatikusan a megfelelő emojit fogja kitenni a listában és a felső kiemelt státuszboxban is, feltételezve, hogy saját ikon készleted van

Az ikoncsere lépései:

1. Kattints a jobb egérgombbal az Asztalon lévő magyar-unnepnap-jelzo.html fájlra, és válaszd a Társítás -> Jegyzettömb opciót (a Notepad++ jobb).
2. Görgess le a kód alsó harmadához, ahol a return [ után az ünnepek listája található.
3. Itt már láthatod az ikonokat, és ha elkészítetted a saját ikonkészleteded, egyszerűen cseréld le.

function getHolidays(year) {
        const holidays = [];
        const fixHolidays = [
            { month: 0, day: 1, name: "🥂 Újév", desc: "Az év első napja, a fogadalmak és az új kezdetek ünnepe." },
            { month: 2, day: 15, name: "Nemzeti ünnep (1848)", desc: "Az 1848-as forradalom és szabadságharc évfordulója.", isNational: true },
            { month: 4, day: 1, name: "🛠️ Munka ünnepe", desc: "A dolgozók nemzetközi összefogásának és jogainak napja." },
            { month: 7, day: 20, name: "👑 Államalapítás ünnepe", desc: "Szent István király és az államalapítás nemzeti ünnepe." },
            { month: 9, day: 23, name: "Nemzeti ünnep (1956)", desc: "Az 1956-os forradalom és szabadságharc emléknapja.", isNational: true },
            { month: 10, day: 1, name: "🕯️ Mindenszentek", desc: "A megdicsőült lelkek emléknapja, a halottakra való emlékezés előestéje." },
            { month: 11, day: 25, name: "🎄 Karácsony - Szenteste", desc: "Jézus Krisztus születésének ünnepe, a szeretet és a család napja." },
            { month: 11, day: 26, name: "🎁 Karácsony másodnapja", desc: "A karácsonyi ünnepkör folytatása, családi látogatások ideje." }
        ];

Mi változik?

Minden ünnep neve előtt alapból van egy hozzá illő, univerzális hangulatjel (például a nemzeti ünnepekhez a magyar zászló, a Húsvéthoz a húsvéti tojás, a Mindenszentekhez a gyertya, a Karácsonyhoz pedig a fenyőfa és az ajándék). Ha lecserélted az ikonokat a saját készletedre, a Jegyzettömben (vagy Notepad++ programban) kattints baloldal felső sarkában a „Fájl” menűre, majd a „Mentés” linkre. Ha újból megnyitod a fájlt a böngészőben, már a saját ikonjaiddal jelenik meg a naptár.

Mitől öröknaptár?

A programban csak a 2026 és 2027 évek látszanak egyelőre és több évet nem mutat, azaz úgy tűnik nem folyamatosan megy tovább minden évváltáskor, igazodva a következő év ünnepnapjaihoz.

Azonban, teljesen folyamatosan megy, csak a program hosszúsága miatt került ennyi a dobozba, és minden egyes évváltáskor automatikusan igazodik a jövő évhez! Nem fog leállni 2027 végén sem.

A kód úgy lett megírva, hogy mindig igazodik dinamikusan az éppen aktuális évhez (amit a számítógéped belső órájából olvas ki) és az azt követő évekhez.

Nézzük meg ezt a sort a kódból:

const currentYear = now.getFullYear();
let allHolidays = [...getHolidays(currentYear), ...getHolidays(currentYear + 1)];

• Most (2026-ban): A currentYear értéke 2026. A kód legenerálja a 2026 és 2027 (currentYear + 1) év ünnepeit.
• Amint elérkezik 2027. január 1.: A program automatikusan érzékeli az évváltást.
• A currentYear azonnal 2027 lesz, a kód pedig magától átvált a 2027 és 2028 év ünnepeinek generálására.

Miért pont 2 évet generál egyszerre?

Ez egy biztonsági guardrail (észrevétlen segítség) a gördülő logikához. Ha csak a jelenlegi évet (currentYear) nézné, akkor minden év decemberében (például 2026. december 27-én) a Karácsony elmúltával teljesen kiürülne az alsó ablak, mert az adott évben már nem lenne több ünnep.

Mivel azonban a program mindig hozzácsapja a következő évet is, decemberben is gyönyörűen látni lehet a soron következő Újévet, Húsvétot és a többi jövőbeli ünnepet.

Amint a naptár átfordul az új évre, a múlt eldobásra kerül, a lista pedig „felfelé gördül”, és behozza a naptárba a még egy évvel távolabbi dátumokat.

Honnan tudja a pontos időt? (A Windows órája)

Amikor a kód kiadja a new Date() parancsot, olyankor a böngésző lekérdezi a számítógéped (a Windows) belső óráját. Nem a Windows scriptjeit futtatja, csupán a számítógép hardveres idejét és a beállított időzónát (Magyarország) olvassa ki. Ezért van az, hogy ha a gépeden átállítod az időt, a programod is azonnal követni fogja azt.

Honnan tudja a névnapokat? (A JavaScript kód)

Fentebb már említettem, hogy először a programot Python programozói nyelven készítettem, azonban most az internetes lekérdezés (az API-t) teljesen el lett távolítva a programból a fagyások miatt, a névnapok megjelenítése most már 100%-ban offline.

• A JavaScript kód második részében található az a hatalmas szöveges lista (const localNameDays), amely tartalmazza az év összes napját és a hozzájuk tartozó neveket.
• A böngésző a számítógép belső RAM memóriájában tárolja el ezt a listát a program megnyitásakor, és amikor a dátum alapján szüksége van egy névnapra (például a mai naphoz), a másodperc törtrésze alatt kikeresi a saját memóriájából. Semmilyen külső API függvényt nem hív meg ehhez az internetről.

Mi végzi a nevek és dátumok formázását? (Böngésző API)

A dátumok gyönyörű magyar kiírásáért (pl. 2026. október 16. péntek) a böngésző saját, beépített Nemzetköziségi API-ja (úgynevezett Intl vagy toLocaleDateString funkció) felel.

Ez a beépített böngésző-API pontosan ismeri a világ összes nyelvének nyelvtani és dátumozási szabályait, így amikor a kódodban megadtuk a 'hu-HU' jelzést, a böngésző magától tudta, hogyan kell a számokat szép magyar szöveggé alakítani.

Hogyan használható és mire jó a téma váltó gomb?

• Kényelmes kézi vezérlés: A letöltött programban, a jobb felső sarokban található, kapszula alakú 🌓 gombra kattintva bármikor, egyetlen mozdulattal válthatsz a világos és a sötét színvilág között, így a felület megjelenését teljesen a saját igényeidhez igazíthatod.
• Szemkímélő sötét mód: Késő este, éjszaka vagy gyengébb környezeti fényviszonyok mellett érdemes a sötét témát választani, mivel a sötétszürke háttér és a finomított fényerejű nemzeti színek csökkentik a szemfáradtságot, és nem vakítanak a monitor előtt.
• Jól olvasható világos mód: Napközben, erős fényben vagy közvetlen napsütésben a világos üzemmód nyújtja a legjobb láthatóságot, hiszen a tiszta fehér háttér és a kontrasztos, sötét betűk mellett a naptár tartalma még tükröződő képernyőn is tökéletesen olvasható marad.
• Intelligens memóriafunkció: A program a háttérben automatikusan megjegyzi az utoljára kiválasztott beállításodat, így az Asztalról történő legközelebbi indításkor vagy az oldal újratöltése után is pontosan abban a módban nyílik meg, ahogyan legutóbb hagytad.

A jobb felső sarokban található gombra kattintva lehet váltani a világos és a sötét mód között.

Ha új hivatalos ünnepnapot vezetnek be

Ez egy rendkívül fontos kérdés a program jövőbeli karbantartása szempontjából! Mivel a kód öröknaptárként működik, ha Magyarországon új hivatalos ünnepnapot vezetnek be, azt mindössze egyetlen helyen, a JavaScript kód belső listájában kell rögzíteni, és a program attól kezdve minden évben automatikusan számolni és görgetni fogja.

Pontosan megmutatom, hol található ez a rész, és egy gyakorlati példán keresztül szemléltetem a hozzáadást.

Példa: Hogyan adjunk hozzá egy új ünnepet?

Nyisd meg a fájlt a Notepad++-ban, és görgess le a JavaScript részben a function getHolidays(year) { függvényen belül található const fixHolidays = [ tömbhöz (ez az ünnepek listája).

Hol kell módosítani a kódot?

Tegyük fel, hogy bevezetnek egy új ünnepnapot minden év szeptember 5-én, melynek neve „A Magyar Kultúra Napja” (ez csak egy példa), és szeretnénk elé egy egyedi emojit (pl. egy könyvet: 📚) is tenni. Az új ünnepet az alábbi formátumban kell beszúrni a többi ünnep közé (fontos, hogy a hónap számozása 0-val kezdődik, így a szeptember az a 8-as szám lesz!):

{month: 8, day: 5, name: "📚 A Magyar Kultúra Napja", desc: "A nemzeti értékek és kulturális örökségünk ünnepe."}

Így fog kinézni a módosított lista a kódban:

A meglévő listát egyszerűen ki kell egészíteni az új sorral, ügyelve arra, hogy a sorok végén vessző legyen (kivéve az utolsó elemet):

        // Fix ünnepek és leírásaik az egyedi piros-fehér-zöld kör emojival
        const fixHolidays = [
            { month: 0, day: 1, name: "🥂 Újév", desc: "Az év első napja, a fogadalmak és az új kezdetek ünnepe." },
            { month: 2, day: 15, name: "Nemzeti ünnep (1848)", desc: "Az 1848-as forradalom és szabadságharc évfordulója.", isNational: true },
            { month: 4, day: 1, name: "🛠️ Munka ünnepe", desc: "A dolgozók nemzetközi összefogásának és jogainak napja." },
            { month: 7, day: 20, name: "👑 Államalapítás ünnepe", desc: "Szent István király és az államalapítás nemzeti ünnepe." },
            
            // PÉLDA: Ide szúrtuk be az új fix ünnepnapot (Szeptember 5. -> month: 8, day: 5)
            { month: 8, day: 5, name: "📚 A Magyar Kultúra Napja", desc: "A nemzeti értékek és kulturális örökségünk ünnepe." },
            
            { month: 9, day: 23, name: "Nemzeti ünnep (1956)", desc: "Az 1956-os forradalom és szabadságharc emléknapja.", isNational: true },
            { month: 10, day: 1, name: "🕯️ Mindenszentek", desc: "A megdicsőült lelkek emléknapja, a halottakra való emlékezés előestéje." },
            { month: 11, day: 25, name: "🎄 Karácsony - Szenteste", desc: "Jézus Krisztus születésének ünnepe, a szeretet és a család napja." },
            { month: 11, day: 26, name: "🎁 Karácsony másodnapja", desc: "A karácsonyi ünnepkör folytatása, családi látogatások ideje." }
        ];

Két rendkívül fontos szabály a bővítéshez:

1. A hónapok indexelése (0-tól 11-ig): A JavaScript a hónapokat nullától számolja. Erre nagyon kell figyelni az új dátum megadásakor:
2. Január: 0, Február: 1, Március: 2, Április: 3, Május: 4, Június: 5, Július: 6, Augusztur: 7, Szeptember: 8, Október: 9, November: 10, December: 11.
3. Nemzeti ünnep kiemelése: Ha az új ünnep egy hivatalos állami nemzeti ünnep, és szeretnénk, hogy a magyar zászló jelenjen meg előtte, akkor a sor végére egyszerűen szúrjuk be a ,isNational:true parancsot (pontosan úgy, ahogy a márciusi vagy októberi ünnepnél látható).

Miután elmentettük a módosítást a Notepad++-ban, a programod máris ismeri az új ünnepet, és ha eljön az ideje, automatikusan felgördíti legfelülre!

Összegzésként:

A program egy teljesen önellátó, zárt kis világ. Ha felmásolnád egy Pendrive-ra, és elvinnéd egy olyan számítógépre, amin nincs internet és nem Windows, hanem például Linux vagy Apple Mac rendszer fut, a böngészőben ott is pontosan ugyanilyen prémium módon jelenne meg és működne, mert a megjelenítéshez szükséges összes intelligencia magában a böngészőmotorban található meg!

Végül:

Jó tudni, hogy a program teljesen biztonságos, offline működik és nem nyúl a Windows belső rendszeréhez! Ha van még bármilyen kérdésed a működésével vagy a háttérben futó kódokkal kapcsolatban, kérdezz a Facebookon vagy e-mailben a Kapcsolat oldalon!