Disply weekly,daily calendar using javascript

swethak · November 25, 2008

hi,

i have a code to disply the calendar and add events to that. It works fine.But my requirement is to i have to disply a weekly and daily calendar.Any body plz suggest that what modifications i have to made in my code

[javascript]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>sayhi</title>

var thisDate = 1; // Tracks current date being written in calendar

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

var today = new Date(); // Date object to store the current date

var todaysDay = today.getDay() + 1; // Stores the current day number 1-7

var todaysDate = today.getDate(); // Stores the current numeric date within the month

var todaysMonth = today.getUTCMonth() + 1; // Stores the current month 1-12

var todaysYear = today.getFullYear(); // Stores the current year

var monthNum = todaysMonth; // Tracks the current month being displayed

var yearNum = todaysYear; // Tracks the current year being displayed

var firstDate = new Date(String(monthNum)+"/1/"+String(yearNum)); // Object Storing the first day of the current month

var firstDay = firstDate.getUTCDay(); // Tracks the day number 1-7 of the first day of the current month

var lastDate = new Date(String(monthNum+1)+"/0/"+String(yearNum)); // Tracks the last date of the current month

var numbDays = 0;

var calendarString = "";

var eastermonth = 0;

var easterday = 0;

var date =0;

var event8="";

var events1="hello";

events = new Array(

["Y", "11", "8", "2008", "1:00 AM", "12:59 PM", "beautiful day", "aweewwewweeweweww"],

["Y", "11", "22", "2008", "1:00 AM", "12:59 PM", "beautiful days", "wewewewewewqwewwew"],

["Y", "11", "8", "2008", "1:00 AM", "12:59 PM", "rrrrrrr", "rrrrrrr"],

["Y", "11", "22", "2006", "1:00 AM", "12:59 PM", "wwwwww", "wwwwww"],

["Y", "11", "8", "2006", "1:00 AM", "12:59 PM", "avvvvvvvvv", "avvvvvvvvv"],

["Y", "11", "22", "2005", "1:00 AM", "12:59 PM", "ssssssssss", "ssssssssss"],

["Y", "11", "8", "2005", "1:00 AM", "12:59 PM", "zzzzzzzzz", "zzzzzzzzz"],

["Y", "11", "22", "2009", "1:00 AM", "12:59 PM", "ddddddd", "ddddddd"],

["Y", "11", "8", "2009", "1:00 AM", "12:59 PM", "hhhhhhhh", "hhhhhhhh"],

["Y", "11", "22", "2010", "1:00 AM", "12:59 PM", "vvvvvvv", "vvvvvvv"],

["Y", "11", "8", "2010", "1:00 AM", "12:59 PM", "bbbbbbbb", "bbbbbbbb"],

["Y", "10", "1", "2011", "1:00 AM", "12:59 PM", "kkkkkkk", "kkkkkkk"],

["Y", "10", "2", "2011", "1:00 AM", "12:59 PM", "xxxxxxxxxx", "xxxxxxxxxx"],

["Y", "9", "9", "2007", "1:00 AM", "12:59 PM", "vvvvvvvvvv", "vvvvvvvvvv"],

["Y", "9", "8", "2007", "1:00 AM", "12:59 PM", "ccccccccccc", "ccccccccccc"],

["Y", "11", "2", "2006", "1:00 AM", "12:59 PM", "wbbbbbbbbbb", "wbbbbbbbbbb"],

["Y", "11", "3", "2006", "1:00 AM", "12:59 PM", "nnnnnnnnnnnnnn", "nnnnnnnnnnnnnn"],

["Y", "11", "22", "2005", "1:00 AM", "12:59 PM", "jjjjjjjjjj", "jjjjjjjjjj"],

["Y", "11", "8", "2005", "1:00 AM", "12:59 PM", "oooooo", "oooooo"],

["Y", "11", "22", "2004", "1:00 AM", "12:59 PM", "hhhhh", "hhhhh"],

["Y", "11", "8", "2004", "1:00 AM", "12:59 PM", "vbvbvn", "vbvbvn"],

["Y", "10", "22", "2008", "1:00 AM", "12:59 PM", "uuuuuu", "uuuuuu"],

["Y", "10", "8", "2008", "1:00 AM", "12:59 PM", "llkuiiu", "llkuiiu"],

["Y", "12", "22", "2008", "1:00 AM", "12:59 PM", "ghjhj", "ghjhj"],

["Y", "12", "8", "2008", "1:00 AM", "12:59 PM", "awee", "awee"],

["Y", "11", "23", "2008", "1:00 AM", "12:59 PM", "ewewqwewwew", "ewewqwewwew"],

["Y", "1", "1", "2006", "1:00 AM", "12:00 PM", "New Year's Day", "New Year's Day will be ushered in with great joy and celebration. Come as you are."],

["F", "1", "3", "2", "1:00 AM", "12:59 PM", "Martin Luther King Day", "Honors civil rights leader Rev Martin Luther King."],

["Y", "2", "2", "2008", "1:00 AM", "12:59 PM", "Groundhog Day", "If Philadelphia's groundhog 'Punxsutawney Phil' sees his shadow, there will be six more weeks of winter weather. If he does not see his shadow, there will be an early spring."],

["Y", "2", "14", "2005", "1:00 AM", "12:59 PM", "Valentine's Day", "Traditional celebration of love and romance, including the exchange of cards, candy, flowers, and other gifts."],

["F", "2", "3", "2", "1:00 AM", "12:59 PM", "President's Day", "Honors the birthdays of George Washington, Abraham Lincoln and other past American Presidents."],

["F", "3", "0", "0", "1:00 AM", "12:59 PM", "Easter", "Traditional celebration of the resurrection of Jesus Christ."],

["Y", "3", "17", "2005", "1:00 AM", "12:59 PM", "St. Patrick's Day", "A celebration of Irish heritage and culture, based on the Catholic feast of St. Patrick. Primary activity is simply the wearing of green clothing ('wearing of the green')."],

["Y", "3", "22", "2005", "1:00 AM", "12:59 PM", "World Water Day", "A day to promote appreciation of the world's most valuable commodity - water."],

["Y", "4", "1", "2005", "1:00 AM", "12:59 PM", "April Fool's Day", "A day to play tricks on or 'fool' family, friends, and coworkers, if so inclined. As Ecclesiastes says: 'There is a time for everything'; in this case, a time to be silly."],

["F", "5", "2", "1", "1:00 AM", "12:59 PM", "Mother's Day", "Honors mothers and motherhood (made a Federal Holiday by Presidential order)."],

["F", "5", "3", "7", "1:00 AM", "12:59 PM", "Armed Forces Day", "Celebrates the United States Army, Navy, Air Force and Marine Corps; formerly - each used to have separate days."],

["F", "5", "4", "2", "1:00 AM", "12:59 PM", "Memorial Day", "Honors the nation's war dead, and those we love who have passed away. Traditionally a time to decorate graves and remember those who have gone before us. Also marks traditional beginning of summer."],

["Y", "6", "14", "2005", "1:00 AM", "12:59 PM", "Flag Day", "Honors the American flag, encourages patriotism. Citizens are urged to fly the flag and study its traditions."],

["F", "6", "3", "1", "1:00 AM", "12:59 PM", "Father's Day", "Honors all Fathers and fatherhood."],

["Y", "7", "4", "2005", "1:00 AM", "12:59 PM", "Independence Day", "Celebrates our Declaration of Independence from England in 1776, usually called the Fourth of July."],

["F", "9", "1", "2", "1:00 AM", "12:59 PM", "Labor Day", "Celebrates the achievements of workers, giving them a day of rest - marks traditional end of summer."],

["F", "10", "2", "2", "1:00 AM", "12:59 PM", "Columbus' Day", "Honors the traditional discovery of the Americas by Christopher Columbus."],

["Y", "10", "31", "2005", "1:00 AM", "12:59 PM", "Halloween", "Celebrates All Hallow's Eve, decorations include jack o'lanterns, costume wearing parties, and candy - considered a pagan holiday by many Christians."],

["Y", "11", "11", "2005", "1:00 AM", "12:59 PM", "Veteran's Day", "Honors all veterans of the United States armed forces. A traditional observation is a moment of silence at 11 AM remembering those who fought for peace."],

["F", "11", "4", "5", "1:00 AM", "12:59 PM", "Thanksgiving", "A day to give thanks for your many blessings - traditionally for the Autumn harvest, and it marks the beginning of the 'holiday season'."],

["Y", "12", "25", "2009", "1:00 AM", "12:59 PM", "Christmas", "Celebration of the traditional day of Jesus' birth - God was made flesh and dwelt among us."]

// Please omit the final comma after the ] from the last line above unless you are going to add another event at this time.

);

function events1(event8)

{

return event8;

}

function prod(date1,date2)

{

x=date1;

this.date2=date2;

this.date1=date1;

return x;

}

var events2=prod("hi","11");

var house1=new prod("hello","11");

document.write(daycounter);

function changedate(buttonpressed) {

if (buttonpressed == "prevyr") yearNum--;

else if (buttonpressed == "nextyr") yearNum++;

else if (buttonpressed == "prevmo") monthNum--;

else if (buttonpressed == "nextmo") monthNum++;

else if (buttonpressed == "nextmo1") {

monthNum=document.getElementById("select3");

}

else if (buttonpressed == "return") {

monthNum = todaysMonth;

yearNum = todaysYear;

}

if (monthNum == 0) {

monthNum = 12;

yearNum--;

}

else if (monthNum == 13) {

monthNum = 1;

yearNum++

}

lastDate = new Date(String(monthNum+1)+"/0/"+String(yearNum));

numbDays = lastDate.getDate();

firstDate = new Date(String(monthNum)+"/1/"+String(yearNum));

firstDay = firstDate.getDay() + 1;

createCalendar();

return;

}

function easter(year) {

// feed in the year it returns the month and day of Easter using two GLOBAL variables: eastermonth and easterday

var a = year % 19;

var b = Math.floor(year/100);

var c = year % 100;

var d = Math.floor(b/4);

var e = b % 4;

var f = Math.floor((b+ / 25);

var g = Math.floor((b-f+1) / 3);

var h = (19*a + b - d - g + 15) % 30;

var i = Math.floor(c/4);

var j = c % 4;

var k = (32 + 2*e + 2*i - h - j) % 7;

var m = Math.floor((a + 11*h + 22*k) / 451);

var month = Math.floor((h + k - 7*m + 114) / 31);

var day = ((h + k - 7*m +114) % 31) + 1;

eastermonth = month;

easterday = day;

}

function createCalendar() {

calendarString = '';

var daycounter = 0;

calendarString +='<tr>';

calendarString +='<td class=\"tdpad\" colspan=\"2\">';

calendarString +='<table width=\"741\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">';

calendarString +='<tr>';

calendarString +='<td height=\"20\" colspan=\"4\" valign=\"top\"><a class=\"breadlink\" href=\"#\">Home</a> - Calender of Events</td>';

calendarString +='</tr>';

calendarString +='<tr>';

calendarString +='<td width=\"21%\" height=\"30\"><font class=\"calender\">'+ wordMonth[monthNum-1]+ yearNum+'</font></td>';

calendarString +='<td colspan=\"3\" align=\"right\">';

calendarString +='<input class=\"btn2\" type=\"submit\" name=\"Submit\" value=\"Import Events\" />';

calendarString +='<input class=\"btn2\" type=\"submit\" name=\"Submit2\" value=\"Open Window\" />';

calendarString +='</td>';

calendarString +='</tr>';

calendarString +='<tr>';

calendarString +='<td height=\"30\"><a href=\"#\" class=\"etext\">Month</a> - <a href=\"#\" class=\"etext\">Week</a> - <a href=\"#\" class=\"etext\">Day</a></td>';

calendarString +='<td width=\"47%\" align=\"center\">';

calendarString +='<a class=\"etext\" href=\"#\" onClick=\"changedate(\'prevmo\')\"><<< Previous</a>';

calendarString +='<select name=\"select3\" id=\"select3\" onChange=\"changedate(\'nextmo1\')\">';

calendarString +='<option value='+ wordMonth[monthNum-1]+'>'+ wordMonth[monthNum-1]+'</option>';

calendarString +='<option value='+ wordMonth[monthNum-2]+'>'+ wordMonth[monthNum-2]+'</option>';

calendarString +='<option value='+ wordMonth[monthNum-3]+'>'+ wordMonth[monthNum-3]+'</option>';

calendarString +='<option value='+ wordMonth[monthNum-4]+'>'+ wordMonth[monthNum-4]+'</option>';

calendarString +='<option name='+ wordMonth[monthNum-5]+'>'+ wordMonth[monthNum-5]+'</option>';

calendarString +='<option name='+ wordMonth[monthNum-6]+'>'+ wordMonth[monthNum-6]+'</option>';

calendarString +='<option name='+ wordMonth[monthNum-7]+'>'+ wordMonth[monthNum-7]+'</option>';

calendarString +='<option name='+ wordMonth[monthNum-8]+'>'+ wordMonth[monthNum-8]+'</option>';

calendarString +='<option name='+ wordMonth[monthNum-9]+'>'+ wordMonth[monthNum-9]+'</option>';

calendarString +='<option name='+ wordMonth[monthNum-10]+'>'+ wordMonth[monthNum-10]+'</option>';

calendarString +='<option name='+ wordMonth[monthNum-11]+'>'+ wordMonth[monthNum-11]+'</option>';

calendarString +='<option name='+ wordMonth[monthNum]+'>'+ wordMonth[monthNum]+'</option>';

calendarString +='</select>';

calendarString +='<select name=\"select4\">';

calendarString +='<option>'+ yearNum+'</option>';

calendarString +='</select>';

calendarString +='<a class=\"etext\" href=\"#\" onClick=\"changedate(\'nextyr\')\">Next >>></a>';

calendarString +='</td>';

calendarString +='<td width=\"27%\">';

calendarString +='<a href=\"#\" class=\"etext\">Login</a> - <a href=\"#\" class=\"etext\">Search</a>';

calendarString +='<select name=\"select\">';

calendarString +='<option>Hi-Radar Events</option>';

calendarString +='</select>';

calendarString +='</td>';

calendarString +='<td>';

calendarString +='<input name=\"image\" type=\"image\" value=\"Submit\" src=\"images/search.gif\" />';

calendarString +='</td>';

calendarString +='</tr>';

calendarString +='</table>';

calendarString +='</td>';

calendarString += '</tr>';

calendarString += '<tr>';

calendarString += '<td style=\"padding-right:12px;\" height=\"26\" align=\"right\" ><a class=\"elink\" href=\"#\">View Open-Win</a> - <a class=\"elink\" href=\"#\">Manage Open-Win</a> - <a class=\"elink\" href=\"#\">Browse Open-Win</a> - <a class=\"elink\" href=\"#\">View My Bookmark</a></td>';

calendarString +='</tr>';

calendarString += '<table width="741" height="630" border="0" cellpadding="0" cellspacing="1">';

calendarString += '<tr>';

calendarString += '<td width=\"106\" height=\"26\" align=\"center\" bgcolor=\"#4F7637\" class=\"font\">Sunday</td>';

calendarString += '<td width=\"106\" height=\"26\" align=\"center\" bgcolor=\"#4F7637\" class=\"font\">Monday</td>';

calendarString += '<td width=\"106\" height=\"26\" align=\"center\" bgcolor=\"#4F7637\" class=\"font\">Tuesday</td>';

calendarString += '<td width=\"106\" height=\"26\" align=\"center\" bgcolor=\"#4F7637\" class=\"font\">Wednesday</td>';

calendarString += '<td width=\"106\" height=\"26\" align=\"center\" bgcolor=\"#4F7637\" class=\"font\">Thursday</td>';

calendarString += '<td width=\"106\" height=\"26\" align=\"center\" bgcolor=\"#4F7637\" class=\"font\">Friday</td>';

calendarString += '<td width=\"106\" height=\"26\" align=\"center\" bgcolor=\"#4F7637\" class=\"font\">Saturday</td>';

calendarString += '</tr>';

thisDate == 1;

for (var i = 1; i <= 6; i++) {

calendarString += '<tr>';

for (var x = 1; x <= 7; x++) {

daycounter = (thisDate - firstDay)+1;

thisDate++;

if ((daycounter > numbDays) || (daycounter < 1)) {

calendarString += '<td align=\"center\" bgcolor=\"#F2F8ED\" width=\"106\"> <\/td>';

} else {

if (checkevents(daycounter,monthNum,yearNum,i,x) || ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum))){

if ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum)) {

calendarString += '<td align=\"center\" bgcolor=\"#F2F8ED\" width=\"106\">&nbsp</td>';

}

else{

var showevent=showevents(daycounter,monthNum,yearNum,"i","x");

calendarString += '<td align=\"center\" bgcolor=\"#F2F8ED\" width=\"106\">'+ showevent + daycounter + '<\/td>';

var showevent=showevents(daycounter,monthNum,yearNum,"i","x");

}

} else {

calendarString += '<td align=\"center\" bgcolor=\"#F2F8ED\" width=\"106\">' + daycounter + '<\/td>';

}

calendarString += '<\/tr>';

}

'<\/table>';

var object=document.getElementById('calendar');

object.innerHTML= calendarString;

thisDate = 1;

}

function checkevents(day,month,year,week,dayofweek) {

var numevents = 0;

var floater = 0;

for (var i = 0; i < events.length; i++) {

if (events[0][0] == "W") {

if ((events[0][2] == dayofweek)) numevents++;

}

else if (events[0][0] == "Y") {

if ((events[0][2] == day) && (events[0][1] == month) && (events[0][3] == year) ) numevents++;

}

else if (events[0][0] == "F") {

if ((events[0][1] == 3) && (events[0][2] == 0) && (events[0][3] == 0) ) {

easter(year);

if (easterday == day && eastermonth == month) numevents++;

} else {

floater = floatingholiday(year,events[1],events[2],events[3]);

if ((month == 5) && (events[1] == 5) && (events[2] == 4) && (events[3] == 2)) {

if ((floater + 7 <= 31) && (day == floater + 7)) {

numevents++;

} else if ((floater + 7 > 31) && (day == floater)) numevents++;

} else if ((events[0][1] == month) && (floater == day)) numevents++;

}

else if ((events[0][2] == day) && (events[0][1] == month) && (events[0][3] == year)) {

numevents++;

}

if (numevents == 0) {

return false;

} else {

return true;

}

function showevents(day,month,year,week,dayofweek) {

var theevent = "";

var floater = 0;

var eventhan="ww";

for (var i = 0; i < events.length; i++) {

if (events[0] != "") {

// First we'll process recurring events (if any):

if (events[0] == "Y") {

if ((events[2]==day) && (events[1] == month) && (events[3] == year) ) {

theevent += events[6] + '\n';

theevent += '\n -------------- \n\n';

return theevent;

}

function floatingholiday(targetyr,targetmo,cardinaloccurrence,targetday) {

// Floating holidays/events of the events.js file uses:

// the Month field for the Month (here it becomes the targetmo field)

// the Day field as the Cardinal Occurrence (here it becomes the cardinaloccurrence field)

// 1=1st, 2=2nd, 3=3rd, 4=4th, 5=5th, 6=6th occurrence of the day listed next

// the Year field as the Day of the week the event/holiday falls on (here it becomes the targetday field)

// 1=Sunday, 2=Monday, 3=Tuesday, 4=Wednesday, 5=Thurday, 6=Friday, 7=Saturday

// example: "F", "1", "3", "2", = Floating holiday in January on the 3rd Monday of that month.

//

// In our code below:

// targetyr is the active year

// targetmo is the active month (1-12)

// cardinaloccurrence is the xth occurrence of the targetday (1-6)

// targetday is the day of the week the floating holiday is on

// 0=Sun; 1=Mon; 2=Tue; 3=Wed; 4=Thu; 5=Fri; 6=Sat

// Note: subtract 1 from the targetday field if the info comes from the events.js file

//

// Note:

// If Memorial Day falls on the 22nd, 23rd, or 24th, then we add 7 to the dayofmonth to the result.

//

// Example: targetyr = 2052; targetmo = 5; cardinaloccurrence = 4; targetday = 1

// This is the same as saying our floating holiday in the year 2052, is during May, on the 4th Monday

//

var firstdate = new Date(String(targetmo)+"/1/"+String(targetyr)); // Object Storing the first day of the current month.

var firstday = firstdate.getUTCDay(); // The first day (0-6) of the target month.

var dayofmonth = 0; // zero out our calendar day variable.

targetday = targetday - 1;

if (targetday >= firstday) {

cardinaloccurrence--; // Subtract 1 from cardinal day.

dayofmonth = (cardinaloccurrence * 7) + ((targetday - firstday)+1);

} else {

dayofmonth = (cardinaloccurrence * 7) + ((targetday - firstday)+1);

}

return dayofmonth;

}

</script>

</head>

<body class="homebg" onload="changedate('return')">

<%@ include file="includes/header.jsp" %>

<table width="781" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td class="intab" align="left" valign="top"><table width="765" border="0" cellspacing="0" cellpadding="0">

<tr>

<td class="tdpad2" align="left" valign="top">

<center>

<table id="evtcal" border="0" cellpadding="0" cellspacing="0" width="584">

<tbody>

<tr>

<td style="padding: 3px;" align="center" bgcolor="#FFFFFF" valign="top" width="314">

<div id="calendar"></div>

</td>

<td width="10"> </td>

</tr>

</tbody>

</table>

</center>

</td>

</tr>

</table></td>

</tr>

</table>

<%@ include file="includes/footer.jsp" %>

</body>

</html>

[/javascript]

i want the daily,weekly calendar .plz suggest how i made changes into that code.

simonrs · November 25, 2008

Yes I have a suggestion. It's gone. Sorry buddy, it's a dud.

First problem is no-one's going to read through a massive amount of code, understand completely how it works, then tell you how to refactor what looks like pretty ugly code in the first place.

My suggestion is this - and this is coming from someone who has just finished coding a javascript calendar.

1. Use Prototype (www.prototypejs.org). The object oriented support in prototype from Class.create makes it very easy to create organised code. If you don't know what object oriented means, read up on it. Then have a very long read through the prototype api.

2. Get your code out of the html source and into an exterior file. This is easier for you to edit in terms of syntax highlighting and means that it won't be downloaded more than once ever by any user.

3. GET HTML OUT OF JAVASCRIPT!!! This is very ugly. I think for web design it is so so important to keep all the separate languages to their respective strengths. Javascript likes tree DOM structures, which is what an HTML page is when it's been parsed by a browser. Again, if the expression "DOM" is foreign google and read. PHP = logic, HTML = structure, CSS = display styles, JS = dynamic changes to HTML. If you want to put HTML in at a later date, my preference and one I would personally encourage is to put it in the HTML file with style="display:none;" on the parent tag. Then when you come to edit HTML it's all in the same place, and it's less work for Javscript at run time. Also, the browser will pre-load all images for you nicely.

4. This the most important of all. When you ask a question on a forum, make it really specific. Your question is really asking for a short term solution, but a massive one that you will simply not get as it requires too much time for anyone to answer. The answer you really want is the above, because your problem is caused by the frailties in your code.

Sign In

Disply weekly,daily calendar using javascript

Recommended Posts

swethak

Link to comment

Share on other sites

simonrs

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information