Vue-based calendar supports weekly switching and vue-based calendar

Vue-based calendar supports weekly switching and vue-based calendar

The Vue-based calendar function allows you to switch between the Vue and the Vue based on the actual development status every year, month, or week. The details are as follows:

<Template> <div class = "date"> <! -- Year month --> <div class = "month"> <p >{{ currentYear }}{ currentMonth }}month </p> </div> <! -- Week --> <ul class = "weekdays"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <li> 6 </li> <li> day </li> </ul> <! -- Date --> <ul class = "days"> <li @ click = "pick (day)" v-for = "(day, index) in days ": key = "index"> <! -- This month --> <span v-if = "day. getMonth () + 1! = CurrentMonth "class =" other-month ">{{ day. getDate () }}</span> <span v-else> <! -- Today --> <span v-if = "day. getFullYear () = new Date (). getFullYear () & day. getMonth () = new Date (). getMonth () & day. getDate () = new Date (). getDate () "class =" active "> {day. getDate () }}</span> <span v-else >{{ day. getDate () }}</span> </li> </ul> </div> </template>

Js part: Currently, one week is displayed by default and can be changed as needed.

<Script> export default {name: 'date', data () {return {currentYear: 1970, // year currentMonth: 1, // month currentDay: 1, // Date currentWeek: 1, // day of the week: [], }}, mounted () {}, created () {this. initData (null)}, methods: {formatDate (year, month, day) {const y = year let m = month if (m <10) m = '0 $ {m} 'let d = day if (d <10) d = '0 $ {d} 'Return '$ {y}-$ {m}-$ {d}'}, initData (cur) {let date = ''if (cur) {date = new Date (cur)} else {date = new Date ()} this. currentDay = date. getDate () // today's date number this. currentYear = date. getFullYear () // current year this. currentMonth = date. getMonth () + 1 // current month this. currentWeek = date. getDay () // 1... 6, 0 // day of the week if (this. currentWeek = 0) {this. currentWeek = 7} const str = this. formatDate (this. currentYear, this. currentMonth, this. currentDay) // today's date year-month-day this. days. length = 0 // Today is Sunday. It is placed at the 7th position in the first line. The first 6 items are displayed for one week by default, then the second cycle is I <= 35-this. currentWeek/* eslint-disabled */for (let I = this. currentWeek-1; I> = 0; I-= 1) {const d = new Date (str) d. setDate (d. getDate ()-I) // console. log (y: "+ d. getDate () this. days. push (d)} for (let I = 1; I <= 7-this. currentWeek; I + = 1) {const d = new Date (str) d. setDate (d. getDate () + I) this. days. push (d) }}, // weekPre () {const d = this. days [0] // if the current date is 7 or less than 7 d. setDate (d. getDate ()-7) this. initData (d)}, // weekNext () {const d = this. days [6] // if the current date is 7 or less than 7 d. setDate (d. getDate () + 7) this. initData (d)}, // input the current year and month pickPre (year, month) {const d = new Date (this. formatDate (year, month, 1) d. setDate (0) this. initData (this. formatDate (d. getFullYear (), d. getMonth () + 1, 1)}, // input the current year and month pickNext (year, month) {const d = new Date (this. formatDate (year, month, 1) d. setDate (35) this. initData (this. formatDate (d. getFullYear (), d. getMonth () + 1, 1)}, // The current selected date pick (date) {alert (this. formatDate (date. getFullYear (), date. getMonth () + 1, date. getDate () },}}</script>

<style lang="scss"> @import "~base"; .date {  height: px2rem(180);  color: #333;  .month {   font-size: px2rem(24);   text-align: center;   margin-top: px2rem(20);  }  .weekdays {   display: flex;   font-size: px2rem(28);   margin-top: px2rem(20);   li {    flex: 1;    text-align: center;   }  }  .days {   display: flex;   li {    flex: 1;    font-size: px2rem(30);    text-align: center;    margin-top: px2rem(10);    line-height: px2rem(60);    .active {     display: inline-block;     width: px2rem(60);     height: px2rem(60);     color: #fff;     border-radius: 50%;     background-color: #fa6854;    }    .other-month {     color: #e4393c;    }   }  } }</style>

Reference link: Vue. js to create a Calendar

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.