Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 344

Jul 26th, 2010

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

Expand Post »

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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
<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

Similar Threads

calendar problem PHP and MySql in PHP
PHP update image doest work in PHP
count profile views in PHP
php mysql help in PHP
Date range picker using PHP&Javascript calendar in PHP

doctorphp

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

62 posts
since Apr 2010

Permalink

Jul 26th, 2010

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

Quote ...

don't know where to start.

Read about the methods of the Date() object http://www.w3schools.com/jsref/jsref_obj_date.asp

fxm

Reputation Points: 40

Solved Threads: 74

Posting Pro

Offline

591 posts
since Apr 2010

Permalink

Jul 26th, 2010

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

Click to Expand / Collapse Quote originally posted by fxm ...

Read about the methods of the Date() object http://www.w3schools.com/jsref/jsref_obj_date.asp

The link is broken.

doctorphp

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

62 posts
since Apr 2010

Permalink

Jul 26th, 2010

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

Quote ...

The link is broken.

The link was good when I posted it, and it is good now.

Even if it were broken, surely the obvious search for 'javascript date object' would find something useful.

fxm

Reputation Points: 40

Solved Threads: 74

Posting Pro

Offline

591 posts
since Apr 2010

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: iFrame dynamic resize not working correctly

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: JQuery Tabs and Ajax reload

DaniWeb Message

Cancel Changes

User Name
Password