This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

ElementUI’s custom calendar component

The calendar component is a common component in our write management background. Now let’s write down the way I used a calendar component when I encountered this problem.

The calendar component of ElementUI, el-Calendar

Because our requirements and examples are a bit large, we have made a lot of modifications

1, style modification, we want to modify the border and hover style, but also according to the different state to show different colors, so directly modified, if you do not need, you can remove the CSS style, the code is as follows
.el-calendar-table__row .current .calendar-day{ text-align: center; color: #202535; line-height: 30px; font-size: 36px; Font-family: 'CN Bold',' CN Bold', 'CN Bold',' CN Bold'; font-weight: 700; margin-top: 15px; } .el-calendar-table__row .prev .calendar-day, .el-calendar-table__row .next .calendar-day { text-align: center; /* color: #202535; */ line-height: 30px; font-size: 36px; Font-family: 'CN Bold',' CN Bold', 'CN Bold',' CN Bold'; font-weight: 700; margin-top: 15px; } /* .el-calendar-table__row .current,.el-calendar-table__row .prev,.el-calendar-table__row .next{ height: 100px; } */. Is-selected {word-wrap: break-word! Important; font-weight: 700; font-size: 24px; margin-top: 5px; text-decoration: none; /* color: rgb(104, 143, 235); */ } .is-selected-select{ color: rgb(104, 143, 235); }. Is selected - warn {color: RGB (240178, 12); }. Is selected - error {color: RGB (0, 255); } .el-calendar-table tr td:first-child { border-left: none; } .el-calendar-table tr:first-child td { border-top: none; } .el-calendar-table td { border-bottom: none; border-right: none; vertical-align: top; -webkit-transition: background-color .2s ease; transition: background-color .2s ease; } .el-calendar-table .el-calendar-day { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 0 15px 0; height: 110px; } .el-calendar-table .current .el-calendar-day:hover { cursor: pointer; Background - color: RGB (104143235); color: #fff; border-radius: 10px; } .el-calendar-table .prev .el-calendar-day:hover, .el-calendar-table .next .el-calendar-day:hover { background-color: #fff; } .el-calendar-table .current .el-calendar-day:hover .calendar-day, .el-calendar-table .current .el-calendar-day:hover .is-selected { color: #fff; }Copy the code
2, in the page according to the different return value to determine the content and color changes

Use ternary operations to show different style changes

<div class="is-selected" :class="[item.status==0?'is-selected-select':(item.status == 1?'is-selected-warn':'is-selected-error')]">{{item.things}}</div>
Copy the code
3. Data structure
data():{ return { calendarData: [ { months: ['10', '11'],days: ['15'],things: '50W',status:0 }, { months: [' 10 ', 11 '], days: [' 16 '], things: 'not reported, the status: 1}, {up: [' 10'], days: [' 17 '], things: 'not reported, the status, 2}, {up: ['10'], days: ['02'],things: '30W' ,status:0} ], value: new Date() } }Copy the code
4. Click events
methods: // Select month changeMonth (start, end, current) {console.log('changeMonth', start, end, current)}, EventClick (event, jsEvent, pos) {console.log('eventClick', event, jsEvent, pos)}, Log ('dayClick', day, jsEvent) {console.log(' moreClick ', day, jsEvent)}, day, events, jsEvent) }, },Copy the code
5. Page code
<el-calendar> <! 2.5Slot syntax is used here. For new items use the 2.6 slot syntax --> <template slot="dateCell" slot-scope="{date, data}"> <div> <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div> <div v-for="(item,index) in calendarData" :key="index"> <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])! =-1"> <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))! =-1"> <div class="is-selected" :class="[item.status==0?'is-selected-select':(item.status == 1?'is-selected-warn':'is-selected-error')]">{{item.things}}</div> </div> <div v-else></div> </div> <div v-else></div> </div> </div> </template> </el-calendar>Copy the code