Javascript naptár készítése. Mikor elkezdtem tanulni a JavaScriptet, első gondolatom egy naptár készítése volt. Gondolom, ti is ismeritek, a G-Portálos naptárokat a menüben. Mi is ilyesmit fogunk készíteni. Első ránézésre eléggé bonyolult, de majd megértitek. Remélem, hogy tetszeni fog. Először is nézzük meg, hogy hogyan fog kinézni: A naptár alapját egy táblázat teszi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Javascript naptár</title>
<style type="text/css">
td { background-color:#FFFFFF; border:#0099FF thin solid; font-family:Arial; font-size:14px; text-align:center; width:20px; height:16px; }
</style>
</head>
<body bgcolor="#000000">
<center> <!—ez csak a középre igazítás miatt van itt, nem része a naptárnak -->
<table bgcolor="#000000" cellpadding="0" cellspacing="2">
<tr><td colspan="7" style="width:180px;">Március</td></tr>
<tr><td>H</td><td>K</td><td>Sz</td><td>Cs</td><td>P</td><td>Sz</td><td>V</td></tr>
<tr><td> </td><td> </td><td> </td><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr>
<tr><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
<tr><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
<tr><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td> </td></tr>
</table>
</center>
</body>
</html>Amint látszik, ez nem fog magától változni, ezt nekünk kell mindig újraírnunk, ráadásul nem is jelzi ki, hogy milyen nap van most. Ezért kell a Javascripthez folyamodnunk. Először is be kell ágyaznunk majd a megírt kódokat a html oldalunkba, ezt két féle képpen is megtehetjük. Én a külső javascript kódot fogom használni az áttekinthetőség érdekében. Amit meg kell írnunk a html-be az a honlaphoz tartozó CSS formázások, és a javascriptre való hivatkozás.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
table.naptarone
{
text-align:left;
background: none;
font-family:Arial;
font-size:10px;
font-weight:normal;
margin-top: 20px;
}
td.nemaktualis
{
text-align:center;
font-family:Arial;
font-size:10px;
font-weight:normal;
text-decoration:none;
color:#000000;
background: #FFFFCC;
width: 20px;
height: 20px;
}
td.aktualis
{
text-align:center;
font-family:Arial;
font-size:10px;
font-weight:normal;
color: #FFFFFF;
background: #FF6666;
width: 20px;
height: 20px;
}
td.fejlec
{
text-align:center;
font-family:Arial;
font-size:10px;
font-weight:normal;
color: black;
background: #FFFFCC;
width: 140px;
height: 20px;
}
</style>
</head>
<body bgcolor="#000000" >
<script type="text/javascript" language="javascript" src="naptar.js"></script>
</body>
</html>Ha ezzel megvagyunk, akkor megírhatjuk a javascript file-t is. Először is tanuljuk, meg, hogy hogyan lehet lekérdezni a rendszeróráról az aktuális évet, hónapot, és dátumot.
now = new Date();
document.write(now);Az első sorból megkapjuk a rendszerórából az aktuális Évet, Hónapot, Napot, Órát, Percet, Másodpercet. A második sorral kiíratjuk a honlapra a fenti adatokat. Ha megírtuk a javascriptet, akkor nyissuk meg a böngészőnkkel a honlapot amibe beágyaztuk a javascript file-t, és ehhez hasonlót láthatunk: Sat Mar 10 17:10:08 UTC+0100 2007 Ha működik bővítsük ki a programot az alábbi kódokkal:
year = now.getYear();
month = now.getMonth();
date = now.getDate();
day = now.getDay();
document.write(year);
/*ez az év */
document.write(month);
/* ez a hónap */
document.write(date);
/* ez a nap */
document.write(day);
/* ez az aktuális nap ’napja’ lehetséges értékei 0,1,2,3,4,5,6 amik a hét napjaival egyeznek meg */Ha kész van, akkor mentsük el, és nyissuk meg újra a html dokumentumot a böngészővel. És ezt látjuk: Sat Mar 10 17:14:30 UTC+0100 200720072106 Ha ilyen nagyon jó, és továbbléphetünk, de előtte módosítsuk a kódunkat, hogy a fölösleges parancsok ne zavarjanak bennünket. Ki kell törölni az eddig leírt összes „document.write(xyz);” parancsot, hogy így nézzen ki az eddig írt kódunk:
now = new Date();
year = now.getYear();
month = now.getMonth();
date = now.getDate();
day = now.getDay();Ha látunk egy naptárt, akkor feltűnik nekünk, hogy ha a hónap első napja nem Hétfő, akkor annyi üres „cellát” tesz be az adott hónap első napja elé, hogy az a megfelelő napra kerüljön. Ehhez kell nekünk egy tömb, amiben tároljuk az adott hónaphoz tartozó „eltolást”. Toldjuk meg a programunkat az alábbi kódokkal:
/*ez csak a 2007-es évre jó, de egy új naptárból bármikor kiolvasható a nekünk szükséges */
tomonth = new Array(12);
tomonth[0] = 0;
tomonth[1] = 3;
tomonth[2] = 3;
tomonth[3] = 6;
tomonth[4] = 1;
tomonth[5] = 4;
tomonth[6] = 6;
tomonth[7] = 2;
tomonth[8] = 5;
tomonth[9] = 0;
tomonth[10] = 3;
tomonth[11] = 5;
/* és irassuk ki a honlapra, hogy jó-e */
document.write(tomonth[month]);Ha jó akkor ezt látjuk: 3 majd töröljük ki a kódot a /* és...-tól a ...nth[month]);-ig, mert ez fölösleges. Ha megvan, akkor létre kell hozni egy új tömböt, ami a hónapok hosszát tárolja. Ezt is írjuk hozzá az előző kódokhoz:
monthend = new Array(12);
monthend[0] = 31;
monthend[1] = 28;
monthend[2] = 31;
monthend[3] = 30;
monthend[4] = 31;
monthend[5] = 30;
monthend[6] = 31;
monthend[7] = 31;
monthend[8] = 30;
monthend[9] = 31;
monthend[10] = 30;
monthend[11] = 31;És még be kell állítani, a hónapok neveit is:
honev = new Array(12);
honev[0] = 'Január';
honev[1] = 'Február';
honev[2] = 'Március';
honev[3] = 'Április';
honev[4] = 'Május';
honev[5] = 'Június';
honev[6] = 'Július';
honev[7] = 'Augusztus';
honev[8] = 'Szeptember';
honev[9] = 'Október';
honev[10] = 'November';
honev[11] = 'December';Ha ez is megvan akkor már csak a logikai függvényt kell megírni, ami összehozza a táblázatot. Ezt nem magyarázom el. Ezt kell hozzáfűzni a végéhez:
var nap = 1;
document.write('<table class="naptarone" cellpadding="0" cellspacing="2" > <tr>');
document.write ('<td colspan="7" class="fejlec">');
document.write (honev[month]);
document.write ('</td></tr><tr>');
document.write ('<td class="nemaktualis">H</td>');
document.write ('<td class="nemaktualis">K</td>');
document.write ('<td class="nemaktualis">SZ</td>');
document.write ('<td class="nemaktualis">CS</td>');
document.write ('<td class="nemaktualis">P</td>');
document.write ('<td class="nemaktualis">SZ</td>');
document.write ('<td class="nemaktualis">V</td></tr><tr>');
for(o=0;o<tomonth[month];o++) { document.write ('<td class="nemaktualis" align="center"> </td>') };
for(i=0;i<(7-tomonth[month]);i++){
if (nap == date) {
document.write ('<td class="aktualis">');
document.write (nap++);
document.write ('</td>');
}
else {
document.write('<td class="nemaktualis">');
document.write(nap++);
document.write('</td>');
}
}
document.write('</tr>');
document.write('<tr>');
for(i=0;i<7;i++){
if (nap <= monthend[month]) {
if (nap == date) {
document.write ('<td class="aktualis">');
document.write (nap++);
document.write ('</td>');
}
else {
document.write('<td class="nemaktualis">');
document.write(nap++);
document.write('</td>');
}
}
else { document.write('<td class="nemaktualis"> </td>'); }
}
document.write('</tr>');
document.write('<tr>');
for(i=0;i<7;i++){
if (nap <= monthend[month]) {
if (nap == date) {
document.write ('<td class="aktualis">');
document.write (nap++);
document.write ('</td>');
}
else {
document.write('<td class="nemaktualis">');
document.write(nap++);
document.write('</td>');
}
}
else { document.write('<td class="nemaktualis"> </td>'); }
}
document.write('</tr>');
document.write('<tr>');
for(i=0;i<7;i++){
if (nap <= monthend[month]) {
if (nap == date) {
document.write ('<td class="aktualis">');
document.write (nap++);
document.write ('</td>');
}
else {
document.write('<td class="nemaktualis">');
document.write(nap++);
document.write('</td>');
}
}
else { document.write('<td class="nemaktualis"> </td>'); }
}
document.write('</tr>');
document.write('<tr>');
for(i=0;i<7;i++){
if (nap <= monthend[month]) {
if (nap == date) {
document.write ('<td class="aktualis">');
document.write (nap++);
document.write ('</td>');
}
else {
document.write('<td class="nemaktualis">');
document.write(nap++);
document.write('</td>');
}
}
else { document.write('<td class="nemaktualis"> </td>'); }
}
document.write('</tr>');
document.write('</table>');És ezzel készen is volnánk. Sok sikert. #### Kapcsolódó fájlok
dinamicnaptar.htmlmainnaptar2.jsstaticnaptar.htmldinamikusnaptar.zip (fenti 3 fájl csomagolva)
Harder
Profil
Korábbi hozzászólások (11)
A régi blogon érkezett hozzászólások archívuma. Új hozzászólást már nem lehet írni.
szuper honlap
Ajánlom a szerkesztőség figyelmébe a kódok (ha jól látom pre) tagok kivizsgálását, mert ahogyan az látható, szétnyomja az oldalt, nincsen még htmlentities :(
válasz az utolsó hírben. :)
Hát ez szuper, nagyon jól elmagyaráztad. Gratulálok és köszi!
hi
nem tudnád ezt megcsinálni, h 2008-ra is yoo elygen? 2 napot elvan csúszva, azon gondolkoztam, h vmeik változónak 2vel több értéket adok, az hátha segít, de még enm jöttem rá h egyáltalán mihez kell xD
és már 2008 van =) légyszíves csináld meg, vagy csak írd le, h mit kell növelni
Helló.
Szükségem lenne a 2008-as varriációra.Át tudnád írni 2008-as megfelelőre és elküldenéd nekem?Szeretném felrakni az oldalamra.
Előre is köszönöm
[e-mail cím törölve]
Roland (valamint Semmu):
Nem szeretnék beléd kötni, mert ez nem az én stílusom, de szerintem olvasd át még1x az egész tutorial-t, mert benne van, hogy mit kell módosítani :)
Na de úgyse csinálok most semmit, így leszek olyan kedves és ide leírom neked:
Ezeket kell módosítani:
tomonth = new Array(12);
tomonth[0] = 0;
tomonth[1] = 3;
tomonth[2] = 3;
tomonth[3] = 6;
tomonth[4] = 1;
tomonth[5] = 4;
tomonth[6] = 6;
tomonth[7] = 2;
tomonth[8] = 5;
tomonth[9] = 0;
tomonth[10] = 3;
tomonth[11] = 5;
Erre:
tomonth = new Array(12);
tomonth[0] = 1;
tomonth[1] = 4;
tomonth[2] = 5;
tomonth[3] = 1;
tomonth[4] = 3;
tomonth[5] = 6;
tomonth[6] = 1;
tomonth[7] = 4;
tomonth[8] = 0;
tomonth[9] = 2;
tomonth[10] = 5;
tomonth[11] = 0;
Valamint a hónapok hosszát is meg kell változtatni erről:
monthend[1] = 28;
Erre:
monthend[1] = 29;
Hali, nekem lenne egy kerdesem. A napok szamat eltolom 6-al, mivelhogy elseje vasarnapra esik valamint a honap utolso napja 31. A tablazat amibe szerepelnek a datumok 7x6 -os, igy nekem azok a honapok amelyeknel ez osszejon nem fer ki a datum. Atalakitottam 2009-esre. Marcius 31 napos, elseje Vasarnapra esett, 6-al ellett tolva. A naptarban viszont az utolso mgjeleno nap a 29. Mit kellene atjavitsak hogy mutassa a hianyzo napokat is ? Atneztem a kodot tobbszor, de nemjottem ra hogy hol kellene ezt modositani.
Tudom, hogy régi az utolsó komment, de Joni kérdésére a válasz: az utolsó ciklust még egyszer be kell szúrni az 5. alá, úgy, ahogy van. Így viszont, ha 5 hétbe belefér egy hónap, egyel több sorod lesz. Kicsi szépséghiba.
Esetleg feltételhez lehet kötni, hogy a 6. ciklus lefusson-e, de ehhez most késő van. :)
Szia!
Hogyan lehet ezt a naptárt beszúrni a weboldalba? Valamiért nekem nem akar működni.
Az óra alá szeretném beszúrni a bal oldalra.
Válaszodat köszönöm!
Nagyon klassz, most persze már 2011 van, aktualizáltam, tudom, hogy bugyuta a kérdés, de hogy lehet és hol (a html, php) megcsinálni azt, hogy kis nyilakkal lépkedek a hónapok között? (előre, hátra)- én eseménynaptárnak szeretném, és bizonyos napok más színnel lesznek és az egérrel klikkelhetően előjön egy új ablakban az a nap és az azon a napon lévő összes esemény...ha van ötlet, örülnék neki. Lásp pld. elte.hu
Kösz
Paloz
Van hozzáfűznivalód? Írj nekem közvetlenül.
Kapcsolat