Permalink
Browse files

add store for calendar

  • Loading branch information...
1 parent 51d9188 commit 7579c2fd5b5ad70b5d240df8f0ac5efedbd083af @lihongxun945 lihongxun945 committed Aug 9, 2016
Showing with 122 additions and 23 deletions.
  1. +1 −1 config/index.js
  2. +4 −0 src/components/calendar/calendar.less
  3. +29 −22 src/components/calendar/index.vue
  4. +88 −0 src/components/calendar/store.js
View
@@ -18,7 +18,7 @@ module.exports = {
},
dev: {
env: require('./dev.env'),
- port: 8080,
+ port: 8088,
proxyTable: {}
}
}
@@ -94,4 +94,8 @@
color: white;
}
}
+
+ .next-month, .prev-month {
+ color: @color-text-gray;
+ }
}
@@ -2,14 +2,14 @@
<div class="calendar">
<div class="toolbar">
<div class="year-picker">
- <div class="icon icon-prev"></div>
- <div class="year-value">{{y}}</div>
- <div class="icon icon-next"></div>
+ <div class="icon icon-prev" @click="prevYear()"></div>
+ <div class="year-value">{{year}}</div>
+ <div class="icon icon-next" @click="nextYear()"></div>
</div>
<div class="month-picker">
- <div class="icon icon-prev"></div>
- <div class="year-value">{{m}}</div>
- <div class="icon icon-next"></div>
+ <div class="icon icon-prev" @click="prevMonth()"></div>
+ <div class="year-value">{{month+1}}</div>
+ <div class="icon icon-next" @click="nextMonth()"></div>
</div>
</div>
<div class="weekdays">
@@ -24,40 +24,47 @@
<div class="months">
<div class="month">
- <div class="date" v-for="d in dates" track-by="$index">
- <span>{{d}}</span>
+ <div class="date" v-for="d in currentMonthDates" track-by="$index">
+ <span :class="{
+ selected: d.selected,
+ 'prev-month': d.prevMonth,
+ 'next-month': d.nextMonth
+ }">{{d.date}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
-import moment from 'moment'
+import Store from './store'
+
+const store = new Store()
export default {
props: {
- currentDate: {
+ selectedDate: {
type: String,
required: false,
default: '2016-12-12'
}
},
data () {
- return {
- y: 2016,
- m: 12,
- d: 12,
- dates: []
- }
+ return store
},
- ready () {
- let i = 1
- while (this.dates.length < 35) {
- this.dates.push(i)
- i = (i > 31 ? 1 : i + 1)
+ methods: {
+ nextMonth () {
+ store.nextMonth()
+ },
+ prevMonth () {
+ store.prevMonth()
+ },
+ nextYear () {
+ store.nextYear()
+ },
+ prevYear () {
+ store.prevYear()
}
- moment
}
}
</script>
@@ -0,0 +1,88 @@
+import moment from 'moment'
+
+const Store = class {
+ constructor () {
+ this.currentDate = moment()
+ this.currentMonthDates = []
+ this.prevMonthDates = []
+ this.nextMonthDates = []
+ this.selectedDates = []
+
+ this.select()
+ }
+
+ select (d) {
+ d = moment(d || this.currentDate)
+ this.selectedDates = [d]
+ this.year = d.year()
+ this.month = d.month()
+ this.date = d.date()
+ this.genDates()
+ }
+
+ getSelectedDates (f) {
+ f = f || 'YYYY-MM-DD'
+ return this.selectedDates.map(d => {
+ moment(d).format(f)
+ })
+ }
+
+ genDates () {
+ const dates = []
+ for (var i = 1; i <= this.selectedDates[0].endOf('month').date(); i++) {
+ dates.push({
+ date: i,
+ currentMonth: true,
+ currentDate: this.currentDate.date() === i,
+ selected: this.selectedDates[0].date() === i
+ })
+ }
+
+ if (this.currentDate.startOf('month').day() !== 1) {
+ var start = this.currentDate.startOf('month').day() || 7 // sunday is 0, change to 7 to make it easy to caculate
+ let prev = this.currentDate.clone().subtract(1, 'months').endOf('month')
+ for (var j = start - 1; j >= 1; j--) {
+ dates.unshift({
+ date: prev.date(),
+ prevMonth: true
+ })
+ prev.subtract(1, 'days')
+ }
+ }
+
+ if (this.currentDate.endOf('month').day() !== 0) {
+ let next = this.currentDate.clone().add(1, 'months').startOf('month')
+ for (var k = this.currentDate.endOf('month').day() + 1; ; k++) {
+ dates.push({
+ date: next.date(),
+ nextMonth: true
+ })
+ if (next.day() === 0) {
+ break
+ }
+ next.add(1, 'days')
+ }
+ }
+
+ this.currentMonthDates = dates
+ }
+
+ nextMonth () {
+ this.currentDate.add(1, 'months')
+ this.select()
+ }
+ prevMonth () {
+ this.currentDate.subtract(1, 'months')
+ this.select()
+ }
+ nextYear () {
+ this.currentDate.add(1, 'years')
+ this.select()
+ }
+ prevYear () {
+ this.currentDate.subtract(1, 'years')
+ this.select()
+ }
+}
+
+export default Store

0 comments on commit 7579c2f

Please sign in to comment.