Multiple div's HELP

Hi!
I can not get this working. And hope for someone to help me out.
I have a calendar made in js and it shows up in the div “days” with .document.querySelector(".days");
How can I make it show in two div’s? like days1 and days2, for example.
I have tryed with document.querySelectorAll , but not got it to work.
Please anyone??

This is index.html:

Calendar

Sun

Mon

Tue

Wed

Thu

Fri

Sat

<script src="script.js"></script>

This is script.js:

const date = new Date();


const renderCalendar = () => {
date.setDate(1);

const monthDays = document.querySelector(".days");

const lastDay = new Date(
date.getFullYear(),
date.getMonth() + 1,
0
).getDate();

const prevLastDay = new Date(
date.getFullYear(),
date.getMonth(),
0
).getDate();

const firstDayIndex = date.getDay();

const lastDayIndex = new Date(
date.getFullYear(),
date.getMonth() + 1,
0
).getDay();

const nextDays = 7 - lastDayIndex - 1;

const months = [
“January”, “February”, “March”, “April”, “May”, “June”,
“July”, “August”, “September”, “October”, “November”, “December”,
];

document.querySelector(".date h1").innerHTML = months[date.getMonth()];
document.querySelector(".date p").innerHTML = new Date().toDateString();

let days = “”;

for (let x = firstDayIndex; x > 0; x–) {
days += `<div class="prev-date">${prevLastDay - x + 1}</div>` ;
}

for (let i = 1; i <= lastDay; i++) {
if (
i === new Date().getDate() &&
date.getMonth() === new Date().getMonth()
) {
days += `<div class="today">${i}</div>` ;
} else {
days += `<div>${i}</div>` ;
}
}

for (let j = 1; j <= nextDays; j++) {
days += `<div class="next-date">${j}</div>` ;
monthDays.innerHTML = days;
}
};

document.querySelector(".prev").addEventListener(“click”, () => {
date.setMonth(date.getMonth() - 1);
renderCalendar();
});

document.querySelector(".next").addEventListener(“click”, () => {
date.setMonth(date.getMonth() + 1);
renderCalendar();
});

renderCalendar();

And this is style.css:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: “Quicksand”, sans-serif;
}

html {
font-size: 62.5%;
}

.container {
width: 100%;
height: 100vh;
background-color: #12121f;
color: #eee;
display: flex;
justify-content: center;
align-items: center;
}

.calendar {
width: 45rem;
height: 52rem;
background-color: #222227;
box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.4);
}

.month {
width: 100%;
height: 12rem;
background-color: #167e56;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
text-align: center;
text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
}

.month i {
font-size: 2.5rem;
cursor: pointer;
}

.month h1 {
font-size: 3rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.2rem;
margin-bottom: 1rem;
}

.month p {
font-size: 1.6rem;
}

.weekdays {
width: 100%;
height: 5rem;
padding: 0 0.4rem;
display: flex;
align-items: center;
}

.weekdays div {
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.1rem;
width: calc(44.2rem / 7);
display: flex;
justify-content: center;
align-items: center;
text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
}

.days {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 0.2rem;
}

.days div {
font-size: 1.4rem;
margin: 0.3rem;
width: calc(40.2rem / 7);
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
transition: background-color 0.2s;
}

.days div:hover:not(.today) {
background-color: #262626;
border: 0.2rem solid #777;
cursor: pointer;
}

.prev-date,
.next-date {
opacity: 0.5;
}

.today {
background-color: #167e56;
}

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

I made a fiddle to show better what I mean.
Edit fiddle - JSFiddle - Code Playground

I want to make the js file show the calendar days in both class=days and class=days2

I think I’m a little confused. Do you want both .days and .days2 to be the exact same displays, or do you want to have two separate calendars displayed?

Hello!
I want them to be the exact same.

/Anette

Easiest way to pull that off is to create a reference to the second thing you want:

const monthDaysClone = document.querySelector('.days2');

and then, once you’ve populated your monthDays, copy the contents into the clone. I might suggest making a copy of monthDays, and setting monthDaysClone.innerHTML to the innerHTML of the copy, but that’s me.

To see what I mean, Edit fiddle - JSFiddle - Code Playground (line 62 is where the magic happens).

Thanks :slight_smile:
Is there any way to use the same class? like two div’s class= days

I have tried with: x = document.querySelectorAll(days) or: getElementsByClassName(days)
But I dont get get it to work.

I don’t know how to connect monthDays with it.
Thinking about a loop, forEach x drawTheCalendar.

??

/Anette

So what is the logic you’d use? Suppose you had some unknown number of .days containers, you’d want to update them each at the same time? That, you could do:

// this will make a nodeList of all the .days containers
const monthDays = document.querySelectorAll(".days");

// and later, after creating the contents:
monthDays.forEach( function(monthDaysElement){
  monthDaysElement.innerHTML = days;
});

That appends the same string to any number of .days containers.

Thank You so much :laughing:
Thath was exactly was I was looking for.
You got a BIG star in my book.

1 Like

Glad i could help. :wink:

Hi again!
How would you put event to this calendar.
Could you give me a little help in the right direction?

I mean, I don’t know your particular application, but it might be as simple as adding a listener to .days, to handle events for each date:

document.querySelector(".days").addEventListener("click", (e)=>{
  console.log(`You clicked on ${e.target.textContent}, didn't'cha?`);
})

However, at this point, your original question has been answered. If you have other questions unrelated to the original post, might be wise to create a new thread.

Hi, thanks for the answer.
But I’m trying to do it with listener and it dont work.
And I tryed to put the listener in different places.
Nothing works!!

/Anette