Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Changing div style for every day of the week script

Tags:

javascript

css

time

This is my project: http://jsfiddle.net/yL0o1cy0/

.calendar {
  width: 850px;
  height: 500px;
  background-color: #141414;
  border-radius: 10px;
  padding-top: 10px;
  margin-top: 15px;
  margin-left: 15px;
}
#calendartest1 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#calendartest2 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
#calendartest1 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
#calendartest2 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
.day {
  width: 110px;
  float: left;
  border-left: 1px solid #404040;
}
.dayname {
  text-align: center;
  background-color: #49CEFF;
  height: 30px;
  border-radius: 0px 5px 0px 5px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: -15px;
}
.dayname p {
  padding-top: 5px;
  color: white;
  font-weight: bold;
  text-shadow: 0px 0px 10px black;
}
.daycontent {
  text-align: center;
  margin-top: 5px;
  height: 160px;
}
.daycontent a:link,
a:visited {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: white;
  text-decoration: none;
  font-size: 12px;
}
.daycontent a:hover,
a:active {
  background-color: black;
  color: #49ceff;
}
<div class="calendar">
  <div id="calendartest1">
    <h2>Test1</h2>
    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thusday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
  </div>
  <div id="calendartest2">
    <h2>Test2</h2>
    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thusday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent">
        <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>
      </div>
    </div>
  </div>
</div>

What I want is that on Monday, the Monday box changes color from background-color: #49CEFF; to background-color: #242424;, and the same on Thursday for the Thursday box and so on for the other days.

I know how to change change something every 24h(for example), but I really don't know what to do in this situation.

like image 618
Ubya Avatar asked Feb 10 '23 21:02

Ubya

2 Answers

One approach is:

function colorToday(color) {

    // get all the <p> elements contained within <div> elements
    // with the class-name of 'dayname', using
    // document.querySelectorAll(); converting the NodeList
    // into an Array, using Functionn.prototype.call() to use
    // Array.prototype.slice():
    var dayContainers = Array.prototype.slice.call(document.querySelectorAll('div.dayname p'), 0),

        // JavaScript's days of the week start with Sunday (0), here
        // we create an Array of the days of the week:
        days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],

        // getting the current day of the week (this returns a number
        // from 0 (Sunday) to 6 (Saturday):
        day = new Date().getDay();

    // iterating over the array we created earlier,
    // using Array.prototype.forEach():
    dayContainers.forEach(function (d) {
    // 'd' is the current array-element, here it's a DOM node
    // the <p> elements found above.

        // if the current <p> has text-content equal to
        // the day of the week found from the array:
        if (d.textContent.trim() === days[day]) {

            // we set the background-color of the <p> element's
            // parent to the colour supplied by the user:
            d.parentNode.style.backgroundColor = color;
        }
    });
}

// calling the function, setting the color:
colorToday('#242424');


function colorToday(color) {
  var dayContainers = Array.prototype.slice.call(document.querySelectorAll('div.dayname p'), 0),
    days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    day = new Date().getDay();

  dayContainers.forEach(function(d, i) {
    if (d.textContent.trim() === days[day]) {
      d.parentNode.style.backgroundColor = color;
    }
  });
}

colorToday('#242424');
.calendar {
  width: 850px;
  height: 500px;
  background-color: #141414;
  border-radius: 10px;
  padding-top: 10px;
  margin-top: 15px;
  margin-left: 15px;
}
#calendartest1 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#calendartest2 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
#calendartest1 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
#calendartest2 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
.day {
  width: 110px;
  float: left;
  border-left: 1px solid #404040;
}
.dayname {
  text-align: center;
  background-color: #49CEFF;
  height: 30px;
  border-radius: 0px 5px 0px 5px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: -15px;
}
.dayname p {
  padding-top: 5px;
  color: white;
  font-weight: bold;
  text-shadow: 0px 0px 10px black;
}
.daycontent {
  text-align: center;
  margin-top: 5px;
  height: 160px;
}
.daycontent a:link,
a:visited {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: white;
  text-decoration: none;
  font-size: 12px;
}
.daycontent a:hover,
a:active {
  background-color: black;
  color: #49ceff;
}
<div class="calendar">
  <div id="calendartest1">
    <h2>Test1</h2>

    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thursday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
  </div>
  <div id="calendartest2">
    <h2>Test2</h2>

    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thursday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
  </div>
</div>

External JS Fiddle demo, for experimentation/development.

Similarly, rather than explicitly setting a backgroundColor with the JavaScript, you could instead add a today class-name to the wrapper element:

function colorToday(color) {
    var dayContainers = Array.prototype.slice.call(document.querySelectorAll('div.dayname p'), 0),
        days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        day = new Date().getDay();

    dayContainers.forEach(function (d, i) {
        if (d.textContent.trim() === days[day]) {

            // adding the 'today' class-name to the parent
            // of the <p> whose text-content is equal to
            // the current day:
            d.parentNode.classList.add('today');
        }
    });
}

colorToday();


function colorToday(color) {
  var dayContainers = Array.prototype.slice.call(document.querySelectorAll('div.dayname p'), 0),
    days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    day = new Date().getDay();

  dayContainers.forEach(function(d, i) {
    if (d.textContent.trim() === days[day]) {
      d.parentNode.classList.add('today');
    }
  });
}

colorToday();
.calendar {
  width: 850px;
  height: 500px;
  background-color: #141414;
  border-radius: 10px;
  padding-top: 10px;
  margin-top: 15px;
  margin-left: 15px;
}
#calendartest1 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#calendartest2 {
  width: 778px;
  height: 200px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
#calendartest1 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
#calendartest2 h2 {
  color: #999999;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
.day {
  width: 110px;
  float: left;
  border-left: 1px solid #404040;
}
.dayname {
  text-align: center;
  background-color: #49CEFF;
  height: 30px;
  border-radius: 0px 5px 0px 5px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: -15px;
}
.dayname p {
  padding-top: 5px;
  color: white;
  font-weight: bold;
  text-shadow: 0px 0px 10px black;
}
.daycontent {
  text-align: center;
  margin-top: 5px;
  height: 160px;
}
.daycontent a:link,
a:visited {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: white;
  text-decoration: none;
  font-size: 12px;
}
.daycontent a:hover,
a:active {
  background-color: black;
  color: #49ceff;
}
.today {
  background-color: #242424;
}
<div class="calendar">
  <div id="calendartest1">
    <h2>Test1</h2>

    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thursday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
  </div>
  <div id="calendartest2">
    <h2>Test2</h2>

    <div class="day">
      <div class="dayname">
        <p>Monday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Tuesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Wednesday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Thursday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Friday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day">
      <div class="dayname">
        <p>Saturday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
    <div class="day" style="border-right: 1px solid #404040;">
      <div class="dayname">
        <p>Sunday</p>
      </div>
      <div class="daycontent"> <a href="">test</a>
        <a href="">test</a>
        <a href="">test</a>

      </div>
    </div>
  </div>
</div>

External JS Fiddle demo, for experimentation/development.

References:

  • Array.prototype.forEach().
  • Array.prototype.slice().
  • Date().
  • Date.prototype.getDay().
  • document.querySelectorAll().
  • Element.classList.
  • Function.prototype.call().
  • HTMLElement.style.
  • Node.textContent.
  • String.prototype.trim().
like image 125
David Thomas Avatar answered Feb 12 '23 12:02

David Thomas

You can do this by adding in some JavaScript and one CSS class.

Updated JSFiddle

The new CSS class

.today {
    background-color:#242424 !important;
}

JavaScript - Figure out the current day of the week and then find all <p> with innerText equal to today's day of the week and add the new css class.

var d = new Date();
var weekday = new Array(7);
weekday[0]=  "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var n = weekday[d.getDay()];

var foundItems = document.getElementsByTagName('p');

for (var i = 0; i < foundItems.length; i++) {
     if (foundItems[i].innerHTML.indexOf(n) !== -1) {
         foundItems[i].parentNode.className += " today";
     }
}
like image 24
tcigrand Avatar answered Feb 12 '23 11:02

tcigrand
Sign in to Comment

Related questions

Nervgh Angular File Upload - How do I restrict the file formats to say jpeg and png?
How to set retrieve callback in mongoose, in a global variable
Display a Modal on button click using Jquery
Why bitwise shift with 0 in JavaScript yields weird results in some cases
Different z-index for thumb and track in html5 range slider in firefox
How to connect a destroyed signal of C++ object from QML?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!