CODEWITHSUNDEEP
javascriptjqueryhtml
Learner
Learner

Reputation: 81

How to fill Array with actual dates and all remaining dates with -1

I'm trying to fill all array position from firstDay(6) to numberOfDaysInAMonth(29) with values between [1 and numberOfDaysInAMonth(29)]. and rest all positions with -1

currently my value from firstDay starting with 6, it should be from 1 to numberOfDaysInAMonth

I'm expecting output something like below one:

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

as opposed to:

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

i'm doing this to construct a calendar for any given month and year.

My Expectation: Best and easy way or algorithm

Question: you can see date is starting at correct spot 6 with wrong value 6(it should be 1 till 29).

For better view i have created codepen:https://codepen.io/eabangalore/pen/ExVgrjB (you can see date is starting from correct spot but with wrong value 6 it should be 1 till 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>

Upvotes: 0

Views: 88

Answers (2)

Jack Ting
Jack Ting

Reputation: 571

Try this code.

// 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>

Upvotes: 1

Kiran Shinde
Kiran Shinde

Reputation: 5982

I have changed your for loop conditions, something like

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

And it seems to be working like you wanted

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>

Or by simpler way you can also write loop like this

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

Upvotes: 0

Related Questions