Scribd
Upload
45 views11 pages

Copy The Following Code Into Your Tags

The document provides code to create a JavaScript calendar widget that can be embedded in an HTML page. It includes code to generate the calendar grid with dates, handle date selection, and display the selected date in a text field. Styling is also included to format the calendar display.

Uploaded by

Rakkeshfulwaria
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
45 views11 pages

Copy The Following Code Into Your Tags

The document provides code to create a JavaScript calendar widget that can be embedded in an HTML page. It includes code to generate the calendar grid with dates, handle date selection, and display the selected date in a text field. Styling is also included to format the calendar display.

Uploaded by

Rakkeshfulwaria
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

Copy the following code into your <HEAD></HEAD> tags.

<script language="JavaScript">

<!--

var months = new Array("January", "February", "March", "April", "May", "June", "July", "August",
"September", "October", "November", "December");

var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

var days = new Array("S", "M", "T", "W", "T", "F", "S");

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= "Today: " + 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>

<style>

.today {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold}

.days {COLOR: navy; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; TEXT-ALIGN:
center}

.dates {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt}

</style>
Copy the following code between the <BODY></BODY> tags of your
html page.

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

<!-- Month combo box -->


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

<!-- Year combo box -->

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

<!-- Generate column for each day. -->

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

<!-- Generate grid for individual days. -->

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

<!-- Generate today day. --></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>Hide</B></SPAN></A></TD>

</TR>

</TBODY>

</TABLE>

You might also like