Using JSON data to populate the jQuery UI Datepicker

Is it possible to populate this jQuery UI datepicker calendar with data from a JSON file containing all non-working days for the years 2017 and 2018?

P.S.

return [!(month == 8 && day == 27), 'highlight', highlight];
- This example demonstrates how dates can be highlighted in red color. I want to achieve the same functionality using a JSON file with multiple dates.

$(function() {
  $('#calendar').datepicker({
    dateFormat: 'yyyy/mm/dd',
    inline: true,
    firstDay: 1,
    showOtherMonths: false,

    beforeShowDay: function nonWorkingDates(date) {
      var highlight = nonWorkingDates[date];

      var month = date.getMonth() + 1;
      var day = date.getDate();
      var year = date.getFullYear();
      return [!(month == 8 && day == 27), 'highlight', highlight];
    }

  });
});
body {
  font: bold 14px Arial;
}

#wrapper {
  padding: 50px 0 0 325px;
}

#calendar {
  margin: 25px auto;
  width: 370px;
  height:
}
/* CSS styles removed for brevity */

<!DOCTYPE html>
...

Answer №1

Utilize the JSON data and incorporate either the $.inArray() or .indexOf() function to verify if the specified date is present within the array.

The JSON content (dates.json) is as follows:

[
  "2018-08-23T00:00:00.000Z",
  "2018-08-09T00:00:00.000Z",
  "2018-08-06T00:00:00.000Z"
]

Below is the Javascript code snippet provided for your reference:

$(document).ready(function() {
  $.get("dates.json").then(function(data) {
    dates = [];
    data.forEach(function(i,v){
      dates.push((new Date(i)).setHours(0,0,0,0).valueOf());
    })
    $('#calendar').datepicker({
      dateFormat: 'yyyy/mm/dd',
      inline: true,
      firstDay: 1,
      showOtherMonths: false,

      beforeShowDay: function nonWorkingDates(date) {
        var highlight = nonWorkingDates[date];
        return [$.inArray(date.valueOf(),dates) + 1, 'highlight', highlight];
      }
    });
});

End of script.

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

Having a problem with the xmlhttprequest, not confident if it is being called correctly

I encountered a problem with the code I have where a user selects a sales center and it should trigger a currency change. Both selections are dropdowns, but when I choose a sales center, I receive an error saying ReferenceError: makeRequest is not define ...

Update data in PHP dynamically without reloading the page

It would be great if they are doing well! I have encountered a minor issue - everything seems to work perfectly, but it doesn't quite meet my requirements. I am referring to this particular function: <script> var previous = null; var current = ...

Arrange the current div elements by utilizing jQuery sortable within an HTML document

Here is the HTML file I am working with: <div id="sortable"><div id="div1">Item 1</div> <div id="div2">Item 2 </div></div> I have successfully applied jQuery sortable to the div with id "sortable" and was able to sort ...

Pins missing from Google Maps API display

TLDR: The problem lies within the var marker = new google.maps.Marker() line. It seems that either the pins are not visible, incorrect, or simply not appearing. Background: I have implemented some JavaScript code that utilizes AJAX to fetch data on the ...

How to achieve a successful response with Ajax and jQuery?

I'm currently working on practicing data retrieval through an API using jQuery. After watching a few YouTube tutorials, I still can't seem to get a successful response... it's quite frustrating. Aside from YouTube, I'm also a subscribe ...

Tips for stopping the navigator from adding content to an HTML input in an Angular application

I am facing an issue with two input fields in my Angular project. These fields are supposed to take values automatically from the browser, and I have tried using the HTML autocomplete option without success. Here is a snippet of my HTML code: <div clas ...

"An unexpected compilation error (800A03EA) has occurred in the JavaScript syntax during

My computer is facing a frustrating compilation issue with JScript and node. Despite trying various solutions found online, the problem persists. After navigating to CD>PROJECT: npm init successful npm install -g globally and locally installed corr ...

Error encountered when deploying the app to the live server: 500 Internal Server Issue

I am encountering an issue with my ASP.Net web app's ajax file upload feature. While it works perfectly on my local host machine during testing, I face a 500 Internal Server error when I try to publish it to a website. The console output in Google Chr ...

Exploring the Depths of NodeJS X-Ray Web-Scraper: Uncovering Hidden Gems within Sub Pages

Currently, I am attempting to scrape content using the node.js x-ray scraping framework. While I have successfully retrieved data from a single page, I am struggling with navigating through links and extracting content from subpages simultaneously. Althou ...

Tips for eliminating the glowing effect when pressing down on the thumb of the material ui slider

Visit Material-UI documentation for Slider component. Despite setting the disabled flag for the entire slider, the thumb continues to show a halo effect when clicked. ...

Path taken to reach the view requested by Node.js server

Snippet of Controller Code: bina: function(req, res) { var request = require('request'); request({ url: 'http://localhost:3000/bina/', method: 'GET', }, function(err, res, body) { ...

ChakraUI ForwardRef in React not applying variant to child component

Encountering an issue with the combination of forwardRef and Input from ChakraUI. Attempting to create a generic input component with a flushed variant, but facing difficulty as Chakra keeps resetting it back to default. ModalInput Component import { for ...

Attempting to extract only the text content from a specific div using XPath

I am currently facing a challenge in writing a script to extract the title element from a poorly coded webpage. The developer who created this website did not use any classes, only div elements. Below is a snippet of the source code I am trying to scrape: ...

Bootstrap Popover not displaying information after an AJAX request

I'm struggling to update the popovers contents with Ajax result in my ASP.Net MVC4 project. Using ASP.Net (MVC4): public ActionResult GetEmployeeDetails(string employeeId) { var contract = UnitOfWork.ContractRepository.ContractBu ...

Exploring the functionality of v-chips within a v-text-field

I am trying to implement a search text field using vuetify's v-text-field, and I want to display the user input in a chip (such as v-chip or v-combo-box). However, v-text-field does not seem to support chips based on the documentation. Is there a work ...

Does Jquery AJAX send back raw data or HTML ready for use?

I'm currently developing a mobile app using Jquery Mobile. In order to populate the app with data, I need to make requests to an API and display the information within the app. At this point, I have two possible options: The API returns JSON data ...

Encountered an Unhandled Runtime Error in NextJs: Invalid Element Type

Attempting to build an Instagram clone following a YouTube tutorial from a year ago has led to various errors arising from nextjs14. I have managed to resolve all of them except for one particular issue: Error: Element type is invalid - expected a string ...

Find the dominant color within the project's style sheets

Is there a method to extract the main color from an angular material theme and apply it in the css files of an angular project? Within a project, we can specify the primary color in a *.scss document as shown below: @import '~@angular/material/themi ...

Database entry does not appear in Internet Explorer until the browser is completely shut down and reopened

Currently, I have a form with two dropdowns. Selecting an option from the first dropdown automatically populates the second dropdown. Everything works well except for a minor issue I observed recently. When I add a new item to the second dropdown, it gets ...

How to Overlay a Semi-Transparent Object on a Background Video using CSS and HTML

Hey there, I'm encountering a puzzling issue with my website. I have a background video set up, and I wanted to overlay a floating textbox on top of it. However, no matter what I do, the background color and borders of the textbox seem to be hiding be ...