alberanid/ibt2
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

fixes #26: update information when the month is changed

Browse source
This commit is contained in:
Davide Alberani 2017-02-08 23:00:56 +01:00
parent 9470fa8801
commit 67eb49f6fc
2 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -21,7 +21,7 @@
"vue-material": "^0.6.3", "vue-material": "^0.6.3",
"vue-resource": "^1.0.3", "vue-resource": "^1.0.3",
"vue-router": "^2.1.1", "vue-router": "^2.1.1",
"vuejs-datepicker": "^0.4.27", "vuejs-datepicker": "^0.5.5",
"vuex": "^2.1.1" "vuex": "^2.1.1"
}, },
"devDependencies": { "devDependencies": {

19
src/App.vue
View file

@ -2,7 +2,7 @@
<div id="main-attendees"> <div id="main-attendees">
<md-layout md-gutter md-row> <md-layout md-gutter md-row>
<md-layout id="datepicker-column" md-flex="20" md-flex-small="100" md-gutter> <md-layout id="datepicker-column" md-flex="20" md-flex-small="100" md-gutter>
<datepicker id="datepicker" :value="date" :inline="true" :highlighted="highlightedDates" :monday-first="true" @selected="getDay"></datepicker> <datepicker id="datepicker" ref="datepicker" :value="date" :inline="true" :highlighted="highlightedDates" :monday-first="true" @selected="getDay"></datepicker>
<md-card id="day-info"> <md-card id="day-info">
<md-card-header class="day-info-header"> <md-card-header class="day-info-header">
<md-layout md-row> <md-layout md-row>
@ -99,6 +99,9 @@ export default {
if (!(this.date && !isNaN(this.date.getTime()))) { if (!(this.date && !isNaN(this.date.getTime()))) {
this.date = new Date(); this.date = new Date();
} }
$('div.calendar span.prev').on('click', this.changeMonth);
$('div.calendar span.next').on('click', this.changeMonth);
$('div.calendar span.month').on('click', this.changeMonth);
this.reload(); this.reload();
}, },
@ -109,6 +112,14 @@ export default {
this.getDay(); this.getDay();
}, },
changeMonth() {
var day = new Date();
day.setTime(this.$refs.datepicker.currDate);
var ym = this.dateToString(day, true);
this.getSummary({start: ym, end: ym});
this.getDay(day);
},
dateToString(date, excludeDay) { dateToString(date, excludeDay) {
var year = '' + date.getFullYear(); var year = '' + date.getFullYear();
var month = '' + (date.getMonth() + 1); var month = '' + (date.getMonth() + 1);
@ -208,7 +219,7 @@ export default {
} }
} }
#datepicker { .datepicker {
padding: 10px; padding: 10px;
} }
@ -226,11 +237,11 @@ export default {
flex: 1; flex: 1;
} }
.day-info-header, .calendar .prev, .calendar .up, .calendar .next { .calendar > header > span {
background-color: #f8bbd0; background-color: #f8bbd0;
} }
.calendar:hover .prev:hover, .calendar .up:hover, .calendar .next:hover { .calendar > header > span:hover {
background-color: #f06292 !important; background-color: #f06292 !important;
} }