"Nyers" kódok ingyenes letöltése
A kódok díjmentesen használhatók és integrálhatók a saját online projektjektbe. A licencnek azonban van egy fontos korlátozása, hogy a kódok nem használhatók önálló árusításra, fizetős termékként való szolgáltatásként történő terjesztésre vagy profitforrásként való értékesítésre. A modul működéséhez szükséges forráskódokat (strukturált HTML, CSS stíluslap és JavaScript), az oldal aljára görgetve külön blokkokra bontva is elérhetők.
Miért lett ez a naptár verzió pontos?
A piacon található sok más online naptárral ellentétben ez a verzió kiküszöböli a manuális számítási hibákat és a rögzített napok merevségét. A kiemelkedő pontosságot az alábbi három kulcsfontosságú előny garantálja:
- Dinamikus Holdhónap-követés: A rendszer nem előre beprogramozott, merev napokat léptet, hanem valós időben követi a luniszoláris naptár finom eltolódásait.
- Valós idejű óra-szinkronizáció: A beépített számláló folyamatosan kommunikál a felhasználó számítógépének vagy telefonjának belső órájával, így kizárt az időzónákból adódó csúszás.
- Csillagászati pontosságú gyertyagyújtás: A Budapestre optimalizált algoritmus naprakészen követi az évszakok változását és a napnyugta perceit, így a szentírási parancsolat szerinti 18 perces korrekció mindig hajszálpontos.
Teljesen responsíve a naptár
A mai modern webvilágban elengedhetetlen, hogy egy alkalmazás minden kijelzőn tökéletesen mutasson. Ez a naptármodul a legújabb CSS Flexbox és Grid technológiák használatával készült, így teljesen reszponzív. Ez azt jelenti, hogy a kártyák, a dátumboxok és a visszaszámláló szövegei automatikusan és folyamatosan alkalmazkodnak az adott képernyő szélességéhez. Legyen szó óriási asztali monitorról, közepes méretű tabletről vagy egy kisméretű okostelefonról, a naptár elrendezése nem esik szét, nem lóg ki a képernyőről, hanem mindvégig esztétikus, prémium és tökéletesen olvasható marad.
Milyen lesz ha bemásoljuk a weboldalba
A forráskód beágyazása után a modul azonnal átveszi a környezet hangulatát, miközben megőrzi egyedi, professzionális tulajdonságait:
- Azonnal megjelenik a letisztult, lekerekített sarkokkal és lágy, modern árnyékokkal ellátott prémium információs kártyarendszer.
- A beépített hover animációknak köszönhetően az egér kurzor mozgatására a dobozok interaktívan reagálnak, ami növeli a felhasználói élményt.
- A hangulatos emojik és ikonok (mint a könyv és a gyertya) azonnal vizuális horgonyként szolgálnak, így a látogatók másodpercek alatt átlátják az adatokat.
Hogyan készült?
A feladat azért tűnik nehéznek, mert a zsidó naptár egy bonyolult luniszoláris (hold-nap) naptár, míg a nálunk használatos Gergely-naptár tisztán szoláris (nap) naptár. A holdhónapok hossza váltakozó, ráadásul a zsidó évben időről időre megismétlődik egy teljes szökőhónap (az Ádár II.), hogy az ünnepek ne csússzanak el az évszakokhoz képest. A modul tervezése során az volt a cél, hogy ezt a két merőben eltérő matematikai rendszert úgy fésüljük össze egyetlen elegáns kóddá, hogy az a felhasználó számára láthatatlanul, villámgyorsan végezze el a háttérmunkát.
Mit tud ma egy böngésző?
A modern webböngészők (mint a Google Chrome, Mozilla Firefox, Microsoft Edge vagy a Safari) már nem csupán egyszerű megjelenítő szoftverek, hanem rendkívül okos, beépített számítási motorral rendelkező platformok. Ahelyett, hogy nehéz, több megabájtos külső függvénykönyvtárakat kényszerítenénk a látogatókra az oldalak betöltésekor, a mai böngészők natív módon képesek kezelni a világ legbonyolultabb naptárrendszereit is.
A modulunk alapját a böngészőkbe épített **Intl.DateTimeFormat (nemzetköziesítési API)** használata adja. Ez a gyári motor közvetlenül a számítógép operációs rendszerének legmélyebb, atombiztos csillagászati és naptári adatait éri el, így a számítási logika gyakorlatilag nulla bájt extra terhet jelent a felhasználó adatforgalmának, a kód mégis precíz marad.
Mit tud az Intl.DateTimeFormat?
Ez a beépített programozási felület (API) olyan funkciókat biztosít a fejlesztők számára, amelyek korábban csak több ezer soros egyedi kódolással voltak elérhetőek:
- Intelligens naptárváltás: Egyetlen paraméter módosításával képes a standard gergely-naptári időbélyeget átkonvertálni az iszlám, a kínai vagy jelen esetben a héber időszámításra.
- Automatikus szökőév-kezelés: Hiba nélkül tudja, mikor tartalmaz a zsidó év egy extra Ádár II. hónapot, és matematikai pontossággal követi a változó holdhónapok hosszát is.
- Nyelvfüggetlen adatkinyerés: A
formatToPartseljárás segítségével a fejlesztő darabokra szedheti a dátumot, így teljesen függetlenné válhatunk a felhasználó számítógépének nyelvi vagy regionális beállításaitól.
Nagyszerűen használható shábbát naptárhoz
Ez a technológia tökéletes alapot biztosít a heti szent nap követéséhez, hiszen kétirányú beépítést tesz lehetővé: a rendszer a világi dátumból azonnal előállítja a héber naptár adatait, és fordítva. Ez a modul kifejezetten külön mezőket tartalmaz az aktuális napi állapot, a következő ünnep és a gyertyagyújtás számára, így a látogatóknak nem kell bonyolult átszámításokkal bajlódniuk, a képernyőn minden adat azonnal érthetővé válik.
Hogy működik a modulba épített script a háttérben
Amikor egy látogató megnyitja a hebrew-shabbat-calendar.html oldalt, a háttérben az alábbi három lépésből álló folyamat fut le a másodperc törtrésze alatt:
- Adatbeolvasás és validálás: A script lekéri a számítógép aktuális idejét, majd az
Intlmotor segítségével kinyeri a mai nap zsidó naptár szerinti évét, hónapját és napját, amit azonnal lefordít magyarra a beépített szótár alapján. - Céldátum és napnyugta kalkuláció: A kód megkeresi a legközelebbi pénteket, majd egy Budapest koordinátáira optimalizált csillagászati egyenlet-közelítéssel kiszámítja a napnyugta percét, amiből levonja a parancsolat szerinti 18 percet.
- Folyamatos szinkronizáció: Egy beépített időzítő (
setInterval) másodpercenként újra és újra összeveti a gép óráját a céldátummal, frissítve a visszaszámláló szövegét, péntek este pedig automatikusan átvált ünnepi üzemmódba.
Licencfeltételek (CC BY-NC-SA 4.0)
Ez a modul a Creative Commons Nevezd meg! - Ne add el! - Így add tovább! 4.0 (CC BY-NC-SA 4.0) nemzetközi licenc alatt áll.
Megengedett:
- Ingyenes használat: Beépítheted saját személyes vagy üzleti célú weboldaladba teljesen díjmentesen.
- Módosítás és testreszabás: A modul kódját szabadon átalakíthatod a saját weboldalad arculatára.
Nem megengedett:
- Kereskedelmi értékesítés: Tilos a programot (vagy annak módosított változatát) önálló termékként eladni, bérbe adni vagy bármilyen módon haszonszerzés céljából értékesíteni.
Feltételek és támogatás:
A készítő az ingyenes verzióhoz technikai támogatást nem nyújt.
Jogi nyilatkozat és felelősségkizárás
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Magyar fordítás: A program „olyan-amilyen” alapon kerül használatra, minden közvetlen vagy közvetett garancia nélkül. A készítő nem szavatolja a naptár hibátlan működését vagy pontosságát. A használat során bekövetkezett esetleges károkért, adatvesztésért vagy hibákért kizárólag a felhasználó felelős, a szerző semmilyen esetben sem vonható felelősségre.
Letölthető html, css és script kódok
<div class="calc-container"><div class="feast-box"><div class="feast-name"><strong>Ma:</strong> <span id="sabatTodayHebrew"></span>, <span id="sabatTodayGregorian"></span>. <strong id="sabatTodayName"></strong>: <span id="sabatStatusText"></span></div><div class="feast-name"><strong>Következő SÁBÁT</strong> (szombat ünnep): <span id="sabatNextGregorian"></span></div><div class="feast-name"><strong>Még hátra van:</strong> <span id="sabatCountdownTop"></span></div><div class="feast-name">💡 Gyertya gyújtás Budapesti idõ szerint: <span id="sabatCandleDate"></span>. <span id="sabatCandleTime"></span></div><div id="sabatMainLabel">Minden hét hetedik napja péntek este napnyugtától szombat este napnyugtáig tart.</div><div class="feast-ref">📖 1Mózes 2:3., 2Mózes 20:8–10., 3Mózes 23:1–3.</div></div></div>
.calc-container {padding: 1rem;display: flex;justify-content: center;align-items: center}.feast-box {background: #f7f9f7;border: 1px solid #3FA1E8;border-radius: 8px;padding: 2.5rem 2rem;text-align: center;max-width: 750px;width: 100%;margin: 2rem auto;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(139, 98, 252, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.02);font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;transition: transform 0.3s ease, box-shadow 0.3s ease}.feast-box:hover {transform: translateY(-2px);box-shadow: 0 10px 20px -5px rgba(139, 98, 252, 0.15), 0 25px 30px -5px rgba(0, 0, 0, 0.03)}.feast-name {border: 1px solid #cbd5e1;border-radius: 12px;padding: 1.3rem 1.5rem;margin-bottom: 1.8rem;font-size: 1.05rem;color: #2d3748;background: #ffffff;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;gap: 0.3rem;box-shadow: 0 6px 12px -4px rgba(167,167,167,.15);line-height: 1.5;transition: all 0.2s ease}.feast-name:hover {background: #e2e8f0;border-color: #cbd5e1;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03)}.feast-name[style*="border-color: #8b62fc"], .feast-name[style*="border-color:#8b62fc"] {border: 1.5px solid #a78bfa ;background: #f5f3ff}.feast-label {font-weight: 600;color: #475569}.feast-title {color: #4f46e5;font-weight: 700}#sabatStatusText span {padding: 2px 8px;border-radius: 6px}#sabatCountdownTop{color:#FF0000;font-weight:500}.feast-subtitle {font-weight: 700 ;color: #4f46e5 ;font-size: 1.1rem ;margin-top: 1.8rem ;margin-bottom: 1rem }#sabatMainLabel {color: #1e293b ;font-size: 1.1rem ;margin-bottom: 1.5rem ;padding: 0 1rem}.feast-ref {font-weight: 600 ;font-size: 1rem ;color: #64748b ;margin-top: 1.5rem ;letter-spacing: 0.5px}#sabatNextGregorian{color:#286fb4;font-weight:500}@media (max-width: 640px) {.feast-box {padding: 1.5rem 1rem;margin: 1rem auto;}.feast-title-main {font-size: 1.25rem ;}.feast-name {font-size: 0.95rem ;padding: 0.9rem 1rem}}
<script>
document.addEventListener("DOMContentLoaded", () => {
// Kombinált szótár: szám és angol szöveges kulcsok esetén is hibátlanul fordít magyarra!
const hebMonthsHu = {
1: "Niszán", 2: "Ijár", 3: "Sziván", 4: "Támuz", 5: "Áv", 6: "Elul",
7: "Tisré", 8: "Hesván", 9: "Kiszlév", 10: "Tévét", 11: "Svát", 12: "Ádár", 13: "Ádár II.",
"Nisan": "Niszán", "Iyar": "Ijár", "Sivan": "Sziván", "Tamuz": "Támuz", "Av": "Áv", "Elul": "Elul",
"Tishrei": "Tisré", "Heshvan": "Hesván", "Kislev": "Kiszlév", "Tevet": "Tévét", "Shvat": "Svát",
"Adar": "Ádár", "Adar I": "Ádár I.", "Adar II": "Ádár II."
};
const weekDaysHu = ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat"];
// 3. RUGALMAS DÁTUM-BEOLVASÓ (Szöveges és számos böngészőmotorokhoz egyaránt)
function getHebrewDetails(date) {
const formatter = new Intl.DateTimeFormat('en-US-u-ca-hebrew', {
year: 'numeric', month: 'long', day: 'numeric'
});
const formatterNumeric = new Intl.DateTimeFormat('en-US-u-ca-hebrew', {
year: 'numeric', month: 'numeric', day: 'numeric'
});
const parts = formatter.formatToParts(date);
const partsNum = formatterNumeric.formatToParts(date);
let day = 1, monthKey = "", year = 5786;
// Először megpróbáljuk kinyerni a szöveges hónapnevet (pl. "Elul")
parts.forEach(p => {
if (p.type === 'day') day = parseInt(p.value, 10);
if (p.type === 'month') monthKey = p.value;
if (p.type === 'year') year = parseInt(p.value, 10);
});
// Ha a böngésző még a 'long' beállításra is számot adott vissza, átváltunk a numerikus indexre
if (!isNaN(monthKey)) {
partsNum.forEach(p => {
if (p.type === 'month') monthKey = parseInt(p.value, 10);
});
}
return { year, monthKey, day };
}
// 4. Matematikai napnyugta-kalkulátor Budapest földrajzi szélességére
function getBudapestCandleTime(date) {
const year = date.getFullYear();
const month = date.getMonth();
const day = date.getDate();
const start = new Date(year, 0, 1);
const diff = date - start;
const dayOfYear = Math.floor(diff / (1000 * 60 * 60 * 24));
const d = dayOfYear;
let sunsetMinutesAfterMidnight = 1070 + 110 * Math.sin((2 * Math.PI * (d - 80)) / 365);
let hrs = Math.floor(sunsetMinutesAfterMidnight / 60);
let mins = Math.floor(sunsetMinutesAfterMidnight % 60);
let sunset = new Date(year, month, day, hrs, mins, 0);
sunset.setMinutes(sunset.getMinutes() - 18);
return sunset;
}
// 5. Fő számítási folyamat a dátumok kitöltéséhez
function updateSabatModule() {
const now = new Date();
const currentDayIdx = now.getDay();
// Mai dátumok formázása (Az új, rugalmas hónap-meghatározással)
const todayHeb = getHebrewDetails(now);
const resolvedMonthName = hebMonthsHu[todayHeb.monthKey] || todayHeb.monthKey;
document.getElementById("sabatTodayHebrew").innerText = `${todayHeb.year}. ${resolvedMonthName} ${todayHeb.day}.`;
document.getElementById("sabatTodayGregorian").innerText = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`;
document.getElementById("sabatTodayName").innerText = weekDaysHu[currentDayIdx];
// Kiszámítjuk a legközelebbi pénteket
let nextFriday = new Date(now);
let distToFriday = (5 - currentDayIdx + 7) % 7;
if (currentDayIdx === 5) {
const todayCandle = getBudapestCandleTime(now);
if (now >= todayCandle) {
distToFriday = 7;
}
}
nextFriday.setDate(now.getDate() + distToFriday);
nextFriday.setHours(0, 0, 0, 0);
const candleTime = getBudapestCandleTime(nextFriday);
// Kiszámítjuk a Sábát kimenetelét (Szombat este)
let nextSaturday = new Date(nextFriday);
nextSaturday.setDate(nextFriday.getDate() + 1);
const szombatNapnyugta = getBudapestCandleTime(nextSaturday);
let sabatEndTime = new Date(szombatNapnyugta);
sabatEndTime.setMinutes(sabatEndTime.getMinutes() + 58);
// Következő Sábát világi dátumának kiírása
document.getElementById("sabatNextGregorian").innerText = `${nextSaturday.getFullYear()}.${String(nextSaturday.getMonth() + 1).padStart(2, '0')}.${String(nextSaturday.getDate()).padStart(2, '0')}.`;
// Gyertyagyújtás idejének kiírása
document.getElementById("sabatCandleDate").innerText = `${candleTime.getFullYear()}.${String(candleTime.getMonth() + 1).padStart(2, '0')}.${String(candleTime.getDate()).padStart(2, '0')}`;
document.getElementById("sabatCandleTime").innerText = `este ${candleTime.getHours()} óra ${String(candleTime.getMinutes()).padStart(2, '0')} perc`;
// 6. Órához szinkronizált visszaszámláló és státuszkezelő logika
let targetTime = candleTime;
let isSabatNow = false;
// Ellenőrizzük, hogy éppen Sábát van-e (Péntek gyertyagyújtástól Szombat estig)
if (currentDayIdx === 5) {
const todayCandle = getBudapestCandleTime(now);
if (now >= todayCandle) {
isSabatNow = true;
}
} else if (currentDayIdx === 6 && now < sabatEndTime) {
isSabatNow = true;
}
if (isSabatNow) {
// Sábát ünnepi mód aktív
document.getElementById("sabatStatusText").innerHTML = `<span style="color: #006600; font-weight: bold;">SÁBÁT ÜNNEP VAN!</span>`;
document.getElementById("sabatCountdownTop").innerText = "Sábát szent szombatja tart, békés szombatot!";
} else {
// Normál hétköznapi mód: Hajszálpontos visszaszámlálás a gép belső órája alapján
document.getElementById("sabatStatusText").innerHTML = `<span style="color: #ff6666;">Nem Ünnepnap:</span> Munkanap!`;
// Ha ma péntek van napközben, akkor pontosan a mai gyertyagyújtásig számolunk vissza
if (currentDayIdx === 5) {
const todayCandle = getBudapestCandleTime(now);
if (now < todayCandle) {
targetTime = todayCandle;
}
}
let diff = targetTime - now;
let diffDays = Math.floor(diff / (1000 * 60 * 60 * 24));
let diffHours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let diffMinutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
let diffSeconds = Math.floor((diff % (1000 * 60)) / 1000);
// A felső visszaszámláló kijelzése (hajszálpontosan szinkronizálva a számítógéppel)
document.getElementById("sabatCountdownTop").innerText = `${diffDays} nap, ${diffHours} óra, ${diffMinutes} perc, ${diffSeconds} másodperc`;
}
}
// 7. Indítás és folyamatos, másodpercenkénti auto-szinkronizáció
updateSabatModule();
setInterval(updateSabatModule, 1000);
});
</script>Kódok használata, beépítése
A naptár-box helyes működése érdekében, az alábbi beépítési útmutatóban van három fontos rész, amit vegyük figyelembe:
- HTML beillesztés — A komponens struktúráját tartalmazó HTML‑részletet a weboldal fő tartalmi blokkjába kell helyezni, például a
<main>elembe, egy.main-containerdivbe vagy az adott aloldal bármelyik konténerébe. - CSS integrálás — Ha a stílusokat közvetlenül a HTML‑ben használod, akkor a dokumentum
<head>szakaszán belül a<style>blokkba kell másolni. Külső fájl esetén egyszerűen illeszd a meglévőstyle.cssvégére. - JavaScript elhelyezés — A script teljes tartalma változtatás nélkül a HTML oldal aljára kerüljön, közvetlenül a záró
</body>tag elé.
Ha a JavaScriptet külön fájlban szeretnéd tárolni, hozz létre egy tetszőleges nevű állományt (például hebrew-shabbat-calendar.js) a projekt gyökerében vagy közvetlenül a HTML mellett. Ezután hivatkozz rá a megfelelő útvonallal. A gyorsabb és nem blokkoló betöltés érdekében érdemes a defer attribútumot is használni.
Példa a modern beágyazásra: <script src="hebrew-shabbat-calendar.js" defer></script>
Kód elhelyezésének mintája
A fájlokat az alábbi módon illeszd be a modulba:
- CSS fájl: A
<style>részben kap helyet, itt definiálhatók a megjelenési stílusok és színek. - HTML fájl: A
<body>szakaszban található, ez adja a modul szerkezetét. Ha a fő tartalomhoz tartozik, a<main>vagy.main-containerrészbe illeszd. - Script fájl: A
<script>blokkban, a dokumentum végén helyezkedik el, hogy a betöltés után fusson le.
Végül
1. A legegyszerűbb megoldás: Ha az oldal felső felében található letöltő részben a hebrew-shabbat-calendar.zip gombra kattintva letöltjük a kész fájlt, és kicsomagolás után (pl. az Asztalra) a megjelent hebrew-shabbat-calendar.html fájlt egy kódszerkesztő programban – például a népszerű Notepad++-ban – megnyitjuk, azonnal hozzáférhetünk az összes forráskódhoz, és pontosan láthatjuk azok weboldalon belüli, helyes elrendezését is.
2. Tipp: Miután a letöltő gombra kattintva letöltöttük a kész ZIP-fájlt, egyszerűen csomagoljuk ki például az Asztalra (jobb egérgomb a fájlon, majd a „Kicsomagolás ide...” menüpont). A ZIP-fájlban található, kicsomagolt hebrew-shabbat-calendar.html állomány azonnal használatra kész. Így nem kell minden alkalommal megnyitni ezt a weboldalt az adatok ellenőrzéséhez, hanem egyszerűen a saját lokális fájlunkra kattintva is bármikor elindíthatjuk a Sábát naptárt és a visszaszámláló alkalmazást a böngészőnkben. Ez ilyen egyszerű!
Kérdésed van? Írj a facebook oldalra.
írta: Kacsó Károly. 2026. augusztus 26.