Results 1 to 6 of 6

Thread: Creating A Calendar

  1. #1
    Join Date
    May 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Creating A Calendar

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    its not a school project its a tutorial

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    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:

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

    Code:
    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
    Last edited by ddadmin; 03-05-2006 at 03:46 PM.

  6. #6
    Join Date
    May 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thank you for your help

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •