Click to See Complete Forum and Search --> : javascript calendar -- how to include time?
munna
07-28-2003, 04:50 AM
Hi,
I've got this javascript calendar (please see the included text file. What I want to do is have a current time clock placed just under the calendar, inside the outermost table. But I'm a complete newbie to javascript and can't figure out how to do this. Please can some help?
Khalid Ali
07-28-2003, 08:13 AM
Hello Munna,
here is the complete working code....you want to put the date and time at a diferent location on the page
For that just make sure that you use css and add properties to the div id="date_time" element
<script type="text/javascript">
Date.prototype.GetLongTime = function(){
function formatDate(val){
return (val<10)?"0"+val:val;
}
function amPm(val){
AMPM = (val<12)?"AM":"PM";
return (val<13)?val:formatDate(val-12);
}
return amPm(this.getHours())+":"+
formatDate(this.getMinutes())+":"+
formatDate(this.getSeconds())+" / "+AMPM;
}
<!-- Telling the date
var now = new Date();
var month_array = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
document.write("<form name=date_list><table bgcolor=#99cccc border=2><tr><td>");
document.write("<select name=month onchange=change_month(this.options.selectedIndex)>");
for(i=0;i<month_array.length;i++)
{
if (now.getMonth() != i)
{document.write ("<option value="+i+">"+month_array[i]);}
else
{document.write ("<option value="+i+" selected>"+month_array[i]);}
}
document.write("</select>");
document.write("</td><td>");
document.write ("<select name=year onchange=change_year(this.options[this.options.selectedIndex])>");
for(i=1950;i<3000;i++)
{
if (now.getYear() != i)
{document.write("<option value="+i+">"+i);}
else
{document.write("<option value="+i+" selected>"+i);}
}
document.write("</select></td></tr><tr><td colspan=2>");
document.write("<table bgcolor=white border=1 cellspacing = 0 cellpadding = 0 width=100%><tr bgcolor=gray align=center>");
document.write("<td><font color=white>M</font></td><td><font color=white>T</td><td><font color=white>W</td><td><font color=white>T</td><td><font color=white>F</td><td ><font color=white>S</td><td ><font color=white>S</td>");
document.write("</tr><tr>");
for(j=0;j<6;j++)
{
for(i=0;i<7;i++)
{
document.write("<td align=center id=d"+i+"r"+j+"></td>")
}
document.write("</tr>");
}
document.write("<tr><td colspan=\"4\"><pre id=\"date_time\"></pre></td></tr>");
document.write("</table>");
document.write("</form></td></tr></table>");
var show_date = new Date();
function set_cal(show_date)
{
begin_day = new Date (show_date.getYear(),show_date.getMonth(),1);//get the first day of month
begin_day_date = begin_day.getDay(); //get the first days date
end_day = new Date (show_date.getYear(),show_date.getMonth()+1,1);//get the last day of current month.
count_day = (end_day - begin_day)/1000/60/60/24;//get total number of days
input_table(begin_day_date,count_day);//build months table
}
set_cal(show_date);
function input_table(begin,count)
{
init();
j=0;
if (begin!=0){i=begin-1;}else{i=6}
for (c=1;c<count+1;c++)
{
colum_name = eval("d"+i+"r"+j);
if ((now.getDate() == c)&&(show_date.getMonth() == now.getMonth())&&(show_date.getYear() == now.getYear())) {colum_name.style.backgroundColor = "red";colum_name.style.color = "white";};
colum_name.innerText = c;
i++;
if (i==7){i=0;j++;}
}
}
function init()
{
for(j=0;j<6;j++)
{
for(i=0;i<7;i++)
{
colum_name = eval("d"+i+"r"+j);
colum_name.innerText = " ";
colum_name.style.backgroundColor ="";
colum_name.style.color ="";
}
}
}
function change_month(sel_month)
{
show_date = new Date(show_date.getYear(),sel_month,1);
set_cal(show_date);
}
function change_year(sel_year)
{
sel_year = sel_year.value;
show_date = new Date(sel_year,show_date.getMonth(),1);
set_cal(show_date);
}
function PrintDateTime(){
var obj = document.getElementById("date_time");
var date = new Date();
obj.innerHTML = date.GetLongTime();
setTimeout("PrintDateTime()",1000);
}
// End -->
</script>
</head>
<body onload="PrintDateTime();">
munna
07-28-2003, 08:29 AM
Dear Khalid,
Thank you for your help. However, the code still doesn't quite do what I wanted -- it shows the date and current time on a separate line under the calendar, whereas I want the just the time to appear inside the box containing the calendar, just under all the dates. (If you have a look at the calendar produced on your browser, then the time should appear in the bit of the green box just after the row of empty white cells.) Please can you tell me how to do that?
Khalid Ali
07-28-2003, 08:43 AM
I have edited the code above ,use that ..it has date printed in the table at the bottom left.
munna
07-28-2003, 08:57 AM
Cheers Khalid -- that's just what I needed! If I may ask just one more question. I want to make the font size for the calendar dates much smaller. How should I do it? Should I make the javascript produce a "font size" tag, or is it better to do it through html?
thanks again -- you're a star!
Munna
Khalid Ali
07-28-2003, 09:06 AM
locate this part of the code in the javascript section
for(i=0;i<7;i++)
{
document.write("<td align=center id=d"+i+"r"+j+"></td>")
}
and replace it with this code
for(i=0;i<7;i++)
{
document.write("<td style=\"font-size:6px;\" align=center id=d"+i+"r"+j+"></td>")
}
in the code above change the font-size:6px to any other size you want the fonts to be in the table cells.
munna
07-29-2003, 10:31 AM
Khalid,
Its absolutely perfect now! thank you so much
Munna
Khalid Ali
07-29-2003, 10:34 AM
:D
My Pleasure
:D