Adjust the background color of the unordered list when it corresponds to the current

Looking to customize a course calendar so that the day column stands out on its designated day of the week.

For example, on Wednesday, the Wednesday column should have a distinct appearance.

I've been experimenting with different methods and searching for solutions on forums, but so far, I haven't had much success. Any new approach would be greatly appreciated. Thank you.

Script

<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script> 
<script>
$('.fc-today').prevAll('ul').css('backgroundColor','yellow');
$('.fc-today').parent().prevAll().find('ul').css('backgroundColor','yellow');
</script>

HTML

<div class="calendar-daycontent fc-mon">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<!-- more HTML code here -->

CSS

div.calendar-daycontent {
float : left ;
width : 138px ;
margin : 1px ;
display : block ;
}

    <!-- More CSS styling rules here -->

Answer №1

Discover how to utilize the Date method for retrieving the present day of the week:

$(function(){
  var currentDay = new Date().getDay();
  currentDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][currentDay];
  $('div.calendar-daycontent.fc-' + currentDay.toLowerCase() + ' ul').css({'background':'yellow'});
});

Answer №2

Here is a similar example: JSFiddle

JavaScript Code:

$(function() {
  var dayOfWeek = (new Date).getDay();
  var dayClasses = ['fc-sun', 'fc-mon', 'fc-tue', 'fc-wed', 'fc-thu', 'fc-fri', 'fc-sat'];
  $('.' + dayClasses[dayOfWeek] + ' ul').css('backgroundColor', 'yellow');
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error! Unable to Inject ComponentFactoryResolver

Recently, I attempted to utilize ComponentFactoryResolver in order to generate dynamic Angular components. Below is the code snippet where I am injecting ComponentFactoryResolver. import { Component, ComponentFactoryResolver, OnInit, ViewChild } from "@an ...

What is the process for integrating ion-tabs with IonicVueRouter within an Ionic (vue.js) application?

My Project Idea I have a vision to create an innovative exercise warm-up application. The app will be divided into two main sections: a workout tab and a settings tab. The user journey will start with selecting a workout plan, then choosing specific exerc ...

Determining the most appropriate time to utilize the 'async' built-in function in ES2017 versus implementing 'npm i async' can depend on a variety of factors such

I recently discovered that async/await is a feature of ES2017, however, in some of my previous projects I had to use the package async to implement async/await functionality. Is there a simple way to determine when async can be used without importing it? ...

Guide to dynamically loading a component using a variable name in Vue.js?

Is it possible to dynamically load a component in a vue.js application using a variable name? For example, if I have the following component registered: <template id="goal"> <h1>Goal:{{data.text}}</h1> </template> Instead of di ...

The Chrome browser does not recognize Sys.WebForms

I am encountering an issue with my Web-Application when trying to perform partial updates. The error message "Sys.WebForms is undefined in Chrome (latest version)" keeps popping up. Despite my extensive research efforts, I have not been able to find a solu ...

How to resolve 404 error for HTML files in Angular 4's "basic deployment" strategy?

I have been attempting to deploy my application following the instructions in the "Simplest deployment possible" section of the angular guide. Starting from a project created using the quick start setup, I made changes to the files index.html, main.ts, and ...

Having trouble showing table data in Angular

My goal is to showcase data from a table created using Spring-Boot Below is my model.ts: export class Quiz1 { QuestionId?: any; Question?: string; OptionsA?: string; OptionsB?: string; OptionsC?: string; OptionsD?: string;} He ...

Ways to determine whether a website is operating on http or https protocol

There is a http call being made from my AngularJS application. I'm uncertain about the protocol used by the target website. Therefore, I need to determine whether the target site uses HTTP or HTTPS. Below is a snippet of my code. var Path12 = "https: ...

Efficiently Fill JQUERY Mobile Multi-Pages with Dynamic Content

A Question for JQUERY Mobile Beginners: In my basic JQUERY Mobile application, I have a simple setup with two pages. When the user navigates to PAGE2, I need to make an AJAX call to retrieve a JSON object that contains a list of people along with their DB ...

Handling conditional statements in JSX

Here is an example of my straightforward component: function Messages(props) { return ( <View> <View style={styles.messageWrapper} > <View style={styles.isNotMine}> <View style={s ...

Tips for extracting data from a state-based object store in React?

https://i.sstatic.net/A0cc4.pngWhenever I attempt to execute a PUT call, I fetch the data by id and save it in a state named "getData". While I am able to filter and map over this data, I face issues when trying to extract individual values. For instance, ...

Rotate the image as you hover your cursor over it

I am trying to implement a script where the image is rotated when the user hovers over it. Unfortunately, the hovering effect is not functioning as expected. $("#alcazar-image").rotate({ bind: { mouseover : function() { $(this).rotate({anima ...

Using the _id String in a GraphQL query to retrieve information based on the Object ID stored in a

Encountering an issue with my graphql query not returning anything when sending the _id as a string. Interestingly, querying the DB using any other stored key (like name: "Account 1") works perfectly and returns the object. I've defined my Account sch ...

What's the best way to ensure my side navigation floats on top of my full-width slider?

I am currently working on implementing my side navigation to overlay on top of my full-width slider at the beginning of the webpage. However, when I add the slider, the navigation buttons in my side nav become unclickable. I have tried using the z-index ...

The autocomplete functionality with ajax is currently malfunctioning

<script> function autocomplet1() { var min_length = 0; // minimum characters to display the autocomplete var keyword = $('#select01').val(); if (keyword.length >= min_length) { $.ajax({ url: 'barcode ...

What is the most efficient way to retrieve the largest category_id within a nested object array?

Seeking guidance as a beginner in ReactJS. I am struggling with looping through a nested object array to find the largest category Id. Despite my efforts, I am unable to retrieve the desired result because the largest category ID may not always be locate ...

Is there a way to implement multiple "read more" and "read less" buttons on a single page?

I am currently working on a rather large project and I am encountering some issues with the read more buttons. As someone who is fairly new to JavaScript, I am still grappling with the concepts. While I have managed to make the function work for the first ...

What is the best way to evaluate two objects with varying data types?

Is it possible to compare two objects with different data types? var a = { sort: 7, start: "0"} var b = { sort: "7", start: "0"} I thought they should be equal, but when I try using JSON.stringify(a) === JSON.stringify(b), it returns false. ...

Developing shapes using CSS and jQuery

I am struggling to create the exact contour as shown in the image. Despite trying, I have not been successful in achieving it. I used a lot of HTML child tags in my attempt, but I would prefer to keep it minimal. Is there a simpler way to accomplish this? ...

There appears to be no alteration in the documentation, yet why is there a discrepancy in image scaling based on width between Bootstrap 4 and 5?

My picture is positioned in a grid column. When utilizing Bootstrap 4, the .title-image { width: 60%;} style works as intended. However, upon transitioning to BS 5, the image suddenly expands and protrudes. It appears that the width attribute is now align ...