Tengo este plugin de un calendario que me he bajado de una web y lo he introducido a mi página:
function CALENDAR() {
var wrap,
label,
months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
function init(newWrap) {
wrap = $(newWrap || '#cal');
label = wrap.find('#label');
wrap.find('#prev').bind('click.calender', function() {
switchMonth(false);
});
wrap.find('#next').bind('click.calender', function() {
switchMonth(true);
});
label.ready(function() {
switchMonth(null, new Date().getMonth(), new Date().getFullYear());
});
}
function switchMonth(next, month, year) {
var curr = label.text().trim().split(' '),
calendar, tempYear = parseInt(curr[1], 10);
month = month || ((next) ? ((curr[0] === 'Diciembre') ? 0 : months.indexOf(curr[0]) + 1) : ((curr[0] === 'Enero') ? 11 : months.indexOf(curr[0]) - 1));
year = year || ((next && month === 0) ? tempYear + 1 : (!next && month === 11) ? tempYear - 1 : tempYear);
console.profile('createCal');
calendar = createCal(year, month);
console.profileEnd('createCal');
$('#cal-frame', wrap)
.find('.curr')
.removeClass('curr')
.addClass('temp')
.end()
.prepend(calendar.calendar())
.find('.temp')
.fadeIn('slow', function() {
$(this).remove();
});
label.text(calendar.label);
}
function createCal(year, month) {
var day = 1,
i,
j,
haveDays = true,
startDay = new Date(year, month, day).getDay(),
daysInMonth = [31, (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
calendar = [];
if (createCal.cache[year]) {
if (createCal.cache[year][month]) {
return createCal.cache[year][month];
}
} else {
createCal.cache[year] = {};
}
i = 0;
while (haveDays) {
calendar[i] = [];
for (j = 0; j < 7; j++) {
if (i === 0) {
if (j === startDay) {
calendar[i][j] = day++;
startDay++;
}
} else if (day <= daysInMonth[month]) {
calendar[i][j] = day++;
} else {
calendar[i][j] = '';
haveDays = false;
}
if (day > daysInMonth[month]) {
haveDays = false;
}
}
i++;
}
if (calendar[5]) {
for (i = 0; i < calendar[5].length; i++) {
if (calendar[5][i] !== '') {
calendar[4][i] = '<span>' + calendar[4][i] + '</span><span>' + calendar[5][i] + '</span>';
}
}
calendar = calendar.slice(0, 5);
}
for (i = 0; i < calendar.length; i++) {
calendar[i] = '<tr><td>' + calendar[i].join('</td><td>') + '</td></tr>';
}
calendar = $('<table>' + calendar.join('') + '</table').addClass('curr');
$('td:empty', calendar).addClass('nil');
if (month === new Date().getMonth()) {
$('td', calendar).filter(function() {
return $(this).text() === new Date().getDate().toString();
}).addClass('today');
}
createCal.cache[year][month] = {
calendar: function() {
return calendar.clone();
},
label: months[month] + ' ' + year
};
return createCal.cache[year][month];
}
createCal.cache = {};
return {
init: init,
switchMonth: switchMonth,
createCal: createCal
};
}
var cal = CALENDAR();
cal.init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cal" class="relativo">
<div class="header">
<span class="left button" id="prev"> ⟨ </span>
<span class="left hook"></span>
<span class="month-year" id="label">Octubre 2019</span>
<span class="right hook"></span>
<span class="right button" id="next"> ⟩ </span>
</div>
<!-- <span id="inicio"></span> -->
<table id="days">
<td>Do</td>
<td>Lu</td>
<td>Ma</td>
<td>Mi</td>
<td>Ju</td>
<td>Vi</td>
<td>Sa</td>
</table>
<div id="cal-frame">
<table class="curr" id="curr">
<tbody>
<tr>
<td class="nil"></td>
<td class="nil"></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td class="nil"></td>
<td class="nil"></td>
<td class="nil"></td>
</tr>
</tbody>
</table>
</div>
</div>
El problema que tengo es que al ejecutar la función calendar()
no se ejecutan otras funciones fuera de esta. Me explico, la idea es que al dar click en un día concreto del calendario, aparezca una ventana emergente donde puedas agregar una nota al día, como programar un evento. Ya hice ese código y funciona correctamente solo si la función calendar()
no se ha activado.
Supongo que este problema es porque debo introducir el código que he creado dentro de la función calendar()
, pero, como dije, no domino JavaScript
o jQuery
a tal profundidad como para saber qué debo hacer.
Para los que vieron la pregunta anteriormente, ya resolví el problema que tenía con lo referente a cargar el calendario en el momento que se cargue la página.