Добавление элемента div на страницу при каждой встрече между начальной и конечной датой в объекте

Question

Я пытаюсь создать элемент div на странице для каждого объекта в массиве, где сегодняшняя дата находится между параметрами начальной и конечной даты, буду очень благодарен за любую помощь. Идея состоит в том, чтобы создавать и показывать окна событий для каждого соответствующего дня, запланированного на этот день, используя сводную информацию для каждого события, хранящегося в массиве как объект.

var $todaysdate = new Date();
var $fullyear = $todaysdate.getFullYear();
var $month = $todaysdate.getMonth();
var $day = $todaysdate.getDate();
var $finaltoday = new Date($fullyear, $month, $day).toDateString();

var eventyz = [{
  startDate: new Date("2020-4-15").toDateString(),
  endDate: new Date("2020-4-27").toDateString(),
  summary: "Info 1"
}, {
  startDate: new Date("2020-4-28").toDateString(),
  endDate: new Date("2020-4-28").toDateString(),
  summary: "Info 2"
}, {
  startDate: new Date("2020-4-28").toDateString(),
  endDate: new Date("2020-4-28").toDateString(),
  summary: "Info 3"
}, {
  startDate: new Date("2020-5-4").toDateString(),
  endDate: new Date("2020-5-4").toDateString(),
  summary: "Info4"
}, {
  startDate: new Date("2020-5-4").toDateString(),
  endDate: new Date("2020-5-4").toDateString(),
  summary: "Info5"
}, {
  startDate: new Date("2020-5-4").toDateString(),
  endDate: new Date("2020-5-4").toDateString(),
  summary: "Info6"
}];

eventyz.forEach(function MyDumbFunction(item) {
  if (Date.parse($finaltoday) <= Date.parse(item.startDate) && Date.parse($finaltoday) >=  
    Date.parse(item.endDate)) {
    $(".tttt").append("<div class='red_block'></div>");
  }
});

.jigle {
  width: 300px;
  background: red;
  height: 100px;
}

.red_block {
  width: 300px;
  height: 300px;
  background-color: red;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
<h1 id="kk"></h1>
<div class="tttt"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

Ваше сравнение в обратном направлении. Вы сделали меньше начального диапазона и больше конечного диапазона.

var $todaysdate = new Date();
var $fullyear = $todaysdate.getFullYear();
var $month = $todaysdate.getMonth();
var $day = $todaysdate.getDate();
var $finaltoday = new Date($fullyear, $month, $day).toDateString();

var eventyz = [{
  startDate: new Date("2020-4-15").toDateString(),
  endDate: new Date("2020-4-27").toDateString(),
  summary: "Info 1"
}, {
  startDate: new Date("2020-4-28").toDateString(),
  endDate: new Date("2020-4-28").toDateString(),
  summary: "Info 2"
}, {
  startDate: new Date("2020-4-28").toDateString(),
  endDate: new Date("2020-4-28").toDateString(),
  summary: "Info 3"
}, {
  startDate: new Date("2020-5-4").toDateString(),
  endDate: new Date("2020-5-4").toDateString(),
  summary: "Info4"
}, {
  startDate: new Date("2020-5-4").toDateString(),
  endDate: new Date("2020-5-4").toDateString(),
  summary: "Info5"
}, {
  startDate: new Date("2020-5-4").toDateString(),
  endDate: new Date("2020-5-4").toDateString(),
  summary: "Info6"
}];

eventyz.forEach(function MyDumbFunction(item) {
  if (Date.parse($finaltoday) >= Date.parse(item.startDate) && Date.parse($finaltoday) <=  
    Date.parse(item.endDate)) {
    $(".tttt").append("<div class='red_block'></div>");
  }
});

.jigle {
  width: 300px;
  background: red;
  height: 100px;
}

.red_block {
  width: 300px;
  height: 300px;
  background-color: red;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
<h1 id="kk"></h1>
<div class="tttt"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>