Emphasize specific dates on the jQuery UI calendar using a range selector

I am looking for a jQuery UI calendar that has an inline date range selector and the ability to highlight or disable specific dates.

You can find my code example here

Currently, I have a range selector set up, but all dates appear normal. What I need is to be able to color the current date (e.g., 16/03/2018) in red and all other dates in green.

In a standard jQuery calendar without the range selector feature:

beforeShowDay: function (date) {
var ddmmyy = $.datepicker.formatDate('dd/mm/yy', date)
if ($.inArray(ddmmyy, dates) >= 0) return [false, 'gior-occ', " "];
return [true];
}

However, as you can see in my jsfiddle, I already have a beforeShowDay option selected. Any suggestions on how to achieve the desired coloring?

jquerycssjquery-ui

Answer №1

Your inquiry doesn't specify if you desire the dates in the dates Array to consistently be unselectable with a red border, or only after an initial selection is made. Given the details provided and the example code available, I will assume the former scenario.

To achieve this outcome, you should (1) relocate the dates array within your beforeShowDay initialization function and (2) refine the function as shown below:

function dateRange(date){
   var dates = ['16/03/2018'];
   var ddmmyy = $.datepicker.formatDate('dd/mm/yy', date);
     if ($.inArray(ddmmyy, dates) >= 0) {
    return [false, 'gior-occ', " "];
   }

   var date1 = $.datepicker.parseDate("MM d, yy", $("#checkinDate").text());
   var date2 = $.datepicker.parseDate("MM d, yy", $("#checkoutDate").text());
   var isHighlight = date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2));

   return [true, isHighlight ? "dp-highlight" : ""];
}

This adjustment, along with a minor correction to your CSS (the missing leading period . before your gior-occ rule resulted in it being applied as an element rule rather than a class rule), now ensures that the gior-occ class rule is properly applied to dates present in the dates Array.

You can view the updated version on JSFiddle: https://jsfiddle.net/upmf7f8y/7/

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

Using jQuery to set cookies for multiple domains

I am trying to set a cookie for a domain that should also be accessible for a subdomain. For example, www.mydomain.com and sub.mydomain.com However, when I set the cookie for the main domain, it does not seem to work for the subdomain. I am using the jQu ...

javascriptjquerycookiessetcookie

The small device screen in Bootstrap 4.5 is experiencing an issue where two rows are overlapping

I recently started learning Bootstrap and encountered an issue. When resizing the browser screen to a smaller size, I noticed that the rows within separate containers were overlapping. Screenshots have been provided for reference. Can someone please guide ...

javascripthtmlcssbootstrap-4

Having trouble with SVG background image not displaying properly and positioning correctly?

I need help fitting an svg as a background into an element that is 80% of the screen width. Here is the desired final result: https://i.sstatic.net/LhybR.png The svg effect only works correctly when I reduce the width, but then it breaks in two. I want ...

htmlcss

Make the first child element of the list item have an active state

Looking to consistently set the first-child parameter to the <li> that has the active class within a <ul> <li> setup. Can anyone offer guidance? ...

jquery

Tips for shifting a stuck div 200px upward once the bottom of the page is reached while scrolling:

I've set up a page layout with two columns, one fixed and the other scrollable. The left column is fixed (containing Google ads) and stays in place as I scroll down the page. The right column displays posts and scrolls along with the rest of the con ...

javascriptjqueryhtmlcssposition

Image resizing on the fly

Can dynamic image resizing be achieved through CSS or does it require HTML coding? ...

htmlcssimage

How to replicate the content of a <template> tag using jQuery

Is there a way for me to clone the content of a tag using jQuery without losing the events associated with the child elements? ...

javascriptjquerytemplatesclone

Can a nested key be assigned within another key in a JSON document?

I am wondering if it is possible to nest a key within another key in JSON. If so, how would I go about accessing this nested key using jQuery? Below is an example of my code: { "product": [{ "category": "Clothing", "items": [{ ...

jqueryjsonlistkeykey-value

What is the best way to center a div at the bottom of the screen?

Here is an example of CSS: #manipulate { position:absolute; width:300px; height:300px; background:#063; bottom:0px; right:25%; } And here is the corresponding HTML: <div id="manipulate" align="center"> </div> What is the best w ...

htmlcss

JavaScript - Uncaught TypeError: type[totypeIndex] is not defined

After following a tutorial and successfully completing the project, I encountered a JavaScript error saying "Uncaught TypeError: totype[totypeIndex] is undefined". When I tried to log the type of totype[totypeIndex], it initially showed as String, but late ...

javascripthtmlcssundefined

Using Jquery to alter elements during every iteration loop

With the help of jquery, my goal is to iterate through all elements that belong to the "item" class and give them different background colors based on their index position. The array mapcolor contains a variety of colors (with a length matching the number ...

jqueryloopseachselector

Creating a dynamic search bar with multiple input fields in HTML

My JSON input for typeahead looks like this: [{"q": "#django", "count": 3}, {"q": "#hashtag", "count": 3}, {"q": "#hashtags", "count": 0}, {"q": "#google", "count": 1}] This is the code I have to implement typeahead functionality: var hashTags = new Blo ...

javascriptjquerytypeahead.js

Is it possible to position a div relative to a div outside of its parent?

Can a div be positioned relative to another div that is not its parent? Consider this scenario: <div id="header"><!-- --></div> <div id="content"><!-- --></div> <div id="footer"><<!-- --></div> In ...

jqueryhtmlcss

Enhance jQuery event handling by adding a new event handler to an existing click event

I have a pre-defined click event that I need to add another handler to. Is it possible to append an additional event handler without modifying the existing code? Can I simply attach another event handler to the current click event? This is how the click ...

javascriptjqueryevents

The Google Docs viewer is displaying an empty screen

I have been utilizing the Google Docs viewer on my website: <div class="embed-r embed-responsive-a"> <iframe class="embed-responsive-it" src="https://docs.google.com/viewer?embedded=true&amp;url=http://LINK.PDF"></iframe> </div& ...

javascripthtmlcsspdfgoogle-docs

Using jQuery does not automatically pre-check multiple checkboxes. This issue may arise when using PHP and AJAX together

I'm attempting to dynamically check multiple checkboxes based on previous entries from a MySQL database. I have the data stored in a variable: var = ObjektLevHur; The potential data values are: frittlev, frittfabrik, or mont. When I make my first sele ...

javascriptjqueryhtml

Can you explain the distinction between using $.ajax and $.post in jQuery?

Within my project, there are both calls made using $.ajax as well as some utilizing $.post. I am under the impression that these two types of calls are essentially identical! Can anyone confirm if this understanding is accurate? ...

phpjqueryajaxpost

C#: Issues with loading static content in MVC on various environments with IIS

Within my C# MVC 4.5 Website, I recently introduced a new folder to host CMS-type applications separately from the main site. While everything seemed fine during local testing, issues arose after deploying the updates to the DEV environment. A closer look ...

c#cssasp.netasp.net-mvciis

Adding and adjusting the size of different DIV elements within a shared area

Looking to create a dynamic bar with the ability to add multiple child DIVs (similar to this: https://i.stack.imgur.com/tdWsq.jpg). Utilizing jQuery, jQuery UI, Bootstrap, and various plugins. The structure for the div (or span) system could be structured ...

javascriptjqueryhtmlresize

Display two examples from the material-ui documentation

My goal is to merge two demos found in the material-ui documentation. Clipped under the app bar - Describes a page layout Fixed header - Illustrates a table with a fixed header. I am looking for a solution where the table occupies the entire available p ...

cssreactjsmaterial-ui