CODEWITHSUNDEEP
javascriptjquerydatehtmlhtml-lists
NewWorldOrderly
NewWorldOrderly

Reputation: 51

How to set a DIV or LI "class" by day of the week?

If I have a 7 day calendar with a DIV and UL for each day, how can I add the class of "today" to the LI "day" for the day of the week? (i.e. Monday, Tuesday, Wednesday, etc.)

Basically I just want to highlight the day of the week on the page load.

I assume this can be accomplished with jQuery, but I am just getting the hang of it, so any suggestions to point me in the right direction would be greatly appreciated.

Here is the basic HTML I am using for the content:

  <div id="main_content">
   <div id="weekly_schedule">
     <ul class="day_container">
       <li class="day">Su</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Mo</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Tu</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">We</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Th</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Fr</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Sa</li>
       <li class="day_content">content</li>
     </ul>
  </div>
</div>

Upvotes: 0

Views: 1430

Answers (5)

adamccfc
adamccfc

Reputation: 230

I've had the same problem. I came up with the following solution using JavaScript (though I'm not sure if this is the best way to go about it).

HTML:

<div id="days">
  <ul>
    <li id="mon">Mon</li>
    <li id="tue">Tue</li>
    <li id="wed">Wed</li>
    <li id="thur">Thur</li>
    <li id="fri">Fri</li>
    <li id="sat">Sat</li>
    <li id="sun">Sun</li>
  </ul>
</div>

JavaScript: 

function startTime() {
  var today = new Date();
  var dayOfWeek = today.getDay();
  if (dayOfWeek == 0) {
    document.getElementById("sun").className = "today";
  } else if (dayOfWeek == 1) {
    document.getElementById("mon").className = "today";
  } else if (dayOfWeek == 2) {
    document.getElementById("tue").className = "today";
  } else if (dayOfWeek == 3) {
    document.getElementById("wed").className = "today";
  } else if (dayOfWeek == 4) {
    document.getElementById("thur").className = "today";
  } else if (dayOfWeek == 5) {
    document.getElementById("fri").className = "today";
  } else if (dayOfWeek == 6) {
    document.getElementById("sat").className = "today";
  } else {}
}

startTime();

So this basically adds the class "today" to the li tag depending on what day it is.

You can see the full working example here on my codepen - http://codepen.io/AdamCCFC/pen/XbNyeY

Upvotes: 0

Madbreaks
Madbreaks

Reputation: 19539

You may try something like the following:

$('li.day:eq(' + new Date().getDay() + ')').addClass('today');

Upvotes: 3

j08691
j08691

Reputation: 207901

You can do it without jQuery and just use plain JavaScript:

var date = new Date().getDay()*2;
document.getElementsByTagName('LI')[date].parentNode.className += " today";​

Here's a jsFiddle example.

Upvotes: 0

colemande
colemande

Reputation: 392

Here is my fiddler hope it helps. If you have questions let me know.

Upvotes: 2

Igor
Igor

Reputation: 33993

var dayOfWeek = new Date().getDay() - 1;
var selectedUl = $('#weekly_schedule:nth-child(' + dayOfWeek + ')');
// Do whatever you want with selectedUl, such as .addClass('highlighted')

Upvotes: 1

Related Questions