javascript Display auto-updating "Now booking through [January, February, March, etc.]" on homepage

Site URL: https://alpinechaletco.com

Hi there,

I searched and couldn't find something I could MacGuyver into what I need, so I thought I'd ask:

Is there a way to have some text on the homepage update a month's name automatically? Our calendar books 300 days out, and I'm updating an H3 field every month manually: "Now booking through [November 2022, December 2022, etc.]"

It would be great to plug a variable for "# of days from now" somewhere and have the output be:

• in English (e.g. December 1984)
• matching the site style
• smart enough to give just the day, month, and year (and not minutes or some confusing detail)
• with the option to hide M D or Y, if needed.

An example of what I'm doing already is just above the booking widget and calendar ribbon on our page.

Thanks in advance for any assistance you may provide!

On 2/7/2022 at 1:32 PM, jpeter said:

@Malcolm-in-SF

You can add the following JS using Code Injection in the footer.

The following variables are available to configure in the JS code below:

• INITIAL_TEXT
  • The initial heading text that the date will be appended to
• DAYS_FROM_NOW
  • The number a days from todays date
• DAYJS_FORMAT
  • Uses DayJS formatting pattern to output Month Day, Year. Remove/add what you need.

(function(){

  // Configuration variables
  var INITIAL_TEXT = 'Now booking through';
  var DAYS_FROM_NOW = 300;
  var DAYJS_FORMAT = 'MMMM DD, YYYY';

  // Get the block with the ID we're targeting
  var block = document.querySelector('#block-yui_3_17_2_1_1643896438475_6721');
  
  // Get the H3 element within the block
  var h3 = block && block.querySelector('h3');
  
  // Load in DayJS library, https://day.js.org/, as long
  // as the block and the h3 exist on the page
  if(block && h3) {
    var s = document.createElement('script');
    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/dayjs.min.js';
    s.onload = updateText;
    document.body.appendChild(s);
  }
  
  // Update content of H3.  
  function updateText() {
    var d = new Date(Date.now() + DAYS_FROM_NOW * 24 * 60 * 60 * 1000);
    var date =  dayjs(d).format(DAYJS_FORMAT);
    h3 && (h3.textContent = INITIAL_TEXT + ' ' + date);
  }
})()

Make sure you place the JS code between <script> tags e.g.:

<script>
  // Place JS Code Here
</script>

Here's a working example:

 

 

Thanks for the answer. I was searching for it for my friend. He wants to know how to add the following JS using Code Injection in the footer. I was searching for the motor parts business plan online and while searching for it online, I have found your post.

On 2/7/2022 at 12:02 AM, jpeter said:

@Malcolm-in-SF

You can add the following JS using Code Injection in the footer.

The following variables are available to configure in the JS code below:

• INITIAL_TEXT
  • The initial heading text that the date will be appended to
• DAYS_FROM_NOW
  • The number a days from todays date
• DAYJS_FORMAT
  • Uses DayJS formatting pattern to output Month Day, Year. Remove/add what you need.

(function(){

  // Configuration variables
  var INITIAL_TEXT = 'Now booking through';
  var DAYS_FROM_NOW = 300;
  var DAYJS_FORMAT = 'MMMM DD, YYYY';

  // Get the block with the ID we're targeting
  var block = document.querySelector('#block-yui_3_17_2_1_1643896438475_6721');
  
  // Get the H3 element within the block
  var h3 = block && block.querySelector('h3');
  
  // Load in DayJS library, https://day.js.org/, as long
  // as the block and the h3 exist on the page
  if(block && h3) {
    var s = document.createElement('script');
    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/dayjs.min.js';
    s.onload = updateText;
    document.body.appendChild(s);
  }
  
  // Update content of H3.  
  function updateText() {
    var d = new Date(Date.now() + DAYS_FROM_NOW * 24 * 60 * 60 * 1000);
    var date =  dayjs(d).format(DAYJS_FORMAT);
    h3 && (h3.textContent = INITIAL_TEXT + ' ' + date);
  }
})()

Make sure you place the JS code between <script> tags e.g.:

<script>
  // Place JS Code Here
</script>

Here's a working example:

 

 

Thanks so much for your help with this!

Got it up and running on alpinechaletco.com

🙂