In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
This article mainly introduces how to achieve the vue calendar component, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.
1. Preface
Recently, there is a requirement for working on a project, and we need to create a customized calendar component (the UI framework used by the project can not meet the requirements. Forget it, let me get this straight, the calendar component of ant design vue is really ugly, so I wrote one myself). As shown in the following figure, the requirements are roughly as follows:
(2) the calendar can be switched according to the month before and after the month.
(2) display the schedule information from Monday to Sunday by month.
(3) the scheduling information can be divided into morning shift and evening shift.
(4) distinguish the color of the schedule according to the date: the normal color of the scheduling information in the current month, dark today, and light color in other months.
(5) Click the edit button, and the calendar enters edit mode. To put it simply, there is a select button on the right side of today's and after today's schedule, which can be clicked to edit the same day's scheduler.
If you only need the calendar component part, you can look directly at section 2.2 and just pass the current time (an object containing the current year and month) to display the complete current month calendar.
2. Making vue calendar
Because the project uses the ant desgin vue framework, there will be a-row, a-col, a-card and other tags. If you use elementUI, replace the tags with the corresponding el-row, el-col, el-card and other tags.
2.1 make a month selector
Schematic diagram of effect:
According to the demand, we first need to make a month selector to provide month switching, and the current month is displayed by default. Click the left arrow one month forward and the right arrow one month back, and each click throws the changeMonth function with the object time, including the year and month of the current month selector.
{{time.year}} year {{time.month + 1 > 9? Time.month + 1:'0' + (time.month + 1)} month export default {data () {return {time: {year: new Date (). GetFullYear (), month: new Date (). GetMonth ()}}, created () {} Methods: {reduceMonth () {if (this.time.month > 0) {this.time.month = this.time.month-1} else {this.time.month = 11 this.time.year = this.time.year-1} this.$emit ('changeMonth', this.time)}, addMonth () {if (this.time.month)
< 11) { this.time.month = this.time.month + 1 } else { this.time.month = 0 this.time.year = this.time.year + 1 } this.$emit('changeMonth', this.time) } }}.month-con { font-weight: 700; font-size: 18px; .month { margin: 0 10px; }}2.2 制作日历2.2.1 获取当前月所要显示的日期 在制作日历之前,我们可以先观察下电脑自带的日历。经过观察,我们可以发现以下几个规律: (1)虽然每个月的日总数不同,但是都统一显示6行,一共42天。 (2)当前月的第一天在第一行,并且当1号不在周一时,会使用上个月的日期补全周一到1号的时间。 (3)第五行和第六行不属于当前月部分,会使用下个月的日期补全。 因此参照以上规律,获取当前月所需要展示的日期时,可以按照以下几个步骤: (1)获取当前月第一天所在的日期和星期几 (2)当前月第一天星期几减1就是之前要补足的天数,将当前月第一天减去这个天数,就是日历所要展示的起始日期。比如上面日历的起始日期就是1月31日。 (3)循环42次,从起始日期开始,每次时间加上一天,将这42天的日期存到一个数组里,就是日历所要展示的当前月所有日期。 (4)因为每次切换月份都会重新刷新一次日历,因此可以直接将日历数组写成computed属性。 computed: { // 获取当前月份显示日历,共42天 visibleCalendar: function() { const calendarArr = [] // 获取当前月份第一天 const currentFirstDay = new Date(this.time.year, this.time.month, 1) // 获取第一天是周几 const weekDay = currentFirstDay.getDay() // 用当前月份第一天减去周几前面几天,就是看见的日历的第一天 const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000 // 我们统一用42天来显示当前显示日历 for (let i = 0; i < 42; i++) { const date = new Date(startDay + i * 24 * 3600 * 1000) calendarArr.push({ date: new Date(startDay + i * 24 * 3600 * 1000), year: date.getFullYear(), month: date.getMonth(), day: date.getDate() }) } return calendarArr } }2.2.2 给不同的日期添加不同的样式 效果示意图: 按照需求,我们需要给不同的日期添加不同的样式: (1)当前月份排班信息正常颜色 (2)今天显示深色 (3)其他月份显示浅色 因此我们获取当前月日历数组的时候,就可以把每一天和今天的日期进行比较,从而添加不同的属性,用于获取添加不同的样式: (1)如果是当前月,则thisMonth属性为thisMonth,否则为空; (2)如果是当天,则isToday属性为isToday,否则为空; (3)如果是当前月,则afterToday属性为afterToday,否则为空; computed: { // 获取当前月份显示日历,共42天 visibleCalendar: function() { // 获取今天的年月日 const today = new Date() today.setHours(0) today.setMinutes(0) today.setSeconds(0) today.setMilliseconds(0) const calendarArr = [] // 获取当前月份第一天 const currentFirstDay = new Date(this.time.year, this.time.month, 1) // 获取第一天是周几 const weekDay = currentFirstDay.getDay() // 用当前月份第一天减去周几前面几天,就是看见的日历的第一天 const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000 // 我们统一用42天来显示当前显示日历 for (let i = 0; i < 42; i++) { const date = new Date(startDay + i * 24 * 3600 * 1000) calendarArr.push({ date: new Date(startDay + i * 24 * 3600 * 1000), year: date.getFullYear(), month: date.getMonth(), day: date.getDate(), // 是否在当月 thisMonth: date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() ? 'thisMonth' : '', // 是否是今天 isToday: date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate() ? 'isToday' : '', // 是否在今天之后 afterToday: date.getTime() >= today.getTime ()? 'afterToday':'})} return calendarArr}}
The calendar component vue code is as follows. When testing, you can first set the default value of time to the current month:
Morning shift and evening shift {{item}} {{item.day}} Zhang San, Li Si Wang Wu Zhao Liu / / import utils from'. / utils.js'export default {props: {time: {type: Object, default: () = > {return {}, data () {return {top: ['one', 'two', 'three', 'four', 'five', 'six' Day]}, created () {console.log ('123 days, this.time)}, methods: {/ / get}, computed: {/ / get current month display calendar Total 42 days visibleCalendar: function () {/ / get today's date const today = new Date () today.setHours (0) today.setMinutes (0) today.setSeconds (0) today.setMilliseconds (0) const calendarArr = [] / / get the first day of the current month const currentFirstDay = new Date (this.time.year, this.time.month) 1) / / get the first day of the week const weekDay = currentFirstDay.getDay () / / subtract the first day of the week from the first day of the current month The first day of the calendar const startDay = currentFirstDay-(weekDay-1) * 24 * 3600 * 1000 / / We use 42 days to display the current display calendar for (let I = 0) I
< 42; i++) { const date = new Date(startDay + i * 24 * 3600 * 1000) calendarArr.push({ date: new Date(startDay + i * 24 * 3600 * 1000), year: date.getFullYear(), month: date.getMonth(), day: date.getDate(), // 是否在当月 thisMonth: date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() ? 'thisMonth' : '', // 是否是今天 isToday: date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate() ? 'isToday' : '', // 是否在今天之后 afterToday: date.getTime() >= today.getTime ()? 'afterToday':'})} return calendarArr}}. Top-con {display: flex; align-items: center; .top {width: 14.285%; background-color: rgb (242,242,242); padding: 10px 0; margin: 5px; text-align: center;}}. Date-con {display: flex; flex-wrap: wrap; .date {width: 14.285% Text-align: center; padding: 5px; .clients {padding: 10px 0; background-color: rgba (220,245,253,0.3);} .requests {padding: 10px 0; background-color: rgba (220244209,0.3);} .thisMonth {.questions {background-color: rgb (220,245,253) Margin-top {background-color: rgb (220,244209);}} .isToday {font-weight: 700; .examples {background-color: rgb (169,225,243);}. Background-color: rgb (193,233,175);}}. Tip-con {margin-top: 51px; .tip {margin-top: 21px; width: 100% 2.3 combine the month selector with the calendar component
Schematic diagram of effect:
The combination code is as follows:
/ / month selector import Monthpicker from'. / components/Monthpicker.vue'// calendar component import Calendar from'. / components/Calendar.vue'export default {components: {monthpicker: Monthpicker, calendar: Calendar}, data () {return {time: {year: new Date (). GetFullYear (), month: new Date (). GetMonth ()}}, created () {} Methods: {/ / modify month changeMonth (time) {console.log ('time', time) this.time = time}}. Month-con {font-weight: 700 Font-size: 18px; .month {margin: 0 10px;}} .calendar-con {margin-top: 20px;}
Pass the month of the month selector to the calendar component through the changeMonth event, thus completing a simple calendar component that can modify the month.
2.4 Editing function
Schematic diagram of effect:
According to the demand, we also need to have the ability to edit the contents of the calendar. The specific requirement is to add an edit button at the top of the calendar, click to switch the calendar to edit mode, in fact, the duty information of each grid is displayed after a select button, click on the pop-up box or jump to the edit page, used to modify the duty information of the current grid. Click Save when you finish the modification, close the pop-up box or return to the calendar page, and re-query the current calendar duty information.
Of course: the above is just one of the editing features to achieve the idea, if the grid is only a text message, does not involve any complex binding, you can also click the Edit button to convert each lattice into an input input box, add a Save button on the right (you can also add a general Save button on the top of the calendar), after editing, click Save, and then restore to the text form.
Note: usually only duty information for today and beyond can be edited, so we have saved an afterToday property for each date object in the previous calendar array, which can be used to determine whether to render the select button. Because the editing function is too simple, I won't write a code demonstration.
Thank you for reading this article carefully. I hope the article "how to implement the vue Calendar component" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
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.
Views: 295
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.