Prepare for new calendar

index.css

.newEvent{
  background-color:blue;
  width:20px;
  height:20px;
    display:block;
  position:absolute;
}

#hours{
  background-color: rebeccapurple;
height: 500px;
}

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/2.0.0-alpha0/date_fns.min.js"></script>

<div style="/*display:grid;grid-template-columns: 800px 400px*/">

<div>
<span id="oneDay"></span>
<span id="twoDay"></span>
<span id="threeDay"></span>
<span id="fourDay"></span>
<span id="fiveDay"></span>
<span id="sixDay"></span>
<span id="sevenDay"></span>
  
  <div id="hours" onmousemove="mouse(event);">
  <span id="oneHour"></span>
  <span id="twoHour"></span>
  <span id="threeHour"></span>
  <span id="fourHour"></span>
  <span id="fiveHour"></span>
  <span id="sixHour"></span>
  <span id="sevenHour"></span>
  <span id="eightHour"></span>
  <span id="nineHour"></span>
  <span id="tenHour"></span>
    </div>
</div>

<div>
<span id="oneDayName"></span>
<span id="twoDayName"></span>
<span id="threeDayName"></span>
<span id="fourDayName"></span>
<span id="fiveDayName"></span>
<span id="sixDayName"></span>
<span id="sevenDayName"></span>
</div>
</div>

index.js

//dateFns.isToday(new Date())

let one = new Date()
let two = dateFns.addDays(one, 1)
let three = dateFns.addDays(one, 2)
let four = dateFns.addDays(one, 3)
let five = dateFns.addDays(one, 4)
let six = dateFns.addDays(one, 5)
let seven = dateFns.addDays(one, 6)

let oneDay = dateFns.getDate(one)
let twoDay = dateFns.getDate(two)
let threeDay = dateFns.getDate(three)
let fourDay = dateFns.getDate(four)
let fiveDay = dateFns.getDate(five)
let sixDay = dateFns.getDate(six)
let sevenDay = dateFns.getDate(seven)

let now = newDate().getHours();
let oneHour = dateFns.addHours(now, 1)

let oneDayName = one.toLocaleDateString('pl-PL', { weekday: 'long' })
let twoDayName = two.toLocaleDateString('pl-PL', { weekday: 'long' })
let threeDayName = three.toLocaleDateString('pl-PL', { weekday: 'long' })
let fourDayName = four.toLocaleDateString('pl-PL', { weekday: 'long' })
let fiveDayName = five.toLocaleDateString('pl-PL', { weekday: 'long' })
let sixDayName = six.toLocaleDateString('pl-PL', { weekday: 'long' })
let sevenDayName = seven.toLocaleDateString('pl-PL', { weekday: 'long' })

if (!dateFns.isSaturday(one) && !dateFns.isSunday(one)) {
document.getElementById("oneDay").innerHTML = oneDay
document.getElementById("oneDayName").innerHTML = oneDayName
}

if (!dateFns.isSaturday(two) && !dateFns.isSunday(two)){
document.getElementById("twoDay").innerHTML = twoDay
document.getElementById("twoDayName").innerHTML = twoDayName
}

if (!dateFns.isSaturday(three) && !dateFns.isSunday(three)){
document.getElementById("threeDay").innerHTML = threeDay
document.getElementById("threeDayName").innerHTML = threeDayName
}

if (!dateFns.isSaturday(four) && !dateFns.isSunday(four)){
document.getElementById("fourDay").innerHTML = fourDay
document.getElementById("fourDayName").innerHTML = fourDayName
}

if (!dateFns.isSaturday(five) && !dateFns.isSunday(five)){
document.getElementById("fiveDay").innerHTML = fiveDay
document.getElementById("fiveDayName").innerHTML = fiveDayName
}

if (!dateFns.isSaturday(six) && !dateFns.isSunday(six)){
document.getElementById("sixDay").innerHTML = sixDay
document.getElementById("sixDayName").innerHTML = sixDayName
}

if (!dateFns.isSaturday(seven) && !dateFns.isSunday(seven)){
document.getElementById("sevenDay").innerHTML = sevenDay
document.getElementById("sevenDayName").innerHTML = sevenDayName
}

newEvent = document.createElement("div")
  newEvent.classList.add("newEvent")
hours = document.getElementById("hours");
  hours.appendChild( newEvent )

function mouse(event) {
  var x = event.clientX;
  var y = event.clientY;
  console.log(x)
  
  newEvent.style.top = y+'px';
  newEvent.style.left = x+'px';
}

function isHover(e) {
  return (e.parentElement.querySelector(':hover') === e);
}