Я хочу, чтобы этот код был готов к использованию для 2 или более календарей одновременно. Я имею в виду .. Я хочу что-то вроде этого.
Я получил это:
Мой код JS здесь:
var Calendar = {
start: function () {
this.setTriggers();
},
end: function () {
},
setTriggers: function () {
var _this = this;
this.getArrowLeft().on("click", function () {
_this.navigationHandler(-1);
});
this.getArrowRight().on("click", function () {
_this.navigationHandler(1);
});
},
getContainer: function () {
return $(".container");
},
getArrowLeft: function () {
return this.getContainer().find(".prev-month");
},
getArrowRight: function () {
return this.getContainer().find(".next-month");
},
// Global Variables
currentDate: new Date(),
d: new Date(),
content: 'January February March April May June July August September October November December'.split(' '),
weekDayName: 'SUN MON TUES WED THURS FRI'.split(' '),
daysOfMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
// Clear calendar and drop a new one (next or previous month)
navigationHandler: function (dir) {
// Take the current month displayed, clear it and display a new one
this.d.setUTCMonth(this.d.getUTCMonth() + dir);
this.clearCalendar();
this.myCalendar();
},
// Returns the day of week which month starts (retorna tipo 1 para segunda, 2 terça..)
getCalendarStart: function (dayOfWeek, currentDate) {
var date = currentDate;
var startOffset = (date % 7) - dayOfWeek;
if (startOffset > 0) {
startOffset -= 7;
}
return Math.abs(startOffset);
},
// Render Calendar
renderCalendar: function (startDay, totalDays, currentDate) {
var currentRow = 1;
var currentDay = startDay;
var $table = this.getContainer().find(".calendar-days-list table");
var $week = this.getCalendarRow($(this));
var $day;
var i = 1;
for (; i <= totalDays; i++) {
$day = $week.find('td').eq(currentDay);
$day.text(i);
if (i === currentDate) {
$day.addClass('today');
}
// +1 next day until Sunday (7), then reset to Monday (0)
currentDay = ++currentDay % 7;
// Generate new row when day is Monday, but only if there are
// additional days to render
if (currentDay === 0 && (i + 1 <= totalDays)) {
$week = this.getCalendarRow();
currentRow++;
}
}
},
// Clear generated calendar
clearCalendar: function () {
var $trs = $('tr').not(':eq(0)');
$trs.remove();
$('.month-year').empty();
},
// Generates table row used when rendering Calendar
getCalendarRow: function () {
var $table = this.getContainer().find(".calendar-days-list table");
var $tr = $('<tr/>');
for (var i = 0, len = 7; i < len; i++) {
$tr.append($('<td/>'));
}
$table.append($tr);
return $tr;
},
myCalendar: function () {
var month = this.d.getUTCMonth();
var day = this.d.getUTCDay();
var year = this.d.getUTCFullYear();
var date = this.d.getUTCDate();
var totalDaysOfMonth = this.daysOfMonth[month];
var counter = 1;
var $h3 = $('<h3>');
$h3.text(this.content[month] + ' ' + year);
$h3.appendTo('.month-year');
var dateToHighlight = 0;
// Determine if Month && Year are current for Date Highlight
if (this.currentDate.getUTCMonth() === month && this.currentDate.getUTCFullYear() === year) {
dateToHighlight = date;
}
//Getting February Days Including The Leap Year
if (month === 1) {
if ((year % 100 !== 0) && (year % 4 === 0) || (year % 400 === 0)) {
totalDaysOfMonth = 29;
}
}
// Get Start Day
this.renderCalendar(this.getCalendarStart(day, date), totalDaysOfMonth, dateToHighlight);
},
}
$(document).ready(function () {
// Generate Calendar
Calendar.start();
Calendar.myCalendar();
});
Мой html:
<div class="new-calendar large">
<div class="new-calendar-inside">
<div class="month-and-year-calendar">
<div class="left-arrow prev-month"><i class="icon chevron left"></i></div>
<div class="month-year"></div>
<div class="right-arrow next-month"><i class="icon chevron right" style="text-align: right"></i>
</div>
</div>
<div class="calendar-days-list">
<table class="table table-bordered">
<tr class="days-of-the-week">
<th>S</th>
<th>T</th>
<th>Q</th>
<th>Q</th>
<th>S</th>
<th>S</th>
<th>D</th>
</tr>
</table>
</div>
</div>
<div class="new-calendar-inside">
<div class="month-and-year-calendar">
<div class="left-arrow prev-month"><i class="icon chevron left"></i></div>
<div class="month-year"></div>
<div class="right-arrow next-month"><i class="icon chevron right" style="text-align: right"></i>
</div>
</div>
<div class="calendar-days-list">
<table class="table table-bordered">
<tr class="days-of-the-week">
<th>S</th>
<th>T</th>
<th>Q</th>
<th>Q</th>
<th>S</th>
<th>S</th>
<th>D</th>
</tr>
</table>
</div>
<div class="calendar-buttons">
<button class="new-button no-border-button">Cancelar</button>
<button class="new-button no-border-button">Ok</button>
</div>
</div>
</div>
Я не могу вызвать его два раза ... Он просто появляется на правой стороне ... что мне делать? Я не могу использовать больше "this", чтобы попытаться заставить родительский div вызывать его ..
Спасибо