Как можно сократить код и сделать его универсальным?

Question

[Руслан Абсалямов]

Есть код, но только я делал для одного месяца текущего. Вопрос как можно сократить код?

let month = moment().month();
            let lastDays = moment(month).daysInMonth();
            let startOf = moment().startOf("month");
            let startWeek = startOf.day();
            let weeks = [];
            let week = {};
            let currentDay = 1;
            let currentWeek = 1;
            let weeksday = 1;
            let lastDate = lastDays + 1;

            if(startWeek !== 1) {
                week = {};
                for(let i = 1; i <= 7; i++) {
                    if(startWeek <= i) {
                        week[i] = currentDay;
                        currentDay++;
                    } else {
                        week[i] = "";
                    }
                }
                weeks[currentWeek] = week;
                currentWeek ++;
week = {};
            }

            while(currentDay !== lastDate) {
                week[weeksday] = currentDay;
                if(weeksday === 7) {
                    weeks[currentWeek] = week;
                    week = {};
                    weeksday = 1;
                } else if(currentDay === lastDays) {
                    weeks[currentWeek] = week;
                } else {
                    weeksday++;
                }
                currentDay++;
            }

Answer 1

[Aleksey Solovyev]

jsfiddle.net/75cot643/1
jsfiddle.net/75cot643/2

createMonth - создает сетку для даты, которую в нее передают.

const getFirstDateofMonth = date => new Date(date.getFullYear(), date.getMonth(), 1).getDay();
const getDaysInMonth = date => new Date(date.getFullYear(), date.getMonth()+1, 0).getDate();
const createMonth = (date, el) => {
  const startFrom = getFirstDateofMonth(date); // Return the number of the first day
  const daysAmount = getDaysInMonth(date); // Return the number of days in the month
  for (let i = 1; i < startFrom+daysAmount; i++) {
    const li = document.createElement('li');
    // Colorize cells
    if (i < startFrom) {
      li.classList.add('past');
    } else {
      li.classList.add('current')
    }
    el.appendChild(li);
  }
}

const calendar = document.getElementById('calendar'); // Container
const date = new Date(Date.now()); // Date
/*
  date - some date in format:
    - new Date('November 17, 1995 03:24:00')
    - new Date(Date.now())
    - new Date('1995-12-17T03:24:00')
    - .... 
  calendar - DOM element
*/
createMonth(date, calendar);

ps и стоит отметить решением ответ Макс к Вашему предыдущему вопросу.

Comments

[Руслан Абсалямов]

Как понимаю базовый функционал js лучше подходит, чем moment.js?

[Aleksey Solovyev]

Руслан Абсалямов, оба код выполняют одно и тоже(moment.js использует такой же метод как и код выше). Разница только в конечном размере Вашего js файла(скорость загрузки страницы). Если Вам необходим только 1 метод из moment.js, то нет никакого смысла его использовать.

[Руслан Абсалямов]

Aleksey Solovyev, Кстати по коду как понял тут играет разметка, при увеличение допустим длины li то все встает не так как надо

[Aleksey Solovyev]

Руслан Абсалямов, как размер контейнера связан с задачей в вопросе?
Тем не менее в функцию Вам надо передать какой-то контейнер. Для примера я создал контейнер ul с шириной 330, а li 40, чтобы было 7 клеток на одной строке(330 / 7 - margin). Вы можете любой создать(не забудьте только поменять элемент, который создается для каждого дня).
Если уж надо, то можно в примере выше тэгу li задать ширину width: calc(100% / 7 - 2px). Будет растягиваться под любую ширину.

[Руслан Абсалямов]

Aleksey Solovyev, jsfiddle.net/75cot643/3
Просто я изначально делал недели из массива, чтобы потом на верстку наложить. А календарь у меня full calendar. Что-то по верстке у меня вообще не получается в этом плане

[Aleksey Solovyev]

Руслан Абсалямов, надо px добавить для двойки(margin) width: calc(100% / 7 - 2px); jsfiddle.net/75cot643/4