Question 201088 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – change page content on weekly basis every monday

I own a small restaurant and am trying to display the weekly lunch menu on my website.
Right now there is only one permanent menu showing on the website but i would like to create a rotation of 4 menus for each week of the month. The menus are images and i want to only display one of them each week starting monday.
Basically i have 4 images and i want to display 1 one of them (through a loop maybe?) every week starting monday.
I have a basic understanding in javascript and my website is made with wordpress.

all and any suggestions are appreciated 🙂

I tried googling a way to display content based on date but couldnt understand how the date() method works. another issue was figuring out how to pinpoint monday out of the weekdays.

Tags:

2

Answers


  1. 0

    I don’t suggest using only the client to handle this but if it’s simply changing images, we can set an origin Monday and then calculate the weeks after that.
    Every time the page loads we will get number of the weeks from the origin time up to now, we then can use that number to choose an index of our image sources.
    This is my solution:
    HTML:

    <img id='menu' src='src-first'/>

    Javascript:

    const imageSources = ["src-first", "src-second", "src-third", "src-fourth"];

const weeksFromOriginMonday = () =>{
  const weekMiliSeconds = 7 * 24 * 60 * 60 * 1000
  const lastMonday = new Date();
  lastMonday.setDate(lastMonday.getDate() - 2); // today is 2 days after last monday
  lastMonday.setHours(0, 0, 0, 0); // set the time to 00:00 am

  const milisecondsFromOriginTime = Date.now() - lastMonday.getTime() ;

  return Math.floor(milisecondsFromOriginTime / weekMiliSeconds)
}
const weeks = weeksFromOriginMonday()
const indexOfImageSources = weeks % imageSources.length
console.log(imageSources[indexOfImageSources])
imgElement.src = imageSources[indexOfImageSources]
    Login or Signup to reply.
  2. 0

    Handling dates in JS difficult due timezone offsets and daylight time savings which are dynamic and change by governments, but for non-critical cases (not medical or financial) you could get your week index using the reminder operator from day count from the Unix epoch start. Then you can adjust the index to any offset you like and get an image from an image array of length 4.

    for(let i = 1; i <= 31; i++){
  const dt = new Date('2023-07-' + i.toString().padStart('0', 2));
  const index = getWeekIndex(dt);
  console.log(dt.toDateString(), ':', index);
}

function getWeekIndex(dt, range = 4){
  
  dt = structuredClone(dt);
  
  let dayOffset = dt.getDay(); 
  dayOffset = dayOffset === 0 ? 6 : dayOffset - 1;
  dt.setDate(dt.getDate() - dayOffset);

  //console.log(dt.toDateString({format:'full'})); // we shold have monday here

  // get number of days from 1970 in local time
  const day = (new Date(dt.toDateString()).getTime()/60/1000 - (dt.getTimezoneOffset()))/60/24;

  //console.log('number of days:', day);

  // get your index from 0 to range - 1
  return Math.floor((day % (7 * range)) / 7);
  
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search