Setting a class for a specific date on a jQuery UI calendar using the MultipleDates plugin

I recently encountered an issue with the Multiple Dates picker for jQuery UI date picker. It seems that the developer who created it has not updated it in quite some time, resulting in pre-highlighting dates no longer functioning properly. To address this problem, I've devised a plan to store the dates that need to be highlighted in an array and then utilize jQuery to apply the necessary class to the calendars. However, I've hit a roadblock on how to specifically target the anchors with the following structure:

<td class=" ui-datepicker-week-end  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="10" data-year="2017">
<a class="ui-state-default" href="#">18</a> <!-- needs class: ui-state-active-->
</td>

My question is, how can I single out elements based on their data attributes such as data-month, data-year, and the number within the anchor tag? Any assistance on this matter would be highly appreciated!

javascriptjquerycssjquery-ui

Answer №1

Activate the function using the beforeShowDay event.

LATEST: (source within)

Answer №2

To extract the content within the anchor tag, jQuery selectors can be utilized to refine the search using the month and year.

Subsequently iterate through all the days in that specific month and year, employing the find() method on the anchor element to retrieve the day. Compare the calendar date to the date stored in your array and if they correspond, highlight it accordingly.

Below is a sample code snippet, though its performance and scalability are uncertain:

$(document).ready(function() {
  var myDates = ["10/18/2017", "10/20/2017"];
  myDates.forEach(function(dateString) {
    var date = new Date(dateString);
    var currMonth = date.getMonth() + 1;
    var currYear = date.getFullYear();
    var currDay = date.getDate();

    var $monthYear = $(`td[data-month='${currMonth}'][data-year='${currYear}']`);
    $monthYear.each(function(i, elem) {
      var calendarDay = $(elem).find("a").text();
      var currDate = `${currMonth}/${calendarDay}/${currYear}`;
      if (dateString === currDate) {
        $(elem).addClass("highlight");
      }
    });
  })
})
.highlight {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class=" ui-datepicker-week-end  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="10" data-year="2017">
      <a class="ui-state-default" href="#">18</a>
      <!-- needs class: ui-state-active-->
    </td>

    <td class=" ui-datepicker-week-end  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="10" data-year="2017">
      <a class="ui-state-default" href="#">19</a>
      <!-- needs class: ui-state-active-->
    </td>

    <td class=" ui-datepicker-week-end  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="10" data-year="2017">
      <a class="ui-state-default" href="#">20</a>
      <!-- needs class: ui-state-active-->
    </td>
  </tr>
</table>

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

What makes components declared with "customElements.define()" limited in their global usability?

I've been tackling a project in Svelte, but it involves some web components. The current hurdle I'm facing is with web components defined using the customElements.define() function in Typescript, as they are not accessible unless specifically im ...

javascripttypescriptsvelteweb-component

Reducing the Distance Between Columns in Bootstrap 4

I am currently working on embedding two websites onto my own website. The idea is to showcase these websites side by side within a custom-sized iframe that adjusts responsively based on the viewport size. To achieve this, I am utilizing Bootstrap 4's ...

htmlcssbootstrap-4

An SQL query that functions flawlessly in STUDIO 3T, yet fails to execute in Express.js

I encountered a puzzling situation where a query that functions perfectly in STUDIO 3t fails to retrieve any data in express js. Below is the code comparison: STUDIO 3t Query: db.getCollection("tickets").find({ $and: [ {"TCKT_CRTE_DTTM" : { ...

javascriptnode.jsmongodbexpress

Performing two simultaneous AJAX requests using tokeninput

I've been playing around with the tokeninput plugin and it's been working really well for me. However, I recently came across a new requirement - I need to make two separate ajax calls on the same input bar. Situation: My input bar is as follows ...

javascriptjqueryajaxjquery-tokeninput

"An error message stating 'Express: The body is not defined when

I'm encountering an issue while trying to extract data from a post request using express. Despite creating the request in Postman, the req.body appears empty (console.log displays 'req {}'). I have attempted various solutions and consulted s ...

javascriptnode.jsexpress

Customize the jQuery Datepicker to show the date in a format without the year, while utilizing

I am exploring how to utilize the jQuery datepicker tool to display only the Day, Month, and Date to the user, similar to this: Fri. Aug. 24 However, in the background, I need to keep track of the year. To achieve this, I attempted to use the altField ...

jqueryjquery-ui

Having trouble with Javascript in getting one-page scroll navigation to work?

Hey there, I am working on creating a one-page scroll navigation with some basic javascript to add a smooth animation effect that takes 1 second as it scrolls to the desired section. However, I seem to be experiencing an issue where it's not functioni ...

javascriptjqueryhtmlcss

Is it possible for the relative path of a gif image to become invalid when added to a div?

Question Context: In the view, I have a form that will show a loading 'spinner' gif when a user submits it. The Problem: If I place the spinner img element within its container div, the spinner is always displayed, which is not desired: https ...

javascriptjqueryhtmlasp.net-mvcrazor

Unable to access variable using GET method, however able to retrieve it using var_dump($_GET)

I am attempting to create a simple AJAX call that passes a variable and displays it in a modal. The passing of the variable is successful, however, I am unable to retrieve the variable from the GET method. When using echo var_dump($_GET);, I get: array(2 ...

phpjqueryajax

Managing multiple URLs in a MEAN Stack application

Currently, I'm working on a MEAN stack project to implement a CRUD system for managing courses. One specific aspect that is giving me trouble is figuring out how to handle unique URLs for each course I create. As of now, I am using routeprovider for t ...

javascriptangularjsnode.jsexpressmean-stack

Updating a document using the nano module in CouchDB is not supported

I am currently utilizing the Node.js module known as nano Why is it that I am unable to update my document? I need to set crazy: true and then change it back to false. This is the code I have: var nano = require('nano')('http://localhost ...

javascriptnode.jscouchdbcouchdb-nano

What causes useEffect to trigger twice when an extra condition is included?

Attempting to create a countdown timer, but encountering an interesting issue... This code triggers twice in a row, causing the useEffect function to run twice per second. 'use client' import {useState, useEffect, useRef} from 'react' ...

javascriptreactjsnext.js

Trigger a notification based on the selected choice

Here is some sample HTML code: <div id="hiddenDiv" style="display: none;"> <h1 id="welcomehowareyou">How are you feeling today?</h1> <select name="mood" id="mood"> <option value="" disabled selected>How are you feeling?</o ...

javascriptphphtml

Exploring Angular 8 HTTP Observables within the ngOnInit Lifecycle Hook

Currently, I am still a beginner in Angular and learning Angular 8. I am in the process of creating a simple API communication service to retrieve the necessary data for display. Within my main component, there is a sub-component that also needs to fetch ...

javascriptangulartypescriptrxjs

Transferring data between different elements in a React application

I am currently learning React and facing some challenges in terms of passing data between components. Even after reviewing various tutorials and blogs, I am still struggling to make things work. Within my project, I have two child components named Body-c ...

javascriptreactjs

Deactivate a span in real-time using ng-model

I found a helpful guide on creating a custom editable <span> using ngModelController here: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#example Now, I am looking to implement a feature that allows me to dynamically disable editin ...

javascriptangularjsangular-directive

There appears to be an issue with displaying the graph

I am having trouble understanding how to transfer the values entered in the input to the graph that is displayed successfully. Although the update seems correct, nothing changes when I try to update it and the data remains stagnant. Page.vue <script&g ...

javascriptvue.jsvuejs2chart.js

How can you animate a CSS fill effect from the border outward?

I've been struggling to find an answer to this seemingly simple question online. Can anyone explain how to animate a fill-in with a specific color of an element, starting at the border? For example, the border expands gradually until the entire shap ...

htmlcsswebcss-animations

Exploring the world of HTML5 speed testing: getting started

Can anyone provide guidance on how to begin with an HTML5 bandwidth test? I am trying to replicate a flash-based version and any recommendations would be greatly appreciated. ...

javascripthtml

Creating a Dual Linear Gradient Background with Tailwind: Step-by-Step Guide

Can you use two linear backgrounds on a single element in Tailwind CSS? I found this CSS code that seems to achieve it: background-image: linear-gradient(to right, #f8fafb 50%, #161616 50%), linear-gradient(to right, #161616 50%, #f8fafb 50%); I att ...

cssbackgroundbackground-imagetailwind-csslinear-gradients