Kellékek

Válaszd ki a megjeleníteni kívánt kelléket!

Demo: PopUp ablakban nyíló táblás naptár 1.

Egyszerű táblás naptár . Klikkelj a feliratra és megjelenik a naptár.

Kód: Head része

today = new getToday();	
var element_id;

function getDays(month, year) 
{
	// Test for leap year when February is selected.
	if (1 == month)
		return ((0 == year % 4) && (0 != (year % 100))) ||
			(0 == year % 400) ? 29 : 28;
	else
		return daysInMonth[month];
}

function getToday()
{
	// Generate today's date.
	this.now = new Date();
	this.year = this.now.getFullYear() ; // Returned year XXXX
	this.month = this.now.getMonth();
	this.day = this.now.getDate();
}

function newCalendar() 
{
	var parseYear = parseInt(document.all.year  [document.all.year.selectedIndex].text);
 
	var newCal = new Date(parseYear , document.all.month.selectedIndex, 1);
	var day = -1;
	var startDay = newCal.getDay();
	var daily = 0;

today = new getToday(); // 1st call
	if ((today.year == newCal.getFullYear() ) &&   (today.month == newCal.getMonth()))
	   day = today.day;
	// Cache the calendar table's tBody section, dayList.
	var tableCal = document.all.calendar.tBodies.dayList;

var intDaysInMonth =
	   getDays(newCal.getMonth(), newCal.getFullYear() );

for (var intWeek = 0; intWeek < tableCal.rows.length;  intWeek++)
		   for (var intDay = 0;
			 intDay < tableCal.rows[intWeek].cells.length;
			 intDay++)
	 {
		  var cell = tableCal.rows[intWeek].cells[intDay];

// Start counting days.
		  if ((intDay == startDay) && (0 == daily))
			 daily = 1;

// Highlight the current day.
		  cell.style.color = (day == daily) ? "red" : "";
		  if(day == daily)
		  {
				document.all.todayday.innerText= "Ma: " +  day + "/" + 
					(newCal.getMonth()+1) + "/" + newCal.getFullYear() ;
		  }
		  // Output the day number into the cell.
		  if ((daily > 0) && (daily <= intDaysInMonth))
			 cell.innerText = daily++;
		  else
			 cell.innerText = "";
	   }

}
	  
	 function getTodayDay()
	 {
			    document.all[element_id].value = today.day + "/" + (today.month+1) + 
					"/" + today.year; 
		        //document.all.calendar.style.visibility="hidden";
				document.all.calendar.style.display="none";
				document.all.year.selectedIndex =100;   
	            document.all.month.selectedIndex = today.month; 
	 }
 
        function getDate() 
		 {
            // This code executes when the user clicks on a day
            // in the calendar.
            if ("TD" == event.srcElement.tagName)
               // Test whether day is valid.
               if ("" != event.srcElement.innerText)
			   { 
				 var mn = document.all.month.selectedIndex+1;
    			 var Year = document.all.year [document.all.year.selectedIndex].text;
				 document.all[element_id].value=event.srcElement.innerText+"/"+mn +"/"  +Year;
		         //document.all.calendar.style.visibility="hidden";
				 document.all.calendar.style.display="none";
			 }
		 }
 
function GetBodyOffsetX(el_name, shift)
{
	var x;
	var y;
	x = 0;
	y = 0;

var elem = document.all[el_name];
	do 
	{
		x += elem.offsetLeft;
		y += elem.offsetTop;
		if (elem.tagName == "BODY")
			break;
		elem = elem.offsetParent; 
	} while  (1 > 0);

shift[0] = x;
	shift[1] = y;
	return  x;
}

function SetCalendarOnElement(el_name)
{
	if (el_name=="") 
	el_name = element_id;
	var shift = new Array(2);
	GetBodyOffsetX(el_name, shift);
	document.all.calendar.style.pixelLeft  = shift[0]; //  - document.all.calendar.offsetLeft;
	document.all.calendar.style.pixelTop = shift[1] + 25 ;
}
	  
 	  
	           
function ShowCalendar(elem_name)
{
		if (elem_name=="")
		elem_name = element_id;

element_id	= elem_name; // element_id is global variable
		newCalendar();
		SetCalendarOnElement(element_id);
		//document.all.calendar.style.visibility = "visible";
		document.all.calendar.style.display="inline";
}

function HideCalendar()
{
	//document.all.calendar.style.visibility="hidden";
	document.all.calendar.style.display="none";
}

function toggleCalendar(elem_name)
{
	//if (document.all.calendar.style.visibility == "hidden")
	if(document.all.calendar.style.display=="none")
		ShowCalendar(elem_name);
	else 
		HideCalendar();
}
-->
</script>

Head részbe másold .

Kód: Body része

<CENTER> <FORM name=myForm>
<INPUT id=MyDate name=MyDate size=15> 
<a href="JavaScript:;" onClick="toggleCalendar('MyDate')">Calendar</a>
</form>

<TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=calendar style="DISPLAY: none; POSITION: absolute; Z-INDEX: 4">
  <TBODY>
  <TR>
    <TD colSpan=7 vAlign=center>
	
	<SELECT id=month onchange=newCalendar()> 
    	<SCRIPT language=JavaScript>
		// Output months into the document.
		// Select current month.
		for (var intLoop = 0; intLoop < months.length; intLoop++)
			document.write("<OPTION " +	(today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]);
		</SCRIPT>
	</SELECT> 
	
	<SELECT id=year onchange=newCalendar()> 
        <SCRIPT language=JavaScript>
		// Output years into the document.
		// Select current year.
		for (var intLoop = 1900; intLoop < 2028; intLoop++)
			document.write("<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop);
		</SCRIPT>
	</SELECT>

</TD>
  </TR>

<TR class=days>
	
    <SCRIPT language=JavaScript>
	// Output days.
	for (var intLoop = 0; intLoop < days.length; intLoop++)
		document.write("<TD>" + days[intLoop] + "</TD>");
	</SCRIPT>
  </TR>

<TBODY class=dates id=dayList onclick="getDate('')" vAlign=center>
  
  <SCRIPT language=JavaScript>
	for (var intWeeks = 0; intWeeks < 6; intWeeks++)
	{
		document.write("<TR>");
		for (var intDays = 0; intDays < days.length; intDays++)
			document.write("<TD></TD>");
		document.write("</TR>");
	}
  </SCRIPT>

</TBODY>
  <TBODY>
  <TR>
    <TD class=today colSpan=5 id=todayday onclick=getTodayDay()></TD>
    <TD align=right colSpan=2><A href="javascript:HideCalendar();"><SPAN style="COLOR: black; FONT-SIZE: 10px"><B>Zárj</B></SPAN></A></TD>
  </TR>
  </TBODY>
</TABLE>
 
 </CENTER>

Body részbe másold ahol szeretnéd, hogy megjelenjen az ablak és a felirat.