-
-
Save negabaro/145c9415c4cccbedc26ca8360b03d2a4 to your computer and use it in GitHub Desktop.
weekCalendar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .wrap { | |
| width: 500px; | |
| margin: 0 auto; | |
| } | |
| .btn-holder { | |
| text-align: center; | |
| margin: 10px 0 10px 0; | |
| } | |
| #calendar table { | |
| border-collapse: collapse; | |
| text-align: center; | |
| } | |
| #calendar table thead td { | |
| height: 30px; | |
| font-weight: bold; | |
| } | |
| #calendar table td { | |
| border: solid 1px #000; | |
| } | |
| #calendar table td.date-cell { | |
| height: 50px; | |
| } | |
| #calendar table td.sun { | |
| color: red; | |
| } | |
| #calendar table td.sat { | |
| color: blue; | |
| } | |
| #calendar table td.not-this-month { | |
| background: #ddd; | |
| color: #999; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <body> | |
| <div class='wrap'> | |
| <div class='btn-holder'> | |
| <button id='btnPrev'><</button> | |
| <span id='currentDate'></span> | |
| <button id='btnNext'>></button> | |
| </div> | |
| <div id="calendar"></div> | |
| </div> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var calendar = new controller(); | |
| calendar.init(); | |
| function controller(target) { | |
| var that = this; | |
| var today = new Date(); | |
| this.init = function() { | |
| that.renderCalendar(); | |
| that.initEvent(); | |
| } | |
| this.renderCalendar = function() { | |
| var firstWeekDate = new Date(); | |
| var todayOfWeek = today.getDay(); | |
| if (todayOfWeek==0){ | |
| firstWeekDate.setDate(today.getDate()); | |
| }else if (todayOfWeek==1){ | |
| console.log("test"); | |
| firstWeekDate.setDate(today.getDate()-1); | |
| }else if (todayOfWeek==2){ | |
| firstWeekDate.setDate(today.getDate()-2); | |
| }else if (todayOfWeek==3){ | |
| firstWeekDate.setDate(today.getDate()-3); | |
| }else if (todayOfWeek==4){ | |
| firstWeekDate.setDate(today.getDate()-4); | |
| }else if (todayOfWeek==5){ | |
| firstWeekDate.setDate(today.getDate()-5); | |
| }else if (todayOfWeek==6){ | |
| firstWeekDate.setDate(today.getDate()-6); | |
| }else{ | |
| } | |
| var arrTable = []; | |
| arrTable.push('<table><colgroup>'); | |
| for(var i=0; i<7; i++) { | |
| arrTable.push('<col width="100">'); | |
| } | |
| arrTable.push('</colgroup><thead><tr>'); | |
| var arrWeek = "日月火水木金土".split(""); | |
| for(var i=0; i<7; i++) { | |
| var sClass = ''; | |
| sClass += i % 7 == 0 ? 'sun' : ''; | |
| sClass += i % 7 == 6 ? 'sat' : ''; | |
| arrTable.push('<td class="'+sClass+'">' + arrWeek[i] + '</td>'); | |
| } | |
| arrTable.push('</tr></thead>'); | |
| arrTable.push('<tbody><tr>'); | |
| for(var i=0; i<7; i++) { | |
| var sClass = 'date-cell ' | |
| sClass += i % 7 == 0 ? 'sun' : ''; | |
| sClass += i % 7 == 6 ? 'sat' : ''; | |
| var subWeekDate = new Date(); | |
| var subday = firstWeekDate.getDate() + i; | |
| subWeekDate.setDate(subday); | |
| arrTable.push('<td class="'+sClass+'">' + subWeekDate.getDate() + "</td>"); | |
| } | |
| arrTable.push('</tr>'); | |
| arrTable.push('</tbody></table>'); | |
| $('#calendar').html(arrTable.join("")); | |
| that.changeMonth(); | |
| } //this.renderCalendar = function end | |
| this.initEvent = function() { | |
| $('#btnPrev').click(that.onPrevWeekCalendar); | |
| $('#btnNext').click(that.onNextWeekCalendar); | |
| } | |
| this.onPrevWeekCalendar = function() { | |
| today.setDate(today.getDate()-7); | |
| that.renderCalendar(); | |
| } | |
| this.onNextWeekCalendar = function() { | |
| today.setDate(today.getDate()+7); | |
| that.renderCalendar(); | |
| } | |
| this.changeMonth = function() { | |
| $('#currentDate').text(that.getYearMonth(today).substr(0,9)); | |
| } | |
| this.getYearMonth = function(today) { | |
| return today.getFullYear() + '年 ' + (today.getMonth() + 1) + '月'; | |
| } | |
| }//function controller end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment