Script to alter div style based on the day of the week

Question

Script to alter div style based on the day of the week

Check out 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>
    // more days...
  </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>
    // more days...
  </div>
</div>

I'm looking to dynamically change the background color of each day's box in my calendar. For example, on Monday I want the background to change from #49CEFF; to #242424;, and likewise for other days. Any suggestions on how to achieve this?

javascript css time

Answer 1

Answer №1

Here is one method to achieve this:

function highlightToday(color) {

    var dayElements = Array.prototype.slice.call(document.querySelectorAll('div.dayname p'), 0),
        daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        currentDayIndex = new Date().getDay();

    dayElements.forEach(function (dayElement) {
    
        if (dayElement.textContent.trim() === daysOfWeek[currentDayIndex]) {
            dayElement.parentNode.style.backgroundColor = color;
        }
    });
}

highlightToday('#242424');

If you prefer, instead of setting the background-color directly in JavaScript, you can add a class name 'today' to the parent element:

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

    dayContainers.forEach(function(dayElement) {
        if (dayElement.textContent.trim() === days[dayIndex]) {
            dayElement.parentNode.classList.add('today');
        }
    });
}

highlightToday();

Answer 2

Here is one method to achieve this:

function highlightToday(color) {

    var dayElements = Array.prototype.slice.call(document.querySelectorAll('div.dayname p'), 0),
        daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        currentDayIndex = new Date().getDay();

    dayElements.forEach(function (dayElement) {
    
        if (dayElement.textContent.trim() === daysOfWeek[currentDayIndex]) {
            dayElement.parentNode.style.backgroundColor = color;
        }
    });
}

highlightToday('#242424');

If you prefer, instead of setting the background-color directly in JavaScript, you can add a class name 'today' to the parent element:

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

    dayContainers.forEach(function(dayElement) {
        if (dayElement.textContent.trim() === days[dayIndex]) {
            dayElement.parentNode.classList.add('today');
        }
    });
}

highlightToday();

Answer 3

Answer №2

To accomplish this task, simply insert some JavaScript code along with a CSS class.

Check out the updated JSFiddle

The freshly designed CSS class

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

The JavaScript logic - Determine the current day of the week and then identify all <p> elements that contain the name of today's weekday to apply the new CSS style.

var now = new Date();
var daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

var today = daysOfWeek[now.getDay()];

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

for (var idx = 0; idx < paragraphs.length; idx++) {
     if (paragraphs[idx].innerText.indexOf(today) !== -1) {
         paragraphs[idx].parentNode.className += " current-day";
     }
}

Answer 4

To accomplish this task, simply insert some JavaScript code along with a CSS class.

Check out the updated JSFiddle

The freshly designed CSS class

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

The JavaScript logic - Determine the current day of the week and then identify all <p> elements that contain the name of today's weekday to apply the new CSS style.

var now = new Date();
var daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

var today = daysOfWeek[now.getDay()];

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

for (var idx = 0; idx < paragraphs.length; idx++) {
     if (paragraphs[idx].innerText.indexOf(today) !== -1) {
         paragraphs[idx].parentNode.className += " current-day";
     }
}

Answer 5

Answer №3

To determine the current day, you can consistently check the time either every minute, 10 seconds, or even every second (view fiddle). Processing one operation per second is simple and using new Date() won't impact performance significantly.

HTML Structure:

<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
<div class="day">Friday</div>
<div class="day">Saturday</div>
<div class="day">Sunday</div>
<div id="time"></div>

CSS Style:

.day {
    padding: 10px 50px;
    font-size: 20px;
    background: #ccc;
    margin: 0 0 10px 0;
}

.current {
    background: #09c; /*Applied to current day via JS*/
}

Javascript Functionality:

window.onload = function() { //ensure DOM is loaded
    var weekHeadings = document.getElementsByClassName('day'); //calendar days array
    var currentTime = document.getElementById('time');
    var now = null;

    var setCurrentDay = function(elements, currentIndex) {
        var current = document.getElementsByClassName('current');
        if (current.length > 0)
            current[0].className = 'day';
        
        if (currentIndex < 0)
            elements[6].className = 'day current';
        else
            elements[currentIndex].className = 'day current';
    };

    var updateTime = setInterval(function() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        setCurrentDay(weekHeadings, now.getDay() - 1);
        currentTime.innerHTML = hours +':'+ minutes +':'+ seconds;
    }, 1000);
};

The code includes comments and references for easier understanding in the fiddle along with a timer to track updates.

If the day changes, the date object will reflect it automatically. The function runs every second even after page refresh, ensuring accurate timekeeping.

Answer 6

To determine the current day, you can consistently check the time either every minute, 10 seconds, or even every second (view fiddle). Processing one operation per second is simple and using new Date() won't impact performance significantly.

HTML Structure:

<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
<div class="day">Friday</div>
<div class="day">Saturday</div>
<div class="day">Sunday</div>
<div id="time"></div>

CSS Style:

.day {
    padding: 10px 50px;
    font-size: 20px;
    background: #ccc;
    margin: 0 0 10px 0;
}

.current {
    background: #09c; /*Applied to current day via JS*/
}

Javascript Functionality:

window.onload = function() { //ensure DOM is loaded
    var weekHeadings = document.getElementsByClassName('day'); //calendar days array
    var currentTime = document.getElementById('time');
    var now = null;

    var setCurrentDay = function(elements, currentIndex) {
        var current = document.getElementsByClassName('current');
        if (current.length > 0)
            current[0].className = 'day';
        
        if (currentIndex < 0)
            elements[6].className = 'day current';
        else
            elements[currentIndex].className = 'day current';
    };

    var updateTime = setInterval(function() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        setCurrentDay(weekHeadings, now.getDay() - 1);
        currentTime.innerHTML = hours +':'+ minutes +':'+ seconds;
    }, 1000);
};

The code includes comments and references for easier understanding in the fiddle along with a timer to track updates.

If the day changes, the date object will reflect it automatically. The function runs every second even after page refresh, ensuring accurate timekeeping.

Answer 7

Answer №4

To identify the current day of the week and adjust the background color, you'll need to utilize Javascript.

getDay()

Answer 8

To identify the current day of the week and adjust the background color, you'll need to utilize Javascript.

getDay()

Script to alter div style based on the day of the week

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having difficulty retrieving objects within a foreach loop of object keys that do not meet the criteria of the string.prototype.replace method

Default cross-origin behavior of the Fetch API

Using Selenium to choose a dropdown menu option - the dropdown menu will only appear once a search query has been entered into the

Navigating through React Native - A guide to accessing the initial navigation state on React Navigation

Expanding CSS Grid to Occupy Remaining Area

Implementing text overlays on images within a Bootstrap 4 navigation bar

What is the method for determining the overall page load time of a website, taking into account the total loading time instead of just the document.ready()

Revamping the login interface for enhanced user

Is there a way to efficiently update multiple rows at once in MySQL using an array in Node.js?

Having trouble aligning my fixed div to the center of the screen

I am looking to insert the indexes of an array into a table data cell (<td>), with the select options being the array's indexes

Incorporating one-of-a-kind images into your JavaScript objects

Retrieve the previous URL for redirection purposes

The HTML code is failing to load the font

Effortlessly alter the appearance of Stripe Elements using Next-themes for dynamic style changes

How can the CORS issue be resolved when sending a form from a client to an AWS API gateway function?

Directives causing disruption to one another

What is the syntax for accessing a dictionary item within a <span> tag using JavaScript?

Struggling with a malfunctioning ComponentDidMount function that devoured 95,000 of my daily calls in React

Rendering basic JSON data from the console to an HTML page using Angular