Naptár kattintható napokkal

Naptár kattintható napokkal
2012-02-09T06:00:31+01:00
2012-02-10T19:30:01+01:00
2022-11-24T15:55:40+01:00
Petiteto.
Sziasztok!

Találtam az interneten egy egyszerű kis naptáracskát, ami pont az egyszerűsége miatt tetszett. Viszont egy dolog megakasztotta a tudásom. A naptár jelenleg csak annyit tud, hogy lehet lapozni a hónapok közt, és kiírja a hónap napjait. Viszont én azt szeretném elérni, hogy a napokra rá is lehessen kattintani, ugyanis eseménynaptár lenne belőle. Tudna valaki segíteni?

Íme ő a páciens:
<div class="minime_cal"> <div class="minime_cal_head" id="minime_cal_head"></div> <div class="minime_cal_week">h</div> <div class="minime_cal_week">k</div> <div class="minime_cal_week">sz</div> <div class="minime_cal_week">cs</div> <div class="minime_cal_week">p</div> <div class="minime_cal_week">sz</div> <div class="minime_cal_week">v</div> <div id="minime_cal"></div> <div class="clr"></div> </div> <script type="text/javascript"> function minime_calendar(ev, ho, nap) { // Fejléc beállítása var minical = new Date(ev, ho-1, nap); var minimonth = new Array('Január', 'Február', 'Március', 'Április', 'Május', 'Június', 'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December'); // Előző és következő hónap linkje var prevMonth = '<a href="#" class="minime_cal_head_a" onclick="minime_calendar('+minical.getFullYear()+', '+(minical.getMonth())+', '+nap+')"><small>&laquo;</small></a>'; var nextMonth = '<a href="#" class="minime_cal_head_a" onclick="minime_calendar('+minical.getFullYear()+', '+(minical.getMonth()+2)+', '+nap+')"><small>&raquo;</small></a>'; document.getElementById('minime_cal_head').innerHTML = prevMonth+' '+minical.getFullYear()+'. '+minimonth[minical.getMonth()]+' '+nextMonth; document.getElementById('minime_cal').innerHTML = ''; // Napok eltolása var getFirstDay = new Date(ev, ho-1, 1); var modFirstDay = new Array(7,1,2,3,4,5,6) var miniblank = getFirstDay.getDay(); for(var i=1;i<modFirstDay[miniblank];i++) { var miniElement = document.createElement('div'); miniElement.className = 'minime_cal_blank'; document.getElementById('minime_cal').appendChild(miniElement); } // Utolsó nap meghatározása var lastDay = new Date(ev, ho, 0); // Napok kiiratása for(var i=1;i<=lastDay.getDate();i++) { var miniElement = document.createElement('div'); miniElement.className = 'minime_cal_days'; var miniElementText = document.createTextNode(i); miniElement.appendChild(miniElementText); document.getElementById('minime_cal').appendChild(miniElement); } } minime_calendar(<?php echo date('Y'); ?>,<?php echo (int)date('m'); ?>,<?php echo (int)date('d'); ?>); </script>

A segítségetek előre is nagyon köszönöm!
Mutasd a teljes hozzászólást!
Na tessék...
De most már ide az 50 pontomat (fogadd el megoldásnak), ha ennyit szenvedtem vele...

<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="SD Network" /> <title>Minime Calendar</title> <style type="text/css"> .minime_cal { width: 154px; font-family: Arial; font-size: 12px; } .minime_cal_head { width: 148px; height: 16px; padding: 2px; color: #004040; text-align: center; font-weight: bold; border: 1px solid #097732; } .minime_cal_week { margin: 1px; text-align: center; width: 16px; height: 16px; padding: 2px; background-color: #097732; float: left; color: #fff; } .minime_cal_blank { margin: 1px; text-align: center; width: 20px; height: 20px; float: left; } .minime_cal_days { margin: 1px; text-align: center; width: 16px; height: 16px; padding: 2px; background-color: #0080C0; float: left; color: #fff; } a.naptarinap { color: #fff; text-decoration: none; } </style> </head> <body> <div class="minime_cal"> <div class="minime_cal_head" id="minime_cal_head"></div> <div class="minime_cal_week">h</div> <div class="minime_cal_week">k</div> <div class="minime_cal_week">sz</div> <div class="minime_cal_week">cs</div> <div class="minime_cal_week">p</div> <div class="minime_cal_week">sz</div> <div class="minime_cal_week">v</div> <div id="minime_cal"></div> </div> <script type="text/javascript"> function minime_calendar(ev, ho, nap, url) { // Fejléc beállítása var minical = new Date(ev, ho-1, nap); var minimonth = new Array('Január', 'Február', 'Március', 'Április', 'Május', 'Június', 'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December'); // Előző és következő hónap linkje var prevMonth = '<a href="#" onclick="minime_calendar('+minical.getFullYear()+', '+(minical.getMonth())+', '+nap+', ''+url+'')"><small>&laquo;</small></a>'; var nextMonth = '<a href="#" onclick="minime_calendar('+minical.getFullYear()+', '+(minical.getMonth()+2)+', '+nap+', ''+url+'')"><small>&raquo;</small></a>'; document.getElementById('minime_cal_head').innerHTML = prevMonth+' '+minical.getFullYear()+'. '+minimonth[minical.getMonth()]+' '+nextMonth; document.getElementById('minime_cal').innerHTML = ''; // Napok eltolása var getFirstDay = new Date(ev, ho-1, 1); var modFirstDay = new Array(7,1,2,3,4,5,6) var miniblank = getFirstDay.getDay(); for(var i=1;i<modFirstDay[miniblank];i++) { var miniElement = document.createElement('div'); miniElement.className = 'minime_cal_blank'; document.getElementById('minime_cal').appendChild(miniElement); } // Utolsó nap meghatározása var lastDay = new Date(ev, ho, 0); // Napok kiiratása for(var i=1;i<=lastDay.getDate();i++) { var miniElement = document.createElement('div'); miniElement.className = 'minime_cal_days'; miniElement.id = 'minime_cal_days_div_'+i; document.getElementById('minime_cal').appendChild(miniElement); if(i < 10) ii = "0" + i; else ii = i; if((minical.getMonth()+1) < 10) c_ho = "0" + (minical.getMonth()+1); else c_ho = minical.getMonth(); var newlinkText = document.createTextNode(i); newlink = document.createElement('a'); newlink.setAttribute('class', 'naptarinap'); newlink.setAttribute('href', url + minical.getFullYear() + '-' + c_ho + '-' + ii); newlink.appendChild(newlinkText); document.getElementById('minime_cal_days_div_'+i).appendChild(newlink); } } minime_calendar(<?php echo date('Y'); ?>, <?php echo (int)date('m'); ?>, <?php echo (int)date('d'); ?>, 'http://oldal.hu/programok/'); </script> </body> </html>

Itt a végén tudod paraméterben átadni neki, hogy milyen webcím legyen a napok linkjeiben, ott meg hozzátoldja az aktuális dátumot ÉÉ-HH-NN formában...

Üdv: tökfilkó!
Mutasd a teljes hozzászólást!
Csatolt állomány

  • Honnan töltötted le? Megnézted a letöltés helyén, hogy mire képes? Nem korlátozott változat? stb
    Mutasd a teljes hozzászólást!
  • Innen töltöttem le:
    sdnetwork.hu/press/programok/javascript/egyszeru-javascript-naptar-tovabbfejlesztese-lapozas/

    Tutorialként van az oldalon, tehát nincs korlátozott verzió :)
    Mutasd a teljes hozzászólást!
  • Hello!

    Másold be ezt egy üres HTML fájlba, és próbáld ki. Kattints a naptár napjaira...

    A kérdés az volt:
    ...Viszont én azt szeretném elérni, hogy a napokra rá is lehessen kattintani...


    Remélem, ezzel segítettem...

    <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="SD Network" /> <title>Minime Calendar</title> <style type="text/css"> .minime_cal { width: 154px; font-family: Arial; font-size: 12px; } .minime_cal_head { width: 148px; height: 16px; padding: 2px; color: #004040; text-align: center; font-weight: bold; border: 1px solid #097732; } .minime_cal_week { margin: 1px; text-align: center; width: 16px; height: 16px; padding: 2px; background-color: #097732; float: left; color: #fff; } .minime_cal_blank { margin: 1px; text-align: center; width: 20px; height: 20px; float: left; } .minime_cal_days { margin: 1px; text-align: center; width: 16px; height: 16px; padding: 2px; background-color: #0080C0; float: left; color: #fff; } </style> </head> <body> <div class="minime_cal"> <div class="minime_cal_head" id="minime_cal_head"></div> <div class="minime_cal_week">h</div> <div class="minime_cal_week">k</div> <div class="minime_cal_week">sz</div> <div class="minime_cal_week">cs</div> <div class="minime_cal_week">p</div> <div class="minime_cal_week">sz</div> <div class="minime_cal_week">v</div> <div id="minime_cal"></div> </div> <script type="text/javascript"> function minime_calendar(ev, ho, nap) { // Fejléc beállítása var minical = new Date(ev, ho-1, nap); var minimonth = new Array('Január', 'Február', 'Március', 'Április', 'Május', 'Június', 'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December'); // Előző és következő hónap linkje var prevMonth = '<a href="#" onclick="minime_calendar('+minical.getFullYear()+', '+(minical.getMonth())+', '+nap+')"><small>&laquo;</small></a>'; var nextMonth = '<a href="#" onclick="minime_calendar('+minical.getFullYear()+', '+(minical.getMonth()+2)+', '+nap+')"><small>&raquo;</small></a>'; document.getElementById('minime_cal_head').innerHTML = prevMonth+' '+minical.getFullYear()+'. '+minimonth[minical.getMonth()]+' '+nextMonth; document.getElementById('minime_cal').innerHTML = ''; // Napok eltolása var getFirstDay = new Date(ev, ho-1, 1); var modFirstDay = new Array(7,1,2,3,4,5,6) var miniblank = getFirstDay.getDay(); for(var i=1;i<modFirstDay[miniblank];i++) { var miniElement = document.createElement('div'); miniElement.className = 'minime_cal_blank'; document.getElementById('minime_cal').appendChild(miniElement); } // Utolsó nap meghatározása var lastDay = new Date(ev, ho, 0); // Napok kiiratása for(var i=1;i<=lastDay.getDate();i++) { var miniElement = document.createElement('div'); miniElement.className = 'minime_cal_days'; miniElement.style.cursor = "pointer"; miniElement.onclick = function(){alert(ev + ", " + minimonth[ho-1] + ' ' + this.innerHTML);} var miniElementText = document.createTextNode(i); miniElement.appendChild(miniElementText); document.getElementById('minime_cal').appendChild(miniElement); } } minime_calendar(<?php echo date('Y'); ?>,<?php echo (int)date('m'); ?>,<?php echo (int)date('d'); ?>); </script> </body> </html>

    Ez itt a lényeg (ebben a kódban 95.sor):

    miniElement.onclick = function(){alert(ev + ", " + minimonth[ho] + ' ' + this.innerHTML);}

    Az ...=function(){ ... ide jöhet az a funkció, amit a klikkeléskor akarsz ... }
    Mutasd a teljes hozzászólást!
  • Köszönöm a segítséget :)
    Viszont így utólag nem voltam teljesen pontos a problémával kapcsolatban, ezért elnézést kérek :$
    A rákattinthatóságot úgy értettem, hogy a számok azok csak sima hivatkozások legyenek, amik például ide mutatnak: http://oldal.hu/programok/2012-02-09

    Ez így megoldható lenne valahogy? Tényleg elnézésetek kérem, hogy nem voltam egyértelmű és nagyon köszönöm, hogy segítetek!
    Mutasd a teljes hozzászólást!
  • Na tessék...
    De most már ide az 50 pontomat (fogadd el megoldásnak), ha ennyit szenvedtem vele...

    <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="SD Network" /> <title>Minime Calendar</title> <style type="text/css"> .minime_cal { width: 154px; font-family: Arial; font-size: 12px; } .minime_cal_head { width: 148px; height: 16px; padding: 2px; color: #004040; text-align: center; font-weight: bold; border: 1px solid #097732; } .minime_cal_week { margin: 1px; text-align: center; width: 16px; height: 16px; padding: 2px; background-color: #097732; float: left; color: #fff; } .minime_cal_blank { margin: 1px; text-align: center; width: 20px; height: 20px; float: left; } .minime_cal_days { margin: 1px; text-align: center; width: 16px; height: 16px; padding: 2px; background-color: #0080C0; float: left; color: #fff; } a.naptarinap { color: #fff; text-decoration: none; } </style> </head> <body> <div class="minime_cal"> <div class="minime_cal_head" id="minime_cal_head"></div> <div class="minime_cal_week">h</div> <div class="minime_cal_week">k</div> <div class="minime_cal_week">sz</div> <div class="minime_cal_week">cs</div> <div class="minime_cal_week">p</div> <div class="minime_cal_week">sz</div> <div class="minime_cal_week">v</div> <div id="minime_cal"></div> </div> <script type="text/javascript"> function minime_calendar(ev, ho, nap, url) { // Fejléc beállítása var minical = new Date(ev, ho-1, nap); var minimonth = new Array('Január', 'Február', 'Március', 'Április', 'Május', 'Június', 'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December'); // Előző és következő hónap linkje var prevMonth = '<a href="#" onclick="minime_calendar('+minical.getFullYear()+', '+(minical.getMonth())+', '+nap+', ''+url+'')"><small>&laquo;</small></a>'; var nextMonth = '<a href="#" onclick="minime_calendar('+minical.getFullYear()+', '+(minical.getMonth()+2)+', '+nap+', ''+url+'')"><small>&raquo;</small></a>'; document.getElementById('minime_cal_head').innerHTML = prevMonth+' '+minical.getFullYear()+'. '+minimonth[minical.getMonth()]+' '+nextMonth; document.getElementById('minime_cal').innerHTML = ''; // Napok eltolása var getFirstDay = new Date(ev, ho-1, 1); var modFirstDay = new Array(7,1,2,3,4,5,6) var miniblank = getFirstDay.getDay(); for(var i=1;i<modFirstDay[miniblank];i++) { var miniElement = document.createElement('div'); miniElement.className = 'minime_cal_blank'; document.getElementById('minime_cal').appendChild(miniElement); } // Utolsó nap meghatározása var lastDay = new Date(ev, ho, 0); // Napok kiiratása for(var i=1;i<=lastDay.getDate();i++) { var miniElement = document.createElement('div'); miniElement.className = 'minime_cal_days'; miniElement.id = 'minime_cal_days_div_'+i; document.getElementById('minime_cal').appendChild(miniElement); if(i < 10) ii = "0" + i; else ii = i; if((minical.getMonth()+1) < 10) c_ho = "0" + (minical.getMonth()+1); else c_ho = minical.getMonth(); var newlinkText = document.createTextNode(i); newlink = document.createElement('a'); newlink.setAttribute('class', 'naptarinap'); newlink.setAttribute('href', url + minical.getFullYear() + '-' + c_ho + '-' + ii); newlink.appendChild(newlinkText); document.getElementById('minime_cal_days_div_'+i).appendChild(newlink); } } minime_calendar(<?php echo date('Y'); ?>, <?php echo (int)date('m'); ?>, <?php echo (int)date('d'); ?>, 'http://oldal.hu/programok/'); </script> </body> </html>

    Itt a végén tudod paraméterben átadni neki, hogy milyen webcím legyen a napok linkjeiben, ott meg hozzátoldja az aktuális dátumot ÉÉ-HH-NN formában...

    Üdv: tökfilkó!
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Csatoltam mellé a naptár fájt, mert a kód 76-77. sorának a vége felé a rendszer kiszedte nekem visszaperjeleket (ALT+Q) mikor elküldtem, és ha így másolod ki, akkor tuti nem fog működni...
    Mutasd a teljes hozzászólást!
  • Köszönöm szépen!
    Nagyon sokat segítettél most ezzel nekem!

    Nem tudom eléggé meghálálni!
    Mutasd a teljes hozzászólást!
  • Használd egészséggel...
    Mutasd a teljes hozzászólást!
  • Egy "aprósággal" egészítsd ki, hogy ha beilleszted egy oldaladba ne legyen gond:
    <div class="minime_cal_week">sz</div> <div class="minime_cal_week">v</div> <div id="minime_cal"></div> <!-- a következő sor az apróság --> <br style="clear:both;" /> </div>
    Másik "apróság" ez, hogy jó legyen 10-12 hóban is:
    if((minical.getMonth()+1) < 10) c_ho = "0" + (minical.getMonth()+1); else //c_ho = minical.getMonth(); c_ho = minical.getMonth()+1;
    Mutasd a teljes hozzászólást!
  • Valóban... sorry, ott úgy néz ki - véletlenül - lefelejtettem a +1-et
    Mutasd a teljes hozzászólást!
  • Nem hibaként róttam fel, csak jeleztem egy-két apróságot.
    És ráérő időmben egy kicsit még validáltam, szépítgettem -> EZ lett belőle...
    Mutasd a teljes hozzászólást!
  • Szép lett... Tényleg... de engem ennyire nem érdekelt ez a kis naptár.
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd