@roman_mtb calendar example

index.js

const POSTS = [
    {   id:1,
        name: 'post dog',
        date: {
            time: [6, 3, 2018],
        }
    },
	 {   id:12,
        name: 'post dog',
        date: {
            time: [6, 2, 2018],
        }
    },
      {   id:67,
        name: 'post dog',
        date: {
            time: [6, 3, 2018],
        }
    },
    {   id:2,
        name: 'post dog',
        date: {
            time: [6, 4, 2018],
        }
    },
    {   id:3,
        name: 'post dog',
        date: {
            time: [6, 17, 2018],
        }
    },
    {   id:4,
        name: 'post dog',
        date: {
            time: [6, 22, 2018],
        }
    },
    {
        id:5,
        name: 'post fish',
        date: {
            time: [6, 25, 2018],
        }
    },
    {   id:3,
        name: 'post dog',
        date: {
            time: [7, 17, 2018],
        }
    }
  ];
const cal_days_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const cal_months_labels = ['January', 'February', 'March', 'April',
                             'May', 'June', 'July', 'August', 'September',
                             'October', 'November', 'December'];

// these are the days of the week for each month, in order
const cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];


let cal_current_date = new Date();

class Calendar {
    constructor(month, year) {
      this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month;
      this.year = (isNaN(year) || year == null) ? cal_current_date.getFullYear() : year;
      this.html = '';
      this.renderCalendar = this.renderCalendar;
    };

     formClickableDaysObject(firstDay, startingDay, monthLength) {
     	var GOD_OBJ = {} //этот объект вернеться в конце обработки метода, поэтому необходимо назвать по-человечески
		let monthName = cal_months_labels[this.month];
      	let day = 1;
      	for (let i = 0; i < 9; i++) {
          for (let j = 0; j <= 6; j++) {
              POSTS.map( postDay => {
                if( postDay.date.time[0] === this.month && postDay.date.time[1] === day){
                  if(!GOD_OBJ[day]) GOD_OBJ[day] = [];
                  		GOD_OBJ[day].push(postDay)
                  }
              })
              if (day <= monthLength && (i > 0 || j >= startingDay)) day++;
          };
      };
      return GOD_OBJ;
    }

    getIdsByDate(days, day) {
    	return days.map(a => a.id)
    }

    renderCalendar(firstDay, startingDay, monthLength) {
      var GOD = this.formClickableDaysObject(firstDay, startingDay, monthLength)

      let monthName = cal_months_labels[this.month]
      let html = '<table class="calendar-table">';
      html += '<tr><th colspan="7">';
      html += monthName + "&nbsp;" + this.year;
      html += '</th></tr>';
      html += '<tr class="calendar-header">';

      for (let i = 0; i <= 6; i++) {
          html += '<td class="calendar-header-day">';
          html += cal_days_labels[i];
          html += '</td>';
      }
      html += '</tr><tr>';

      // fill in the days
      let day = 1;
      // this loop is for is weeks (rows)а 
      for (let i = 0; i < 9; i++) {
          // this loop is for weekdays (cells)
          for (let j = 0; j <= 6; j++) {
				var b = ''
              POSTS.map( postDay => { if( postDay.date.time[0] === this.month && postDay.date.time[1] === day) b = `data-posts="[${this.getIdsByDate(GOD[day], day)}]">`; })
              if (day <= monthLength && (i > 0 || j >= startingDay)) {
                  html += `<td class="calendar-day" ${b}>`  + day;
                  day++;
              }
              html += '</td>';
          };
          // stop making rows if we've run out of days
          if (day > monthLength) {
              break;
          } else {
              html += '</tr><tr>';
          };
      };
      html += '</tr></table>';


      return html;
    }

   

//эта поебень нас не волнует сильно
    generateHTML() {
        // get first day of month
        let firstDay = new Date(this.year, this.month, 1);
        let startingDay = firstDay.getDay();

        // find number of days in month
        let monthLength = cal_days_in_month[this.month];

        // compensate for leap year
        if (this.month == 1) { // February only!
            if ((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0) {
                monthLength = 29;
            }
        };

        // do the header
        let calendarDiv = document.createElement('div');
        calendarDiv.id = 'calendar'
        document.body.appendChild(calendarDiv);
        calendarDiv.innerHTML += this.renderCalendar(firstDay, startingDay, monthLength);
    };

};


function createCal(month, year) {
  let relMonth = month;
  let cal = new Calendar(relMonth, year);
  cal.generateHTML();
  // document.write(cal.getHTML());
};


let today = new Date();
createCal( 6, today.getFullYear() );
let today2 = new Date();