I am building a simple javascript calendar which has to be able to navigate between the past and future months. I used the switch statement to display the month(String) and the year(integer) which is working fine. I have two buttons which you click, you can either go back to the previous month or go forth to the next month. I want the months to display as strings. Instead I'm getting just an integer for the previous and next month only.
index.html
<body onload="myCalendar()">
<div class="container">
<i class="prev-month fa fa-chevron-left fa-3x"></i> <i class="next-month fa fa-chevron-right fa-3x"></i>
<br>
<div class="month-year text-center"><h3></h3></div>
<table class="table table-bordered">
<tr>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="today">9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
main.js
$(function myCalendar() {
var today = 'today';
var d = new Date();
var month = d.getUTCMonth();
var day = d.getUTCDate();
var year = d.getUTCFullYear();
var nextMonth = month + 1;
var prevMonth = month - 1;
// Displays the current month in Strings and the actual year
switch(month) {
case 0: $('.month-year').append('<h3> ' + 'January' + ' ' + year + ' </h3>' ); break;
case 1: $('.month-year').append('<h3> ' + 'February' + ' ' + year + ' </h3>' ); break;
case 2: $('.month-year').append('<h3> ' + 'March' + ' ' + year + ' </h3>' ); break;
case 3: $('.month-year').append('<h3> ' + 'April' + ' ' + year + ' </h3>' ); break;
case 4: $('.month-year').append('<h3> ' + 'May' + ' ' + year + ' </h3>' ); break;
case 5: $('.month-year').append('<h3> ' + 'June' + ' ' + year + ' </h3>' ); break;
case 6: $('.month-year').append('<h3> ' + 'July' + ' ' + year + ' </h3>' ); break;
case 7: $('.month-year').append('<h3> ' + 'August' + ' ' + year + ' </h3>' ); break;
case 8: $('.month-year').append('<h3> ' + 'September' + ' ' + year + ' </h3>' ); break;
case 9: $('.month-year').append('<h3> ' + 'October' + ' ' + year + ' </h3>' ); break;
case 10: $('.month-year').append('<h3> ' + 'November' + ' ' + year + ' </h3>' ); break;
case 11: $('.month-year').append('<h3> ' + 'December' + ' ' + year + ' </h3>' ); break;
default:
break;
}
//Navigation Buttons
$('.prev-month').click(function(){
$('.month-year').html(prevMonth);
counter--;
});
$('.next-month').click(function(){
$('.month-year').html(nextMonth);
counter++;
});
答案 0 :(得分：0)
I updated your fiddle to work in any environment.
1) Moved <body onload="myCalendar()"> into main javascript tag because those scope schemes don't work.
2) Moved jquery.min.js to be loaded first, prior to bootstrap.min.js.
Your code has some problems and before pointing out what those are, I strongly recommend you to use some calendar libraries like jQuery UI datepicker, Pikaday because there're actually quite a good amount of thing that you should consider when you build a "simple" calendar.
There's no counter variable in the code, which results in Uncaught ReferenceError: counter is not defined.
You're putting some integers (prevMonth and nextMonth) into your .month-year element, which is the exact result you've described.
I updated my fiddle with some comments.
$(document).ready(function(){
// Global date.
var d = new Date();
function myCalendar() {
// month, day, year change when myCalendar is called based on global date.
var month = d.getUTCMonth();
var day = d.getUTCDate();
var year = d.getUTCFullYear();
// Displays the current month in Strings and the actual year
switch(month) {
case 0: $('.month-year').append('<h3> ' + 'January' + ' ' + year + ' </h3>' ); break;
case 1: $('.month-year').append('<h3> ' + 'February' + ' ' + year + ' </h3>' ); break;
case 2: $('.month-year').append('<h3> ' + 'March' + ' ' + year + ' </h3>' ); break;
case 3: $('.month-year').append('<h3> ' + 'April' + ' ' + year + ' </h3>' ); break;
case 4: $('.month-year').append('<h3> ' + 'May' + ' ' + year + ' </h3>' ); break;
case 5: $('.month-year').append('<h3> ' + 'June' + ' ' + year + ' </h3>' ); break;
case 6: $('.month-year').append('<h3> ' + 'July' + ' ' + year + ' </h3>' ); break;
case 7: $('.month-year').append('<h3> ' + 'August' + ' ' + year + ' </h3>' ); break;
case 8: $('.month-year').append('<h3> ' + 'September' + ' ' + year + ' </h3>' ); break;
case 9: $('.month-year').append('<h3> ' + 'October' + ' ' + year + ' </h3>' ); break;
case 10: $('.month-year').append('<h3> ' + 'November' + ' ' + year + ' </h3>' ); break;
case 11: $('.month-year').append('<h3> ' + 'December' + ' ' + year + ' </h3>' ); break;
default:
break;
}
};
// On window load, call myCalendar first to draw today's calendar.
myCalendar();
// Navigation Buttons
$('.prev-month').click(function(){
// On .prev-month click, first empty .month-year container, set global date's month to the previous one, and call myCalendar to update the month / year title.
$('.month-year').empty();
d.setUTCMonth(d.getUTCMonth() - 1);
myCalendar();
});
$('.next-month').click(function(){
// On .next-month click, first empty .month-year container, set global date's month to the next one, and call myCalendar to update the month / year title.
$('.month-year').empty();
d.setUTCMonth(d.getUTCMonth() + 1);
myCalendar();
});
});