Created
July 29, 2015 08:20
-
-
Save BcRikko/a008e98357373bcf0b07 to your computer and use it in GitHub Desktop.
Vue.jsでカレンダーを実装する
This file contains hidden or 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> | |
| <html lang="ja"> | |
| <head> | |
| <meata charset="utf-8"> | |
| <title>Vue.jsでカレンダーを実装する</title> | |
| <link href="style.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <div id="calendar-nav"> | |
| <i class="glyphicon glyphicon-menu-left" v-on="click: moveLastMonth"></i> | |
| <span>{{calData.year}} - {{getMonthName(calData.month)}}</span> | |
| <i class="glyphicon glyphicon-menu-right" v-on="click: moveNextMonth"></i> | |
| </div> | |
| <table id="calendar" class="table table-bordered"> | |
| <thead> | |
| <tr> | |
| <th v-repeat="week: weeks">{{week}}</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr v-repeat="week: calendar"> | |
| <td v-repeat="day: week">{{day.day}}</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.8/vue.min.js"></script> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| new Vue({ | |
| el: '#app', | |
| data: { | |
| weeks: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], | |
| calData: {year: 0, month: 0} | |
| }, | |
| created: function (){ | |
| var date = new Date(); | |
| this.calData.year = date.getFullYear(); | |
| this.calData.month = date.getMonth() + 1; | |
| }, | |
| methods: { | |
| getMonthName: function(month) { | |
| var monthName = ['January','February','March','April','May','June','July','August','September','October','November','December']; | |
| return monthName[month - 1]; | |
| }, | |
| moveLastMonth: function() { | |
| if (this.calData.month == 1) { | |
| this.calData.year--; | |
| this.calData.month = 12; | |
| } | |
| else { | |
| this.calData.month--; | |
| } | |
| }, | |
| moveNextMonth: function() { | |
| if (this.calData.month == 12) { | |
| this.calData.year++; | |
| this.calData.month = 1; | |
| } | |
| else { | |
| this.calData.month++; | |
| } | |
| } | |
| }, | |
| computed: { | |
| calendar: function () { | |
| // 1日の曜日 | |
| var firstDay = new Date(this.calData.year, this.calData.month - 1, 1).getDay(); | |
| // 晦日の日にち | |
| var lastDate = new Date(this.calData.year, this.calData.month, 0).getDate(); | |
| // 日にちのカウント | |
| var dayIdx = 1; | |
| var calendar = []; | |
| for (var w = 0; w < 6; w++) { | |
| var week = []; | |
| // 空白行をなくすため | |
| if (lastDate < dayIdx) {break;} | |
| for (var d = 0; d < 7; d++) { | |
| if (w == 0 && d < firstDay) { | |
| week[d] = {day: ''}; | |
| } else if (w == 6 && lastDate < day) { | |
| week[d] = {day: ''}; | |
| dayIdx++; | |
| } else if (lastDate < dayIdx) { | |
| week[d] = {day: ''}; | |
| dayIdx++; | |
| } else { | |
| week[d] = {day: dayIdx}; | |
| dayIdx++; | |
| } | |
| } | |
| calendar.push(week); | |
| } | |
| return calendar; | |
| } | |
| } | |
| }); |
This file contains hidden or 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
| /* カレンダーナビのスタイル */ | |
| #calendar-nav { | |
| text-align: center; | |
| } | |
| #calendar-nav span { | |
| display: inline-block; | |
| width: 200px; | |
| } | |
| #calendar-nav i:hover { | |
| cursor: pointer; | |
| } | |
| /* カレンダーのスタイル */ | |
| .table th, td{ | |
| text-align: center; | |
| } | |
| #calendar th:first-child { | |
| background-color: #FEEEFF; | |
| } | |
| #calendar td:first-child { | |
| background-color: #FEEEFF; | |
| } | |
| #calendar th:nth-child(7) { | |
| background-color: #DFFFFF | |
| } | |
| #calendar td:nth-child(7) { | |
| background-color: #DFFFFF | |
| } | |
| #calendar td:hover { | |
| opacity: 0.6; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment