How can I fit the design with javascript? [closed]

I have a problem, I made a calendar like this.q1

I just designed it. In addition to this design, I need to add "photo in Q2" javascript.

example - https://jsfiddle.net/erdinakgz/r3xwh0cv/1/

Q1 codes

 .days {
  width: 1000px;
}

.day {
  width: 160px;
  background-color: #efeff6;
  padding: 10px;
  float: left;
  margin-right: 7px;
  margin-bottom: 5px;
}

@media (max-width: 1199px) {
  .day {
    width: 130px;
  }
}

@media (max-width: 992px) {
  .day {
    width: 90px;
  }
}

@media (max-width: 768px) {
  .day {
    width: 160px;
  }
}

.datelabel {
  margin-bottom: 15px;
}

.timeslot {
  background-color: #428bca;
  width: auto;
  color: white;
  padding: 7px;
  margin-top: 5px;
  font-size: 14px;
  border-radius: 3px;
  vertical-align: center;
  text-align: center;
}

.timeslot:hover {
  background-color: #3b7db5;
  cursor: pointer;
}

---

q2

It will be the way I want it, like 10 days from today with Javascript. drift as a slider or owl carousel.