0

hope you can help me out with this problem I've been having for the last couple of weeks.

In short, my client's project is a weekly planner, and during each week and each day different content is displayed (see example). So basically, my client has 25 different types of content organized in 5 weeks and 5 days. Once week 5 ends, week 1 starts again. No issue with that since im using tabs and nested tabs.

I need the week tab and day tab active on page load, according to the current day and week. So if today is January 1st, and it falls on a Monday, then the tab Week 1 and Monday tab should be active on page load.

I have no problem detecting the current day, however I need to somehow detect if the current day is a Friday (or Saturday), then switch the class of active from week 1 to week 2. Once Friday or Saturday from week 2 finishes, switch active class to Week 3 and so on. This on page load.

var date         = new Date(),
    today        = date.getDay(),
    /// 0 = Sunday // 1 = Monday // 2 = Tuesday // 3 = Wednesday // 4 = Thursday // 5 = Friday // 6 = Saturday
    day_Array    = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
    this_day     = day_Array[today - 1];
    
// If it's weekday, detect current week day.
if (today == 0 ? 6 : (today - 1)) {
  $(".week [class*="+this_day+"]").addClass('active');
}

// If it's Weekend (starting by Saturday), put active class to Monday.
if (today == 0 | today == 6){ 
  $(".week-days [class*="+this_day+"]").removeClass('active'); 
  $(".week-days .monday").addClass('active');
}
body {
    text-align:center;
}
ul li {
  display:inline-block;
  padding:10px;

}.week-number {
 background:whitesmoke;
}

.active {
  background:red;
  display:inline-block;
}
<ul class="week-number">
  <li class="one">Week One</li>
  <li class="two">Week Two</li>
  <li class="three">Week Three</li>
  <li class="four">Week Four</li>
  <li class="five">Week Five</li>
</ul>

<ul class="week-days">
  <li class="monday">Mon</li>
  <li class="tuesday">Tue</li>
  <li class="wednesday">Wed</li>
  <li class="thursday">Thu</li>
  <li class="friday">Fri</li>
</ul>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Why am I not using Javascript to detect the week? Because of how JS counts the weeks of each month (Week 1 always start at the beginning of the month, regardless of the day of the week). This is how I wanna count each week: example

Any idea on how to approach this?

I made a fiddle with the basic principle: jsFiddle

GusztaveG
  • 1
  • 2
  • Isn't this what you're looking for ? https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php or https://weeknumber.net/how-to/javascript – Ole EH Dufour Jun 17 '18 at 08:27
  • Thanks for your reply. Seems that those examples still gave me the same result. Any idea how I would be able to do it if let's say Friday ends, switch active class to next week? – GusztaveG Jun 18 '18 at 17:30

0 Answers0