Как это сделать 2 раза без копирования вставить код и редактировать переменные?

Как это сделать 2 раза без копирования, вставить код и редактировать переменные?

Я хочу сделать этот код готовым к использованию для 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 {amp}gt; 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 {amp}lt;= 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 {amp}amp;{amp}amp; (i   1 {amp}lt;= 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 = $('{amp}lt;tr/{amp}gt;'); for (var i = 0, len = 7; i {amp}lt; len; i  ) { $tr.append($('{amp}lt;td/{amp}gt;')); } $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 = $('{amp}lt;h3{amp}gt;'); $h3.text(this.content[month]   ' '   year); $h3.appendTo('.month-year'); var dateToHighlight = 0; // Determine if Month {amp}amp;{amp}amp; Year are current for Date Highlight if (this.currentDate.getUTCMonth() === month {amp}amp;{amp}amp; this.currentDate.getUTCFullYear() === year) { dateToHighlight = date; } //Getting February Days Including The Leap Year if (month === 1) { if ((year % 100 !== 0) {amp}amp;{amp}amp; (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:

 {amp}lt;div class="new-calendar large"{amp}gt; {amp}lt;div class="new-calendar-inside"{amp}gt; {amp}lt;div class="month-and-year-calendar"{amp}gt; {amp}lt;div class="left-arrow prev-month"{amp}gt;{amp}lt;i class="icon chevron left"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="month-year"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="right-arrow next-month"{amp}gt;{amp}lt;i class="icon chevron right" style="text-align: right"{amp}gt;{amp}lt;/i{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="calendar-days-list"{amp}gt; {amp}lt;table class="table table-bordered"{amp}gt; {amp}lt;tr class="days-of-the-week"{amp}gt; {amp}lt;th{amp}gt;S{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;T{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Q{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Q{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;S{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;S{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;D{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="new-calendar-inside"{amp}gt; {amp}lt;div class="month-and-year-calendar"{amp}gt; {amp}lt;div class="left-arrow prev-month"{amp}gt;{amp}lt;i class="icon chevron left"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="month-year"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="right-arrow next-month"{amp}gt;{amp}lt;i class="icon chevron right" style="text-align: right"{amp}gt;{amp}lt;/i{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="calendar-days-list"{amp}gt; {amp}lt;table class="table table-bordered"{amp}gt; {amp}lt;tr class="days-of-the-week"{amp}gt; {amp}lt;th{amp}gt;S{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;T{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Q{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Q{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;S{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;S{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;D{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="calendar-buttons"{amp}gt; {amp}lt;button class="new-button no-border-button"{amp}gt;Cancelar{amp}lt;/button{amp}gt; {amp}lt;button class="new-button no-border-button"{amp}gt;Ok{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Я не могу порождать его два раза … Он появляется на правой стороне … что мне делать? Я не могу использовать больше «this», чтобы попытаться получить родительский div для его порождения ..

Спасибо

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector