JavaScript Calendar (and possibly some php) - Update calendar depending on month

Hi All.
Now I am really stuck here.

I am trying to develop a calendar which hilights the days date (which I have done) but now I am on to the really tricky bit (for me). I need the calendar to change each month and because the different months have different days of the week for a day in that month and also don't have the same number of days I had to come to all of you because I don't know where to start. I have the code here if it helps and any help would be very much appreciated.

<div class="cmonth">
      <div class="ctrl">
        <table cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" style="width: 15px;">
              <a class="calendar_prev" href="#">&laquo;</a>
            </td>
            <td align="center">
              <span><strong><?php echo date('F Y'); ?></strong></span>
            </td>
            <td align="right" style="width: 15px;">
              <a class="calendar_next" href="#">&raquo;</a>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="cont">
      <ul class="chead">
        <li>
          <span>Sun</span>
        </li>
        <li>
          <span>Mon</span>
        </li>
        <li>
          <span>Tue</span>
        </li>
        <li>
          <span>Wed</span>
        </li>
        <li>
          <span>Thu</span>
        </li>
        <li>
          <span>Fri</span>
        </li>
        <li>
          <span>Sat</span>
        </li>
      </ul>
      <ul id='theDates' class="cdays">
        <li>
          <a href="">1</a>
        </li>
        <li>
          <a href="">2</a>
        </li>
        <li>
          <a href="">3</a>
        </li>
        <li>
          <a href="">4</a>
        </li>
        <li>
          <a href="#">5</a>
        </li>
        <li>
          <a href="#">6</a>
        </li>
        <li>
          <a href="#">7</a>
        </li>
        <li>
          <a href="#">8</a>
        </li>
        <li>
          <a href="#">9</a>
        </li>
        <li>
          <a href="#">10</a>
        </li>
        <li>
          <a href="#">11</a>
        </li>
        <li>
          <a href="#">12</a>
        </li>
        <li>
          <a href="#">13</a>
        </li>
        <li>
          <a href="#">14</a>
        </li>
        <li>
          <a href="#">15</a>
        </li>
        <li>
          <a href="#">16</a>
        </li>
        <li>
          <a href="#">17</a>
        </li>
        <li>
          <a href="#">18</a>
        </li>
        <li>
          <a href="#">19</a>
        </li>
        <li>
          <a href="#">20</a>
        </li>
        <li>
          <a href="#">21</a>
        </li>
        <li>
          <a href="#">22</a>
        </li>
        <li>
          <a href="#">23</a>
        </li>
        <li>
          <a href="#">24</a>
        </li>
        <li>
          <a href="#">25</a>
        </li>
        <li>
          <a href="#">26</a>
        </li>
        <li>
          <a href="#">27</a>
        </li>
        <li>
          <a href="#">28</a>
        </li>
        <li>
          <a href="#">29</a>
        </li>
        <li>
          <a href="#">30</a>
        </li>
        <li>
          <a href="#">31</a>
        </li>
      </ul>
    </div>
<script>
now = new Date().getDate()
var cAs = document.getElementById('theDates').getElementsByTagName('a')
for (var j=cAs.length,i=0;i<j;i++){if (cAs[i].firstChild.data==now) {cAs[i].style.backgroundColor='blue';break} }
</script>

Thank you in advance.
Cameron

doctorphp

Junior Poster in Training

67 posts since Apr 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

0