Creating A Calendar

[recore684]

I need help with creating a calendar in css, can someone help me out.

This is what I have to do:

1. I have to create a new blank file and save it as caldendar.js

2. Then within the file, I am supposed to insert a function named calendar() that has a single parameter named "caldate". The caldate parameter stores the date the user wants hightlighted in the calendar.

3. Within the command block of the calendar() function, I am to create an array named "MonthName" that stores the names of the twelve months. Th first element in the array, MonthName[0] should have a value of "January" and completes the rest of the array similarly.

4. Then I am to create an array, "DayName", that stores the three letter abbreviations of the seven weekday names, starting with DayName[0] ="Sun".

5. After the DayName array, I am to create a date object variable named Calendar_Day. If the value of the caldate parameter is equal to "today", set Calendar_Day equal to the current date and time; otherwise, set Calendar_Day equal to the date specified by the caldate parameter. <b>(Hint: use the command: Calendar_Day = new Date(caldate)).</b>

6. Use the getDate(), getMonth(), and getFullYear() methods to extract the day of the month, month number, and four-digit year from the Calendar_Day variable. Store these values in variables named ThisDay, ThisMonth, and ThisYear, respectively.

7. Then I am to use the doucment.write() method to write the following tags to the Web page:
<textarea name="name" cols="50" rows="10"><table id="calendar">
<tr>
<th id="calendar_head" colspan="7">Month, Year</th>
</tr></textarea>

Where Month, Year is the name of the month and the four-digit year. <b>(Hint: use MonthName[ThisMonth] to display the name of the month; use the ThisYear variable to display the year value.)</b>

Now this is what I have done?
<textarea name="name" cols="50" rows="10"><script type="text/JavaScript">
function calendar(caldate);
var Month = new Array() {
Monthname [0] = "January";
Monthname [1] = "February";
Monthname [2] = "March";
Monthname [3] = "April";
Monthname [4] = "May";
Monthname [5] = "June";
Monthname [6] = "July";
Monthname [7] = "August";
Monthname [8] = "September";
Monthname [9] = "October";
Monthname [10] = "November";
Monthname [11] = "December";
var DateName = new Array()
Datename[0]="Sun";
Datename[1]="Mon";
Datename[2]="Tue";
Datename[3]="Wed";
Datename[4]="Thu";
Datename[5]="Fri";
Datename[6]="Sat";
Calendar_Day = new Date(caldate))
}
</script></textarea>

8. I am to create a For loop that writes a table row containing seven table heading cells. The For loop should generate the following HTML code:

<textarea name="name" cols="50" rows="10"><table id="calendar">
<tr>
<th id="caldendar_head" colspan="7">Month, Year</th>
</tr>
<tr>
<th class="calendar_weekdays">Sun</th>
<th class="calendar_weekdays">Mon</th>
<th class="calendar_weekdays">Tue</th>
<th class="calendar_weekdays">Wed</th>
<th class="calendar_weekdays">Thu</th>
<th class="calendar_weekdays">Fri</th>
<th class="calendar_weekdays">Sat</th>
</tr></textarea>

I don't think I did any of this right, so can someone point in the right direction.

[jscheuer1]

This script idea sounds very similar to:

http://www.dynamicdrive.com/dynamici...dcalendar2.htm

There are a bunch of other calendar scripts at Dynamic Drive from this index page:

http://www.dynamicdrive.com/dynamicindex7/

Why reinvent the wheel? Try modifying one of these. What is this for? The way you explain it, it sounds like a school project.

[recore684]

its not a school project its a tutorial

[jscheuer1]

Just curious, not trying to get all ehical on you. My advice still stands, to refrase it:

Learn from the masters.

Meaning, since this has been done, or at least close to it, take a look and see how, especially since you seem stuck.

[mwinter]

Why reinvent the wheel?

Reinventing the wheel can be fun and it's certainly educational, mainly because you have some functionality to aim for.

Learn from the masters.

Many of the scripts available from DD as a whole are in need of updating. Both the quality of the generated markup, and the ability to script, for example, CSS according to specifications. Validity is a rising trend, and scripts should reflect this.

Following the steps the OP gave, rather liberally I might add, I get:

function calendar(date) {
  var month  = ['January', 'February', 'March', 'April', 'May', 'June', 'July',
                'August', 'September', 'October', 'November', 'December'],
      day    = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      now    = new Date(),
      output = ['<table class="calendar">',
                '<thead>',
                '<tr>',
                '<th colspan="7">' + month[date.getMonth()] + ', '
                 + date.getFullYear() + '<\/th>',
                '<\/tr>',
                '<\/thead>',
                '<tbody>',
                '<tr>'];

  function areEqual(x, y) {
    return (x.getDate() == y.getDate()) && (x.getMonth() == y.getMonth())
     && (x.getFullYear() == y.getFullYear());
  }

  for(var i = 0, n = day.length; i < n; ++i) {
    output.push('<th>' + day[i] + '<\/th>');
  }
  output.push('<\/tr>');

  document.write(output.join('\n'));
}

The code is, of course, far from complete. Both the main body of the output needs to be included, and the tbody and table elements need to be closed.

The push method needs to be emulated for earlier IE versions:

if('function' != typeof Array.prototype.push) {
  Array.prototype.push = function() {
    for(var i = 0, j = this.length, n = arguments.length; i < n; ++j, ++i) {
      this[j] = arguments[i];
    }
    return j;
  };
}

Mike

[recore684]

thank you for your help