How to modify the font color of weekend dates on jquery datepicker

Can I adjust the font color of dates that land on weekends in a jQuery calendar? I attempted to utilize the class ui-datepicker-week-end but it only alters the font color for Sunday and Saturday. My aim is to also modify the color of days that fall on Sundays and Saturdays.

Answer №1

To make your selector more specific, you should target the ui-datepicker-week-end class on the <td> element, as well as any <a> elements with the class ui-state-default inside it. You can achieve this using the following CSS code:

.ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default {color:red;}

If you want to see a demonstration, you can test it here. In case you're interested, here is how the markup for a day cell looks like:

<td class="ui-datepicker-week-end">
  <a class="ui-state-default" href="#">DAY NUMBER</a>
</td>

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

Looking for assistance with a JQuery accordion component?

Struggling with integrating a JQuery accordion into my website. Despite following the correct steps, it's not functioning as expected. I have uploaded the site with some placeholder Lorem Ipsum text in the accordion. Any assistance would be highly app ...

Creating a Javascript function to perform a specific action based on the selected

I am facing some challenges with my webshop project and I would appreciate any help. The main issue I'm dealing with is setting up a select box that allows customers to choose different colors of a product. When a color is selected from the dropdown, ...

Encountering an issue while attempting to retrieve data from an API with JSON and AJAX

I've been attempting to retrieve data from an API using AJAX and JSON, but I keep encountering this error message: ReferenceError: Can't find variable: $ Global code Here is the HTML code that was utilized: <!DOCTYPE html PUBLIC "-//W3C/ ...

View the Outcome of the Latest Form Submission on a Fresh Page

I have created a form that stores input values in a database table. Now, I want to display these results on another page once the form is submitted. However, I am struggling with how to retrieve and display all the values from the database record on the ne ...

What is the process for translating symbols in a URL or text into hexadecimal characters? (e.g. changing = to %3D)

Currently, my script in use is extracting variables from URL parameters using jQuery. The value it retrieves happens to be a URL. For instance, if the URL is as follows: http://localhost/index.html?url=http://www.example.com/index.php?something=some the ...

Is there a way to confirm when all 3 html pages (panes) have been completely refreshed?

I have a webpage with 4 panes, each implemented as separate HTML pages. The last pane needs to perform an action when the previous 3 panes are refreshed. For instance, while the first 3 panes are refreshing, the last pane should display a "LOADING" message ...

Update the contents of a div element with JavaScript and PHP combo

When I click on the following div, I want to replace it with a similar one from file.php. The div tag in question is: <div style="display: none;" id="extra" class="container2" xml:id="page"> <div class="title"> <h2>Stuff to check out< ...

When using @RestController in the following code, the HTML file is not being returned properly in the REST API. Instead, only the file name such as 'index' is displayed on the screen

Having trouble getting the HTML file to return in the Rest API. Only returning the file name like 'index' when using @RestController, but works fine with @Controller. I am working on a Spring Boot REST application and utilizing index.html with Bo ...

Create a script in ASP.NET and jQuery that allows for the dynamic addition of rows with text boxes and drop-down menus

By utilizing jQuery, we can dynamically create a row (i.e. the row with 2 dropdown and textbox) above the row when the user clicks the add box attribute without any post back. Users will have the freedom to add as many attributes as desired, and they can ...

The next column featuring a dropdown menu

My goal is to make this sketch operational. The red elements in the sketch need to be programmed. Currently, I am using angularJS and bootstrap with the following code: <div class="col-md-6"> <div class="form-group"> <label&g ...

Aligning a div in relation to the background image

I am seeking guidance on how to center a Div Box and make it responsive relative to the background image. The div box should be contained within the white box, similar to the example shown here: body{ font-family: 'Roboto Mono', monospace; ...

PHP unable to capture POST data sent through AJAX utilizing FormData method

Trying to send basic data through JavaScript and PHP, but the PHP side is not picking up any data. The JavaScript code I'm using is as follows: var formData = new FormData(); formData.append("action", "save-game"); formData.append("title", title); ...

Retrieve the ID of a control triggered by the onKeyup event

I am looking to locate the ID of an input control. The following is the HTML CODE: <div id="product"> <div class="inputHolderOrder"> <p style="margin-bottom: 2px;">Product Name</p> <input type="text" id="pro ...

Is there a way to deactivate a JavaScript function on a specific webpage using CSS?

I've implemented a JavaScript function that triggers a pop-up alert whenever a user attempts to navigate away from the site by clicking on an external link: $("a[target='_blank']").click( function() { return confirm('Please don&apo ...

When attempting to retrieve text using xpath, Selenium will output "[]" as the result

After implementing an extension to validate the correctness of the xpath, I am facing an issue while trying to extract data using selenium. Despite having a supposedly correct xpath, when I print the variable containing the scraped xpath address, I only se ...

Methods for adjusting columns and rows in HTML5 tables

As I was preparing to create a compatibility guide, I noticed that the HTML code consisted of a table. While tables are effective for displaying data, they can be cumbersome to edit frequently. What tools are available to quickly and cleanly edit an exist ...

What causes the size of text to change when I zoom in my browser?

As I work on my website, I am facing a challenge with maintaining consistent text size as the page scales. For example: p { width: 10%; height: 10%; background-color: rgb(0,0,0); top: 50%; left: 50%; position: fixed; color: rgb(255,255,25 ...

Retrieve some delicious cookies by making an AJAX request

I have been attempting to retrieve cookies that were set at the backend following an AJAX post, and despite trying various solutions I have come across, I am still unable to find where I may be going wrong. Below is a code snippet for extracting headers f ...

An 'Syntax Error' message appears in Internet Explorer when JSONP does not receive a response

Our current application needs to retrieve information from another application, and this second application does not have to be active to respond to the JSONP request. In this case, the requester will receive an alert message informing them of this. funct ...

Adding a text stroke to the <input type="text"/> element

    Can anyone provide a solution for implementing text stroke in <input type="text"/> that works across all major browsers (Firefox, Google Chrome, Safari, Opera, IE7+)? Is there any method using CSS 2.1 or jQuery to achieve this effect? ...