Folyamatosan frissülő naptár készítése

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</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>&nbsp;</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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!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.

1
2

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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:

1
2
3
4
5

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/*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:

1
2
3
4
5
6
7
8
9
10
11
12
13

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:

1
2
3
4
5
6
7
8
9
10
11
12
13

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</td>'); }
 
				}
 
document.write('</tr>');
 
 
 
 
document.write('</table>');

És ezzel készen is volnánk.
Sok sikert.

Kapcsolódó fájlok

dinamicnaptar.html
mainnaptar2.js
staticnaptar.html
dinamikusnaptar.zip (fenti 3 fájl csomagolva)

Tutorial.hu Szerkesztőség
Tutorial.hu Szerkesztőség

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

11 HOZZÁSZÓLÁS

  2. 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 :(

  5. 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

  7. 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;

  8. 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 7×6 -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.

  9. 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. :)

  10. 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!

  11. 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

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét