Bllocking out dates from calendar using a Json feed
-
Hi,
I am attempting to use date data from a Json feed to block out the dates on a Wp Form calendar date picker, as in this example –
https://wpforms.com/developers/customize-the-date-time-field-date-options/Currently I am using the set dates-
from: “2022-06-10”,
to: “2022-06-30”from: “2022-08-28”,
to: “2022-09-20″I would like to replace these dates with dates I am pulling in from a Json feed.
The feed is here – https://www.jonnyrossmusic.com/json-test/
The first date in a row has the handle ‘date” and the second date has the handle ‘endDate’
The code we have devised is as follows, but this is not working. Please advise if you are able to provide a solution, many thanks.
<php? function wpf_limit_date_picker() { ?> <script type="text/javascript"> fetch('poo.json') .then(function (response) { return response.json(); }) .then(function (data) { appendData(data); }) .catch(function (err) { console.log('error: ' + err); }); function appendData(data) { var mainContainer = document.getElementById("myData"); var d = new Date(); window.wpforms_datepicker = { disableMobile: true, // Don't allow users to pick specific range of dates disable: [ { from: + data[i].date, to: + data[i].endDate }, { from: "2022-08-28", to: "2022-09-20" } ] } for (var i = 0; i < data.length; i++) { var div = document.createElement("div"); div.innerHTML = 'date: ' + data[i].date + ' ' + data[i].endDate; mainContainer.appendChild(div); } } </script> <?php } add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker', 10 );
The page I need help with: [log in to see the link]
- The topic ‘Bllocking out dates from calendar using a Json feed’ is closed to new replies.