JSFiddle - React, Tailwind, and code Playground
HTML
<div id="monthPromotion">
<button class="btn monthPrev" ><<</button>
<button class="btn monthNext">>></button>
</div>
<div id="navigator">
</div>
JavaScript
var Navigator = (function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var monthNames = [
"Январь",
"Февраль",
"Март",
"Апрель",
"Май",
"Июнь",
"Июль",
"Август",
"Сентябрь",
"Октябрь",
"Ноябрь",
"Декабрь"
];
var currentSixMonth = [];
return {
init: function() {
this.setMonthTableDefault(m);
this.prevNextMonthEvents(currentSixMonth);
},
setMonthTableDefault: function(cur_month_num) {
/* Формирует массив меяцев для последующего размещения их в таблице */
currentSixMonth = [];
var prev_month_num = 0;
if (cur_month_num == 0) { prev_month_num = 11; }
else { prev_month_num = cur_month_num - 1; }
currentSixMonth.push(monthNames[prev_month_num]); // Предыдущий месяц
currentSixMonth.push(monthNames[cur_month_num]); // Текущий месяц
var i = cur_month_num;
// Следующие 4 месяца
while (i < (cur_month_num + 4) ) {
i += 1;
currentSixMonth.push(monthNames[i]);
}
this.renderCalendar(currentSixMonth);
},
prevNextMonthEvents: function(cur_six_month) {
$(".monthPrev").click(function() {
var first_month = cur_six_month[0];
var i;
for (i = cur_six_month.length; i--;) {
cur_six_month[i] = cur_six_month[i - 1];
}
var j;
var prev_month_name = "";
for (j = cur_six_month.length; j--;) {
if (monthNames[j] == first_month) {
if (monthNames[j-1]) {
prev_month_name = monthNames[j-1];
}
else {
...