Космос,
на всякий случай, вариант без eval.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Calendar</title>
</head>
<body>
<style>
.day {
border: 1px solid #ccc;
width: 30px;
line-height: 30px;
text-align: center;
margin: 1px;
background-color: #B0C4DE;
}
.month :nth-child(1) {
width: 100%;
flex: 0 0 auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.month :nth-child(1):first-letter {
text-transform: capitalize;
}
.month {
display: flex;
flex-wrap:wrap;
width: 238px;
height: 238px;
justify-content: space-around;
margin: 30px auto;
}
.month.vert{
flex-direction: column;
}
.day.holidays{
background-color: #FF85C6;
}
.day.op{
opacity: .6;
background-color: #D3D3D3;
}
.day:nth-child(-n + 8) {
color: #FFFFFF;
font-weight: bold;
}
</style>
<div class="ru month"></div>
<button type="button" onclick="calendarRu.up(1)">следующий месяц</button>
<div class="en month"></div>
<button type="button" onclick="calendarEn.up(1)">next month</button>
<script>
class Calendar {
constructor(year, month, lang = 'ru', element) {
this.year = year;
this.month = month - 1;
this.lang = lang;
this.startDay = {
ru: 1,
en: 7
};
this.element = element;
this.days = {
"en": ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
"ru": ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"]
};
this.holidays = {
en: [6, 0],
ru: [6, 0]
}
this.up = this.render.bind(this);
this.up();
}
update(up = 0) {
this.month += up;
let stepDay = new Date(this.year, this.month, 1);
this.nameMonth = new Intl.DateTimeFormat(this.lang, {
month: "long", year : 'numeric'}).format(stepDay);
let deltaDay = (7 + (stepDay.getDay() || 7) - this.startDay[this.lang]) % 7;
stepDay.setDate(stepDay.getDate() - deltaDay);
let data = this.days[this.lang].map((date, i) => ({
day: (i + this.startDay[this.lang]) % 7,
date
}));
let lastDay = new Date(stepDay);
lastDay.setDate(lastDay.getDate() + 41);
while (stepDay <= lastDay) {
data.push({
day: stepDay.getDay(),
date: stepDay.getDate()
});
stepDay.setHours(24);
}
return data;
}
render(up) {
let data = this.update(up);
let op = false;
let html = `<h3>${this.nameMonth}</h3>`;
for (let i = 0; i < data.length; i++) {
let {day, date} = data[i];
if (i == 7) op = true
if (date == 1) op = !op;
let cls = this.holidays[this.lang].includes(day) ? 'day holidays' : 'day';
if (op) cls += ' op';
html += `<div class="${cls}">${date}</div>`;
}
this.element.innerHTML = html;
}
}
let elemRu = document.querySelector('.ru');
let calendarRu = new Calendar(2020, 5, 'ru', elemRu);
let elemEn = document.querySelector('.en');
let calendarEn = new Calendar(2020, 5, 'en', elemEn);
</script>
</body>
</html>
