I'm looking to modify this code so that it can be used for multiple calendars simultaneously. For example, I want something similar to the following:
Here is what I currently have:
This is my JavaScript code:
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);
});
},
// Rest of the JavaScript code...
}
$(document).ready(function () {
// Generate Calendar
Calendar.start();
Calendar.myCalendar();
});
This is my 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>
I am facing an issue where the calendar only appears on the right side and I cannot spawn it two times. What should I do in order to solve this problem? Is there another method instead of using "this" to get the parent div to spawn it?
Thank you.