Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript] Kalendarz
Forum PHP.pl > Forum > Przedszkole
Korab
10.09.2011, 12:52:45
Napisałem sobie kalendarz o następującym kodzie:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4. 	<meta charset="utf-8" />
  5. 	<title>Kalendarz</title>
  6. 	<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
  7. 	<link rel="stylesheet" type="text/css" href="print.css" media="print" />
  8. 	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  9. 	<script type="text/javascript">
  10. 		<!--Tutaj jest kod kalendarza -->
  11. 	</script>
  12.  
  13. </head>
  14. <body>
  15.  
  16.  
  17. 	<div id="kalendarz">
  18. 		<script type="text/javascript">
  19. 			document.write(kalend(5,9,2011));
  20. 		</script>
  21.  
  22.  
  23. 	</div>
  24.  
  25. </body></html>
[HTML] pobierz, plaintext


Kod kalendarza wstawiany na miejsce komentarza wygląda tak:
[JAVASCRIPT] pobierz, plaintext 
  1. function kalend(dzien,mies,rok) {
  2. 			var data = new Date(rok,mies,dzien);
  3. 			var kod = "";
  4. 			rok = data.getFullYear()+""; //Konwersja zmiennej typu NUMBER do typu STRING
  5.  
  6. 			var miesiace = new Array();
  7. 			miesiace[0]=31; //Luty musimy niestety przetestować pod kątem przestępności roku.
  8. 			if (rok.substr(0,2)=='00') {
  9. 				parseInt(rok)%400==0 ? miesiace[1]=29 : miesiace[1]=28;
  10. 			}
  11. 			else {
  12. 				parseInt(rok)%4==0 ? miesiace[1]=29 : miesiace[1]=28;
  13. 			}
  14. 			miesiace[2]=31;
  15. 			miesiace[3]=30;
  16. 			miesiace[4]=31;
  17. 			miesiace[5]=30;
  18. 			miesiace[6]=31;
  19. 			miesiace[7]=31;
  20. 			miesiace[8]=30;
  21. 			miesiace[9]=31;
  22. 			miesiace[10]=30;
  23. 			miesiace[11]=31;
  24.  
  25. 			var nazwy_m = new Array();
  26. 			nazwy_m[0]="Styczeń";
  27. 			nazwy_m[1]="Luty";
  28. 			nazwy_m[2]="Marzec";
  29. 			nazwy_m[3]="Kwiecień";
  30. 			nazwy_m[4]="Maj";
  31. 			nazwy_m[5]="Czerwiec";
  32. 			nazwy_m[6]="Lipiec";
  33. 			nazwy_m[7]="Sierpień";
  34. 			nazwy_m[8]="Wrzesień";
  35. 			nazwy_m[9]="Październik";
  36. 			nazwy_m[10]="Listopad";
  37. 			nazwy_m[11]="Grudzień";
  38.  
  39. 			kod += nazwy_m[mies]+" "+rok;
  40. 			kod += "<table border=\"1\"><th>Pn</th><th>Wt</th><th>Śr</th><th>Czw</th><th>Pt</th><th>So</th><th>Ndz</th></tr>";
  41.  
  42. 			//Szukamy, którym dniem tygodnia był pierwszy dzień miesiąca.
  43. 			data.setDate(1);
  44. 			var pierwszy = data.getDay();
  45. 			var pula = miesiace[data.getMonth()];
  46.  
  47. 			//Pierwszy wers, w którym mogą wystąpić wolne (!!!) pola.
  48. 			kod += "<tr>";
  49. 			for (var i=1;i<=7;i++) {
  50. 				if (i<pierwszy) kod += "<td>&nbsp;</td>";
  51. 				else {
  52. 					kod += "<td id='"+(i-pierwszy+1)+"_"+(mies+1)+"_"+rok+"'>"+(i-pierwszy+1)+"</td>";
  53. 					pula -= 1;
  54. 				}
  55. 			}
  56.  
  57. 			for (var j=(miesiace[data.getMonth()]-pula+1),ost_niedz=j-1;j<=miesiace[data.getMonth()];j++) {
  58. 				if ((j-ost_niedz)%7==0) kod += "<td id='"+j+"_"+(mies+1)+"_"+rok+"'>"+j+"</td></tr>";
  59. 				else if ((j-ost_niedz)%7==1) kod += "<tr><td id='"+j+"_"+(mies+1)+"_"+rok+"'>"+j+"</td>";
  60. 				else kod += "<td id='"+j+"_"+(mies+1)+"_"+rok+"'>"+j+"</td>";
  61. 			}
  62. 			kod += "</tr></table>";
  63. 			kod += "&nbsp;&nbsp;<a href=\"#\" onClick=\"document.getElementById('kalendarz').innerHTML=kalend(1,"+(data.getMonth()-1)+","+rok+");oznacz();\">Poprzedni</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
  64. 			kod += "<a href=\"#\" onClick=\"document.getElementById('kalendarz').innerHTML=kalend(1,"+(data.getMonth()+1)+","+rok+");oznacz();\">Następny</a>";
  65. 			return kod;
  66. 		}
[JAVASCRIPT] pobierz, plaintext


Wszystko fajnie... Z dwoma wyjątkami:
1. Przy klikaniu przycisku "Poprzedni" kiedy wyświetla się grudzień, zamiast "Grudzień 2011" pojawia się "undefined 2011", przy klikaniu przycisku "Następny" taka sytuacja zachodzi przy styczniu (pozostałe miesiące pracują poprawnie).
2. Poważniejszy problem to taki, że kiedy pierwszy dzień miesiąca wypada w niedzielę, to kalendarz wyświetlany jest bez pierwszego wersu - pierwszy wyświetlany wers zaczyna się od drugiego dnia. Można to zobaczyć tutaj: http://imageshack.us/photo/my-images/59/ka...ierwszegod.jpg/

Czy ktoś wie, gdzie jest pies pogrzebany?
CuteOne
10.09.2011, 13:23:08
1.
Kod
if(miesiac - 1 < 1) miesiac = 12; rok -= 1;
if(miesiac + 1 > 12) miesiac = 1; rok += 1;


2. Źle do tego podszedłeś.. chcesz wyświetlić miesiąc luty(kalend(12,2,2011)) więc pobierasz dane dla tego miesiąca(i roku) (new Date() itp) i je wypluwasz
Korab
11.09.2011, 14:16:47
Rozwiązane. Dzięki za odpowiedź, CuteOne, ale zrobiłem to inaczej i działa.

Ad. 1)
[JAVASCRIPT] pobierz, plaintext 
  1. var nazwy_m = new Array();
  2.  
  3. nazwy_m[-1]="Grudzień";
  4. nazwy_m[0]="Styczeń";
  5. nazwy_m[1]="Luty";
  6. nazwy_m[2]="Marzec";
  7. nazwy_m[3]="Kwiecień";
  8. nazwy_m[4]="Maj";
  9. nazwy_m[5]="Czerwiec";
  10. nazwy_m[6]="Lipiec";
  11. nazwy_m[7]="Sierpień";
  12. nazwy_m[8]="Wrzesień";
  13. nazwy_m[9]="Październik";
  14. nazwy_m[10]="Listopad";
  15. nazwy_m[11]="Grudzień";
  16. nazwy_m[12]="Styczeń";
[JAVASCRIPT] pobierz, plaintext


Ad. 2)
[JAVASCRIPT] pobierz, plaintext 
  1. if (pierwszy==0) pierwszy=7;
[JAVASCRIPT] pobierz, plaintext


Do zamknięcia.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.