Как заполнить массив фактическими датами, а все оставшиеся даты - -1

Question

Я пытаюсь заполнить всю позицию массива от firstDay(6) до numberOfDaysInAMonth(29) значениями от [1 до numberOfDaysInAMonth(29)]. и оставьте все позиции с -1

в настоящее время мое значение от firstDay, начиная с 6, должно быть от 1 до numberOfDaysInAMonth

Я ожидаю вывод что-то вроде ниже один:

[-1,-1,-1,-1,-1,-1,1....29,-1,-1,-1,-1,-1,-1,-1] // 6(-1) and at end 7(-1)

вместо:

[-1,-1,-1,-1,-1,-1,6....28,-1,-1,-1,-1,-1,-1,-1]

Я делаю это для создания календаря на любой месяц и год.

Мой Ожидание: Лучший и простой способ или алгоритм

Вопрос: Вы можете видеть, что дата начинается в правильном месте 6 с неправильным значением 6 (должно быть 1 до 29).

Для лучшего обзора я создал кодовое поле : https://codepen.io/eabangalore/pen/ExVgrjB (вы можете видеть, что дата начинается с правильного места, но с неправильным значением 6 должно быть 1 до 29)

var allDates = Array(42).fill(-1,0);

var firstDay = (new Date('2020', 1)).getDay(); //6, from where our actual dates will start

var numberOfDaysInAMonth = 32 - new Date(2020, 1, 32).getDate(); //feburary

console.log(numberOfDaysInAMonth); //it should fill till numberOfDaysInAMonth

for(var i = firstDay; i < numberOfDaysInAMonth; i++ ){
    allDates[i] = i;
}

console.log(allDates);

/* 
 **   Display code below
 **
*/

//then i will display them like below
var datetemplate = '', finalTableTemplate = '';
for(var i = 1; i <= allDates.length; i++){
   var notAvailableDateClass = '';
   if(allDates[i] == -1 || allDates[i] == undefined)
          notAvailableDateClass = 'disabled';
     datetemplate += '<span class="'+notAvailableDateClass+'">'+allDates[i]+'</span>';
   if((i % 7) == 0 ){ finalTableTemplate += '<div>'+datetemplate+'</div>'; datetemplate = '';}
}
document.querySelector('#dates').innerHTML = finalTableTemplate;

span{
    display: inline-block;
    width: 38px;
    height: 29px;
    background: red;
    color: #fff;
    margin: 1px;
    text-align: center;
    line-height: 30px;
}

span.disabled {
    background: #ccc;
    color: #000;
}

<div id="dates"></div>

Answer 1

Попробуйте этот код.

// Month counts from 0
var firstDay = new Date(2020, 1, 1).getDay(),
    daysInMonth = new Date(2020, 2, 0).getDate();

// 42 add 1 to avoid 'undefined' if week starts from Monday
var allDates = Array(43).fill(-1,0);
for (var i = 0; i < daysInMonth; i++ ) {
    allDates[i+firstDay] = i+1;
}

// true: week starts from Monday
// false week starts from Sunday
var startFromMon = true;
let elmMonth = document.createDocumentFragment(),
    elmWeek = document.createElement('div');
let start = (startFromMon) ? 1 : 0,
    moder = (startFromMon) ? 0 : 6;
for (var i = start; i < allDates.length; i++) {
    let elmDay = document.createElement('span');
    elmDay.textContent = allDates[i];
    if (allDates[i] == -1)
        elmDay.setAttribute('class', 'disabled');
    elmWeek.appendChild(elmDay);
    if (i%7 == moder) {
        elmMonth.appendChild(elmWeek);
        elmWeek = document.createElement('div');
    }
}
document.querySelector('#dates').appendChild(elmMonth);

span{
    display: inline-block;
    width: 38px;
    height: 29px;
    background: red;
    color: #fff;
    margin: 1px;
    text-align: center;
    line-height: 30px;
}

span.disabled {
    background: #ccc;
    color: #000;
}

<div id="dates"></div>

Answer 2

Я изменил ваши условия для l oop, что-то вроде

for (var i = firstDay, k=1; i < allDates.length, k <= numberOfDaysInAMonth; i++,k++) {
  allDates[i] = k;
}

И, похоже, работает так, как вы хотели

var allDates = Array(42).fill(-1, 0);

var firstDay = (new Date('2020', 1)).getDay(); //6, from where our actual dates will start

var numberOfDaysInAMonth = 32 - new Date(2020, 1, 32).getDate(); //feburary

console.log(numberOfDaysInAMonth); //it should fill till numberOfDaysInAMonth

for (var i = firstDay, k=1; i < allDates.length, k <= numberOfDaysInAMonth; i++,k++) {
  allDates[i] = k;
}

console.log(allDates);

/* 
 **   Display code below
 **
 */

//then i will display them like below
var datetemplate = '',
  finalTableTemplate = '';
for (var i = 1; i <= allDates.length; i++) {
  var notAvailableDateClass = '';
  if (allDates[i] == -1 || allDates[i] == undefined)
    notAvailableDateClass = 'disabled';
  datetemplate += '<span class="' + notAvailableDateClass + '">' + allDates[i] + '</span>';
  if ((i % 7) == 0) {
    finalTableTemplate += '<div>' + datetemplate + '</div>';
    datetemplate = '';
  }
}
document.querySelector('#dates').innerHTML = finalTableTemplate;

span {
  display: inline-block;
  width: 38px;
  height: 29px;
  background: red;
  color: #fff;
  margin: 1px;
  text-align: center;
  line-height: 30px;
}

span.disabled {
  background: #ccc;
  color: #000;
}

<div id="dates"></div>

Или, проще говоря, вы также можете написать l oop вот так

for (var i=1; i <= numberOfDaysInAMonth; i++) {
  allDates[firstDay] = i;
  firstDay++;
}