Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to add notes to the Calendar calendar component of vant". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Add comments to the Calendar Calendar component of vant

Introduce Calendar components first

A recent project that is useful to the calendar requires a custom date copy

Poppable is set to false, which means that the calendar will be tiled and displayed on the page directly, not in the form of a pop layer.

Show-confirm is set to false, which means that the OK button does not display the calendar. The user clicks on any date and immediately triggers the confirm event.

Min-date minimum date segment

Max-date maximum date segment

Formatter Custom date copy I use to add notes to each date

ClassName extra class name

Export default {name: 'DoctorData', data () {return {/ / Doctor id doctorId:', / / name information doctorInfo: {}, / / time clicked timeValue:'', / / number of doctor schedule appointments and daytime curNums: [] / / minimum time value current time minDate: new Date ()}}, created () {/ / accept the data from the upper layer this.doctorId = this.$route.params.doctorId this.doctorInfo = this.$route.params.doctorInfo / / get the number of doctor typesetting date appointments this.getDoctorData ()} Methods: {/ / get appointment number of doctor typesetting date async getDoctorData () {/ / send a request to get background data const data = await this.$http.get (`doctorScheduleDataJson?id=$ {this.doctorId} & openId= 123213`) if (data.status! = = 200) {return this.$Toast.fail ('failed to get doctor typesetting appointment')} / / Take out the remaining times and the value of day let b = [] for (let an in data.data) {console.log (data.data [a] .day) console.log (data.data [a] .cur _ num) b = {key: data.data [a] .day Value: data.data [a] .cur _ num} this.curNums.push (b)} console.log (this.curNums) / / printed format [0: {key:14,value:57}, 1: {key:15,value:57}, 2: {key:16,value:0}]}, / / add notes to the date formatter (day) {/ / the day of the current month var date = day.date.getDate () for (let I = 0; I < this.curNums.length If (date = = this.curNums [I] .key) {/ / determine whether the number of appointments is 0 if (this.curNums [I] .value = 0) {/ / date add remarks day.topInfo = 'full'} else { / / add a note to the date day.topInfo = 'bookable'} return day} / / Click any date confirmFn (data) {console.log (data) This.timeValue = this.timeFormat (data) for (let I = 0; I < this.curNums.length) If (this.timeValue = = this.curNums [I] .key) {/ / the current date has zero reservations and cannot jump to if (this.curNums [I] .value = 0) {return this.$Toast.fail ('current date is full') } this.$router.push ({name: 'Registration' Params: {data: data}, / / time format 2019-09-08 timeFormat (time) {let year = time.getFullYear () let month = time.getMonth () + 1 let day = time.getDate () return day},} Computed: {/ / maximum date is the current time date + reservation time period maxDate () {let curDate = new Date () .getTime () / / the number of reservation days returned by the backend (7)-1 because the number of reservation days will be more than one day if not minus one, the page will display 8 days let one = (this.doctorInfo.bookDayNum-1) * 24 * 3600 * 1000 let OneYear = curDate + one return new Date (oneYear)} / / Calendar remarks. Van-calendar__top-info {background: linear-gradient (86deg) Rgba (2125,165,116,0.98), rgba (238,202,163,0.98) }

Effect picture:

Calendar for horizontal vant components

Vant's calendar composition only supports vertical changes, not horizontal changes, so it has been changed a little bit.

{{showYear}} month export default {data () {return {minDate: new Date (), maxDate: new Date (), defaultDate: new Date (), monthCont: 0 YearCont:0, year: new Date (). GetFullYear (), month: new Date (). GetMonth (), nowDay:new Date (), showYear: new Date (). GetFullYear (), showMonth:new Date (). GetMonth (),}} watch: {defaultDate (val) {this.setMinMaxDay () }}, methods: {formatterDay (day) {return day;}, slecetDay (day) {}, / / current month last month deMonth () {this.monthCont-- This.defaultDate = new Date (this.year, this.month + this.monthCont, 1);}, / / current month next month adMonth () {this.monthCont++ This.defaultDate = new Date (this.year, this.month + this.monthCont, 1);}, / / the previous year of the current year deYear () {this.yearCont-- This.defaultDate = new Date (this.year+ this.yearCont, this.month, 1);}, / / current year and next year adYear () {this.yearCont++ This.defaultDate = new Date (this.year+ this.yearCont, this.month, 1);}, setMinMaxDay () {this.showYear= this.defaultDate.getFullYear (); this.showMonth = this.defaultDate.getMonth (); var firstDay = new Date (this.defaultDate) FirstDay.setDate (1) var endDay = new Date (this.showYear,this.showMonth+1,1) This.minDate = new Date (this.showYear, this.showMonth, firstDay.getDate ()) endDay.setDate (0) this.maxDate = new Date (this.showYear, this.showMonth) EndDay.getDate ()}} .percent-wrap::v-deep {width: 100% Position: relative;. Van-calendar__month-title {display: none;}. Mark-red {display: block; width: 5px; height: 5px; background-color: # d46b08; border-radius: 50%; margin: 0 auto;}. Mark-green {display: block; width: 5px; height: 5px Background-color: # 389e0d; border-radius: 50%; margin: 0 auto;}. Month-year {padding: 10px 0; text-align: center; font-size: 14px;} .arrow {position: absolute; top: 15px; right: 10px;} .arrow-left {position: absolute; top: 15px Left: 10px;}. Arrow-year {position: absolute; top: 15px; right: 30px;} .arrow-left-year {position: absolute; top: 15px; left: 30px;} .arrow-year-1 {position: absolute; top: 15px; right: 35px } .arrow-left-year-1 {position: absolute; top: 15px; left: 35px;}}

Vant icon couldn't find the double arrows, so he combined them with two single arrows.

That's all for "how to add comments to vant's Calendar Calendar component". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.