SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How would you mark up a calendar?

    I'm making a calendar class in PHP. I'm trying to figure out how i should output the XHTML.

    Here is a link to the current version

    I was hoping you guys could look at the markup and give me some suggestions as in what you would like to have classes and ids applied to if you were using it.

    The cal- in front of everything is the name the person chooses for the calendar
    Last edited by galen; Dec 1, 2007 at 17:11.

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How would you markup a calendar
    This should probably go in the HTML/XHTML section... but such is life.

    I would mark it up with a table.

    HTML Code:
    <table id="calendar">
     <thead>
        <tr>
          <th>Sunday</th>
          <th>Monday</th>
          <th>Tuesday</th>
          <th>Wednesday</th>
          <th>Thursday</th>
          <th>Friday</th>
          <th>Saturday</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="today">01</td> <!-- hey, it's today!
          <td>02</td>
          <td>03</td>
          <td>04</td>
          <!-- etc... -->
        </tr>
      </tbody>
    </table>

  3. #3
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Theres the markup part then theres the part where im looking for what people using it would like ids and classes applied to so i figured it could go in either. Im more interested in which elements you would want ids and classes applied to.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    You want to add a class only when neccessary, and if you can apply a class name to a parent element and have the cascade work for you opt for not adding the same class name to every child element.

    The suggestion above is using a thead element so you can specify the days row separately, no classes are necessary.

    I would only add a class to the grayed out items for the previous and next months, and the current day.

    If you ever find yourself doing this:
    Code:
    <tr>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
      <td class="day"></td>
    </tr>
    Change it to:
    Code:
    <tr class="days">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    Hope it helps

  5. #5
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've decided to go with the thead tbody approach. I have no tfoot though and i read on one site that all 3 are required, while another site said all 3 were NOT required. (all required if 1 is given). Anyone know what the case is?

  6. #6
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need to implement tfoot. Try marking up an example and run it through a validator. It'll be just fine

    Awkwardly enough though, did you know that w3 says the order of markup for those three elements is thead, tfoot, then tbody. Yeah, it's a crazy world.


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
  •