JavaScript Calendar - Todays Date

Question

doctorphp

13 Years Ago

Hi all

I am really new to javascript and I need to make a calendar which hilight the days date green. e.g. today 25/07/10 will be hilighted green. This is probably really easy but I am really new to JavaScript and would really appreciate the help. Here is the code.

<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("M 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 class="cdays">				
<li><span></span></li>
<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>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>

</div>

Thanks in advance
Cameron

I have attached a picture of the calendar to show what it looks like

calendar date javascript

2 Contributors
3 Replies
171 Views
10 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by fxm

All 3 Replies

fxm 23 Posting Pro

13 Years Ago

Here

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
  </head>
  <body>
    <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("M 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='green';break} }
</script>
  </body>
</html>

is one approach.

Note: depending on how the CSS is structured you may want to change .style.color instead of (or in addition to) .style.backgroundColor . Or you may want to change the color(s) of the containing <li>.

Edited 13 Years Ago by fxm because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

doctorphp · Answer 1 · 2010-07-26T03:59:35+00:00

Here

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
  </head>
  <body>
    <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("M 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='green';break} }
</script>
  </body>
</html>

is one approach.

Note: depending on how the CSS is structured you may want to change .style.color instead of (or in addition to) .style.backgroundColor . Or you may want to change the color(s) of the containing <li>.

Thank you so much.
I really appreciate it.

fxm 23 Posting Pro · Answer 2 · 2010-07-26T04:34:14+00:00

Thank you so much.

You're welcome. Remember to click 'solved'. And don't forget the up-arrow. :)

JavaScript Calendar - Todays Date

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers