DOM Calendar

1) 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 toLocalDateString 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"

Input

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

xxxxxxxxxx

 

1

let today = new Date();

2

document.body.innerHTML = `

3

${today.toLocaleDateString('en',{weekday:'long'})} <br>

4

${today.toLocaleDateString('en',{weekday:'short'})} <br>

5

`;

6

​

Go reset

Output

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>
`;

2) Show 7 days from now

Input

let n = new Date().getTime(); for(let i=-3; i<3; 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); }

xxxxxxxxxx

 

1

let n = new Date().getTime();

2

for(let i=-3; i<3; i++){

3

  let dy = new Date(n + 1000*60*60*24*i);

4

  let d = document.createElement('div');

5

  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});

6

  document.body.append(d);

7

}

8

​

Go reset

Output

let n = new Date().getTime();
for(let i=-3; i<3; 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 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);
}

3) 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

Input

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); }

xxxxxxxxxx

 

1

let first = new Date();

2

let n = first.getTime();

3

for(let i=0; i<7; i++){

4

  let dy = new Date(n + 1000*60*60*24*i);

5

  let d = document.createElement('div');

6

  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});

7

  document.body.append(d);

8

}

9

​

Go reset

Output

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);
}

4) 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

Input

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); }

xxxxxxxxxx

 

1

let first = new Date();

2

let n = first.getTime();

3

for(let i=0; i<7; i++){

4

  let dy = new Date(n + 1000*60*60*24*i);

5

  let d = document.createElement('div');

6

  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});

7

  document.body.append(d);

8

}

9

​

Go reset

Output

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);
}

5) 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

Input

1

 

1

​

Go reset

Output

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);
}