DOM Calendar

Display dates as specified

• For today's date show
  • day of the week in English
  • month in English
  • day of the week in French
  • month in French

The phrase:

let today = new Date()

sets the variable today to today's date The function toLocaleDateString takes an options object. You can set:

• weekday to long short narrow
• month to long short narrow
• the first parameter can be a language such as "en", "fr", "de", "zh"

let today = new Date();
document.body.innerHTML = `
${today.toLocaleDateString('en',{weekday:'long'})} <br>
${today.toLocaleDateString('en',{weekday:'short'})} <br>
`;

let today = new Date();
document.body.innerHTML = `
${today.toLocaleDateString('en',{weekday:'long'})} <br>
${today.toLocaleDateString('en',{month:'long'})} <br>
${today.toLocaleDateString('fr',{weekday:'long'})} <br>
${today.toLocaleDateString('fr',{month:'long'})} <br>
`;

Show 7 days from now

The method getTime() gives the number of millseconds since a fixed date (1st Jan 1970).

If you want to add one day you must add 86400000 milliseconds, this is 1000*60*60*24

//This gives the number of milliseconds since 1st Jan 1970
let n = new Date().getTime();
for(let i=-3; i<3; i++){
  //One day has 1000*60*60*24 milliseconds
  let dy = new Date(n + 1000*60*60*24*i);
  let d = document.createElement('div');
  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});
  document.body.append(d);
}

let n = new Date().getTime();
for(let i=0; i<7; i++){
  let dy = new Date(n + 1000*60*60*24*i);
  let d = document.createElement('div');
  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});
  document.body.append(d);
}

Show 7 days from the first of this month

You can find the first of this month...

• Get today's date
• Use first.setDate(1) to set the day of the month

let first = new Date();
let n = first.getTime();
for(let i=0; i<7; i++){
  let dy = new Date(n + 1000*60*60*24*i);
  let d = document.createElement('div');
  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});
  document.body.append(d);
}

let first = new Date();
first.setDate(1);
let n = first.getTime();
for(let i=0; i<7; i++){
  let dy = new Date(n + 1000*60*60*24*i);
  let d = document.createElement('div');
  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});
  document.body.append(d);
}

Show the last 7 days of last month

You can find the first of this month...

• Get the first of this month
• Subtract 7 days

let first = new Date();
let n = first.getTime();
for(let i=0; i<7; i++){
  let dy = new Date(n + 1000*60*60*24*i);
  let d = document.createElement('div');
  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});
  document.body.append(d);
}

let first = new Date();
first.setDate(1);
let n = first.getTime() - 1000*60*60*24*7;
for(let i=0; i<7; i++){
  let dy = new Date(n + 1000*60*60*24*i);
  let d = document.createElement('div');
  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});
  document.body.append(d);
}

Show the first Sunday of this month

You can find the first Sunday of this month...

• Get the first of this month
• If that day is Sunday do nothing
• Add 7 - dayNumber

let sun = new Date();
sun.setDate(1);
if (sun.getDay() === 0){
  //The first happens to be a Sunday, do nothing
}else{
  sun = new Date(sun.getTime() + 1000*60*60*24 * (7-sun.getDay()));
}
let n = sun.getTime();
for(let i=0; i<7; i++){
  let dy = new Date(n + 1000*60*60*24*i);
  let d = document.createElement('div');
  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short',weekday:'short'});
  document.body.append(d);
}

Show the week thaht includes the first Monday of this month

let mon = new Date();
mon.setDate(1);
mon = new Date(mon.getTime() - 1000*60*60*24 * mon.getDay());
let n = mon.getTime();
for(let i=0; i<7; i++){
  let dy = new Date(n + 1000*60*60*24*i);
  let d = document.createElement('div');
  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short',weekday:'short'});
  document.body.append(d);
}