JavaScript Content Scheduler

JavaScript can be used to schedule specific content within a web page for publishing during a period of time you specify. You tell the JavaScript when to begin publishing the content and when to end.

The thing about using JavaScript is that the time period you specify applies to the time as established by the site visitor's device or computer.

If you need content published according to your time zone, use PHP. But for the site visitor's time zone, JavaScript is the way to go.

To continue with that thought, a countdown to a holiday needs to be according to the site visitor's time zone. As an example, in order to publish an animated celebration at the minute a new year begins, it must be published according to the time of the site visitor, not your time. So, use JavaScript.

The JavaScript in this article was created to publish things according to the site visitor's time.

What is published during the specified time period is in a div with id="scheduled-content" (or other id value, which you will also update accordingly in the JavaScript.)

The div will have a CSS display:none; definition to hide the content. (The JavaScript will display the content according to your schedule.)

Here is code for such a div.

<div id="scheduled-content" style="display:none;">
This content to be published during the time period you specify.
</div>

The div may contain any content that a div can contain.

In the JavaScript, you specify the date and time to start. And you also specify the date and time to stop. The resulting time period, according to the site visitor's clock, is when the content is published.

The site visitor's clock can be used to dynamically assign a value by specifying the asterisk ("*") character for the value. Examples for specifying the start and stop times are published in the Specifying the Publishing Period section.

For testing various time periods, the date and time on the computer or device where the web page is being viewed the date and time, and/or time zone, may be temporarily changed.

But before you can test, you'll need the JavaScript source code to customize and install.

<script>
/*
JavaScript Content Scheduler
Version 1.0
March 7, 2021
Will Bontrager Software LLC
*/
/* Customizations */

// Specify the id value of the div to 
//   display only during the specified period.

var schdlr_div_display_id = "scheduled-content";

// Start point:
// For each time unit, specify the number 
//   representing the point in time related 
//   to that unit for starting the display 
//   of the div. Use "*" to represent the 
//   current point in time for that unit.

var schdlr_start_year = "*";
var schdlr_start_month = "*";
var schdlr_start_day = "*";
var schdlr_start_hour = "*";
var schdlr_start_minute = "*";
var schdlr_start_second = "*";

// Stop point:
// For each time unit, specify the number 
//   representing the point in time related 
//   to that unit for stopping the display 
//   of the div. Use "*" to represent the 
//   current point in time for that unit.

var schdlr_stop_year = "*";
var schdlr_stop_month = "*";
var schdlr_stop_day = "*";
var schdlr_stop_hour = "*";
var schdlr_stop_minute = "*";
var schdlr_stop_second = "*";

/* End of customization */
//////////////////////////
var schdlr_tm_base = new Date();
var schdlr_base_stamp = schdlr_tm_base.getTime();
if(schdlr_start_year=="*") { schdlr_start_year = schdlr_tm_base.getFullYear(); }
if(schdlr_start_month=="*") { schdlr_start_month = schdlr_tm_base.getMonth(); }
else { schdlr_start_month--; }
if(schdlr_start_day=="*") { schdlr_start_day = schdlr_tm_base.getDate(); }
if(schdlr_start_hour=="*") { schdlr_start_hour = schdlr_tm_base.getHours(); }
if(schdlr_start_minute=="*") { schdlr_start_minute = schdlr_tm_base.getMinutes(); }
if(schdlr_start_second=="*") { schdlr_start_second = schdlr_tm_base.getSeconds(); }
var schdlr_start_base = new Date(schdlr_start_year,schdlr_start_month,schdlr_start_day,schdlr_start_hour,schdlr_start_minute,schdlr_start_second);
var schdlr_start_stamp = schdlr_start_base.getTime();
if(schdlr_stop_year=="*") { schdlr_stop_year = schdlr_tm_base.getFullYear(); }
if(schdlr_stop_month=="*") { schdlr_stop_month = schdlr_tm_base.getMonth(); }
else { schdlr_stop_month--; }
if(schdlr_stop_day=="*") { schdlr_stop_day = schdlr_tm_base.getDate(); }
if(schdlr_stop_hour=="*") { schdlr_stop_hour = schdlr_tm_base.getHours(); }
if(schdlr_stop_minute=="*") { schdlr_stop_minute = schdlr_tm_base.getMinutes(); }
if(schdlr_stop_second=="*") { schdlr_stop_second = schdlr_tm_base.getSeconds(); }
var schdlr_stop_base = new Date(schdlr_stop_year,schdlr_stop_month,schdlr_stop_day,schdlr_stop_hour,schdlr_stop_minute,schdlr_stop_second);
var schdlr_stop_stamp = schdlr_stop_base.getTime();

function schdlr_CheckAndDo()
{
   var now_tm_base = new Date();
   var now_base_stamp = now_tm_base.getTime();
   var dispval = (now_base_stamp>schdlr_start_stamp && now_base_stamp<schdlr_stop_stamp) ? "block" : "none";
   document.getElementById(schdlr_div_display_id).style.display = dispval;
}

schdlr_CheckAndDo();
setInterval(schdlr_CheckAndDo,60000);
</script>

Customization —

There are 3 places to customize.

1. You have (or need to make one before proceeding, see further above) a div with content to publish only during a certain period. (See the subsequent customization steps for specifying that period.)

   The div has an id value.

   In the above JavaScript source code, you'll see this line.

   var schdlr_div_display_id = "scheduled-content";
   

   Replace scheduled-content with the id value of the div to display only during the specified period.

2. In the above JavaScript source code, you'll see these lines.

   var schdlr_start_year = "*";
   var schdlr_start_month = "*";
   var schdlr_start_day = "*";
   var schdlr_start_hour = "*";
   var schdlr_start_minute = "*";
   var schdlr_start_second = "*";
   

   Replace the asterisk of each time unit with the correct representation of the start time for that unit. In other words, replace the * for schdlr_start_year with the year to start the publishing period. Year number 2024 is an example.

   In some cases, the * can be left as is. See the Specifying the Publishing Period section.

3. In the above JavaScript source code, you'll see these lines.

   var schdlr_stop_year = "*";
   var schdlr_stop_month = "*";
   var schdlr_stop_day = "*";
   var schdlr_stop_hour = "*";
   var schdlr_stop_minute = "*";
   var schdlr_stop_second = "*";
   

   Replace the asterisk of each time unit with the correct representation of the stop time for that unit. In other words, replace the * for schdlr_stop_year with the year to stop the publishing period. Year number 2025 is an example.

   In some cases, the * can be left as is. See the Specifying the Publishing Period section.

After customizing, put the JavaScript into the source code of the web page with the div to be published during a certain time period.

The JavaScript may be way down on the page. Immediately above the </body> tag should work.

Specifying the Publishing Period

These starting and ending variables cause the content to publish tomorrow from 7 in the morning to 10 in the morning.

var schdlr_start_year = "2024";
var schdlr_start_month = "4";
var schdlr_start_day = "30";
var schdlr_start_hour = "7";
var schdlr_start_minute = "0";
var schdlr_start_second = "0";

var schdlr_stop_year = "2024";
var schdlr_stop_month = "4";
var schdlr_stop_day = "30";
var schdlr_stop_hour = "10";
var schdlr_stop_minute = "0";
var schdlr_stop_second = "0";

Any of those starting and stopping units of time may be replaced with an asterisk, the "*" character. When an asterisk is used, that particular unit of time is automatically assigned the corresponding value of the site visitor's device or computer time.

As an example, to have the above repeat every year, the year of the starting time and the year of the ending time both get an asterisk. Example:

var schdlr_start_year = "*";
var schdlr_start_month = "4";
var schdlr_start_day = "30";
var schdlr_start_hour = "7";
var schdlr_start_minute = "0";
var schdlr_start_second = "0";

var schdlr_stop_year = "*";
var schdlr_stop_month = "4";
var schdlr_stop_day = "30";
var schdlr_stop_hour = "10";
var schdlr_stop_minute = "0";
var schdlr_stop_second = "0";

To also have it repeat every month and every day, those time units get an asterisk.

var schdlr_start_year = "*";
var schdlr_start_month = "*";
var schdlr_start_day = "*";
var schdlr_start_hour = "7";
var schdlr_start_minute = "0";
var schdlr_start_second = "0";

var schdlr_stop_year = "*";
var schdlr_stop_month = "*";
var schdlr_stop_day = "*";
var schdlr_stop_hour = "10";
var schdlr_stop_minute = "0";
var schdlr_stop_second = "0";

Using the asterisk, publishing of certain content can be scheduled for every year, every month, and every day. Or even every hour if the minute units of time have starting and stopping values.

With or without using the asterisk character, the JavaScript content publication scheduler can publish content according to your site visitor's time.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager