laurens1991 laurens1991 - 6 months ago 10
Javascript Question

Set scrollLeft based on the Weekday number

I was wondering how to set

.scrollLeft()
based on the day of the week.

I figured out that I could get the weekday number by using
Date().getdate()
. Which would return 0 for Sunday and 6 for Saturday.

However, I'm working on a horizontally scrolling schedule. The schedule is in a
700%
width div. Monday starts at
left: 0
. If the user clicks on Tuesday the div scrolls
100%
to the right to show Tuesday. So far that all works, although my jQuery could be a bit more straight forward (currently I loop over the buttons with
eq(0)
,
eq(1)
,
eq(2)
etc).

$(document).ready(function () {
$(".daypick li a").eq(0).on("click", function (event) {
event.preventDefault();
$(".calendar").css({left: 0});
});
$(".daypick li a").eq(1).on("click", function (event) {
event.preventDefault(); //Prevent default action of anchor
$(".calendar").css({left: "-100%"});
});
$(".daypick li a").eq(2).on("click", function (event) {
event.preventDefault(); //Prevent default action of anchor
$(".calendar").css({left: "-200%"}); //Animates the scroll
/* Can also use 3000, 4000 i.e 3 seconds, 4 seconds to animate the scroll */
});
$(".daypick li a").eq(3).on("click", function (event) {
event.preventDefault(); //Prevent default action of anchor
$(".calendar").css({left: "-300%"}); //Animates the scroll
/* Can also use 3000, 4000 i.e 3 seconds, 4 seconds to animate the scroll */
});
$(".daypick li a").eq(4).on("click", function (event) {
event.preventDefault(); //Prevent default action of anchor
$(".calendar").css({left: "-400%"}); //Animates the scroll
/* Can also use 3000, 4000 i.e 3 seconds, 4 seconds to animate the scroll */
});
$(".daypick li a").eq(5).on("click", function (event) {
event.preventDefault(); //Prevent default action of anchor
$(".calendar").css({left: "-500%"}); //Animates the scroll
/* Can also use 3000, 4000 i.e 3 seconds, 4 seconds to animate the scroll */
});
$(".daypick li a").eq(6).on("click", function (event) {
event.preventDefault(); //Prevent default action of anchor
$(".calendar").css({left: "-600%"}); //Animates the scroll
/* Can also use 3000, 4000 i.e 3 seconds, 4 seconds to animate the scroll */
});
$(".daypick li a").eq(7).on("click", function (event) {
event.preventDefault(); //Prevent default action of anchor
$(".calendar").css({left: "-700%"}); //Animates the scroll
/* Can also use 3000, 4000 i.e 3 seconds, 4 seconds to animate the scroll */
});
});


What I'm trying to achieve here is that the script checks which day it is and shows the schedule for that day. So on Wednesday the parent div should get
left: -300%
and the third button should get class
active
.

However I'm a bit stuck with the dates. My first idea was to take the weekday number and multiply it with 100 to get the
left
value. The problem is that Sunday returns 0, and in my case I would need Monday to return 0 for that to function.

Hopefully someone can provide some help.

I've created a jsfiddle here,

Answer

You can get the day based on monday using (currentDay + 6) % 7.

important point Don't bind individual event for each link. Do it generic - find the link's index using jQuery index() then multiply it with 100.

$(document).ready(function () {
  var links = $(".daypick li a").on("click", function (event) {
    event.preventDefault();
    var index = links.index(this);
    $(".calendar").css({left: -(index*100) + '%'});
  });

  setTimeout(function(){
    var currentDay = new Date().getDay();
    links.eq((currentDay + 6) % 7).trigger('click');
  });
});
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.daypick {
  list-style: none;
  text-align: center;
  padding-top: 15px;
}

.daypick li {
  display: inline-block;
}

.daypick li a {
  padding: 10px 20px;
  background: #3ab3b6;
  color: #fff;
  text-decoration: none;

  transition: all .3s;
}

.daypick li a:hover, .daypick li a.active {
  background: #268a8d;
}

.calendar-wrapper {
  width: 100%;
  overflow-x:scroll;
}

.calendar {
  width: 700%;
  height: auto;
  overflow-x: scroll;
  position: relative;
  transition: all 2s;
  left: 0;
}

.weekday {
  padding-top: 50px;
  width: calc(100% / 7);
  float: left;
}

.raumwrap {
  max-width: 50%;
  float: left;
}

.raum1, .raum2 {
  margin-top: 30px;
  float: left;
  max-width:100%;
  margin-right: 75px;
}

.raum1 td, .raum2 td {
  padding: 10px 5px; 
}

.raum1 tr:nth-child(2n) {
  background: #3ab3b6;
  color: #fff;
}

.raum1 tr:nth-child(2n+1) {
  background: #fff;
}

.raum2 tr:nth-child(2n) {
  background: #268a8d;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <ul class="daypick">
      <li><a href="#" class="active">Montag</a></li>
      <li><a href="#">Dienstag</a></li>
      <li><a href="#">Mittwoch</a></li>
      <li><a href="#">Donnerstag</a></li>
      <li><a href="#">Freitag</a></li>
      <li><a href="#">Samstag</a></li>
      <li><a href="#">Sonntag</a></li>
    </ul>
    <div class="calendar-wrapper">
      <main class="calendar">
        <div class="weekday">
          <h1>Montag:</h1>

          <div class="raumwrap">
            <h2>Raum 1</h2>
            <table class="raum1">
              <tbody>
                <tr>
                  <th>Zeit</th>
                  <th></th>
                  <th>Kurse</th>
                  <th></th>
                  <th>Therapeut</th>
                </tr>
                <tr>
                  <td>07:00 - 08:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>08:00 - 09:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>15:00 - 16:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>17:00 - 18:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>19:00 - 20:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
              </tbody>
            </table>
          </div>
          <div class="raumwrap">
            <h2>Raum 2</h2>
            <table class="raum2">
              <tbody>
                <tr>
                  <th>Zeit</th>
                  <th></th>
                  <th>Kurse</th>
                  <th></th>
                  <th>Therapeut</th>
                </tr>
                <tr>
                  <td>07:00 - 08:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>08:00 - 09:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>15:00 - 16:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>17:00 - 18:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>19:00 - 20:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="weekday">
          <h1>Dienstag:</h1>
        </div>
        <div class="weekday">
          <h1>Mittwoch:</h1>
        </div>
        <div class="weekday">
          <h1>Donnerstag:</h1>
        </div>
        <div class="weekday">
          <h1>Freitag:</h1>
        </div>
        <div class="weekday">
          <h1>Samstag:</h1>
        </div>
        <div class="weekday">
          <h1>Sonntag:</h1>
        </div>
      </main>
    </div>
  </div>
</div>

https://jsfiddle.net/9fgwoxpm/1/