Requirements:

  1. Calendars distinguish between trading days and non-trading days
  2. You can switch panels to view trading day information throughout the year
  3. You can manually adjust trading days, non – trading days

demo

Sequencing – Use software and framework versions

  1. Vue 2.6.11
  2. Ant – design – vue 1.7.1
  3. Moment.js (date-conversion dependency)

Design ideas

  1. You can implement a basic framework for a calendar using the component library’s A-Calendar tag
  2. The daily module realizes the display of trading day and non-trading day
  3. And the date of expiration and the date of the gray display, and cannot switch the trading status
  4. Future dates can be switched by clicking on the Use A-PopConfirm TAB, or by right-clicking

Specific code process

1. Template Indicates the template area

<template>
  <div style="margin: 0 auto">
    <h1 style="text-align: center">The calendar component</h1>
    <a-row class="calendarContent" style="margin: 0 auto; width: 100%">
      <div class="calendarBox">
        <a-calendar :value="value" @panelChange="panelChange" @select="selectDate">
          <ul slot="dateCellRender" slot-scope="value" class="events">
            <li v-for="item in getListData(value)" :key="item.date">
              <a-tooltip
                v-if="item.date<nowDate || item.date == nowDate"
              >
                <template slot="title">
                  <span>This parameter can be set only on the next trading day</span>
                </template>
                <div class="cellBlockOld" v-if="item.date < nowDate">
                  <span v-if="item.workFlag=='0'">Trading day</span>
                  <span v-if="item.workFlag=='1' && item.date ! =next">The trading day</span>
                </div>
                <div class="cellBlockNow" v-if="item.date == nowDate">
                  <span v-if="item.workFlag=='0' && item.date == nowDate">Trading day</span>
                  <span v-if="item.workFlag=='1' && item.date == nowDate">The trading day</span>
                </div>
              </a-tooltip>
              <a-popconfirm
                v-if="item.workFlag == '1' && item.date>nowDate"
                title="Set to trading day"
                @confirm="setDate(0)"
                @cancel="cancel"
              >
                <div class="cellBlockNext1">
                <span v-if="item.workFlag== '1'">The trading day</span>
                </div>
              </a-popconfirm>
              <a-popconfirm
                v-if="item.workFlag == '0' && item.date>nowDate"
                title="Set to non-trading day"
                @confirm="setDate(1)"
                @cancel="cancel"
              >
                <div class="cellBlockNext0">
                  <span v-if="item.workFlag== '0' && item.date ! = next">Trading day</span>
                  <span v-if="item.workFlag== '0' && item.date == next">Next trading day</span>
                </div>
              </a-popconfirm>
            </li>
          </ul>
        </a-calendar>
      </div>
    </a-row>
  </div>
</template>
Copy the code

Notes and difficulties:

  1. The data binding of the A-Calendar tag, and the data traversal logic, where the data is bound to the A-Calendar tag, the switch of the date panel and the events of the selected date are bound here; The inner nested slots render to render date 7 days a week, binding data hardly changes and can be used directly.

     <a-calendar :value="value" @panelChange="panelChange" @select="selectDate">
          <ul slot="dateCellRender" slot-scope="value" class="events">
            <li v-for="item in getListData(value)" :key="item.date">
            </li>
   </ul>
</a-calendar>
Copy the code

  2. Transaction state and style control, add multiple judgment criteria in the template area

  3. Embed A-PopConfirm to modify the transaction status via bubble events

2. Js area

<script>
import moment from 'moment'

export default {
  name: ' '.components: {},
  watch: {},
  data () {
    return {
      value: moment(new Date()),
      dataList: [{date: '20210228'.workFlag: '1'
        },
        {
          date: '20210301'.workFlag: '0'
        }
        // The mock data is omitted here. You can use mock data or create some data in data].now: new Date(),
      selectDateValue: ' '}},methods: {
    moment,
    panelChange (value) {
      console.log('Click and switch events in Panel')
      console.log(value)
      this.value = value
    },
    selectDate (value) {
      console.log('Selected date event')
      console.log(value)
      this.selectDateValue = value.format('YYYYMMDD')},// Switch between trading day and non-trading day, switch the trading state at the same time the panel trading state changes, at the same time send a request to the background (add request by yourself)
    setDate (val) {
      console.log(val)
      var newDataList = []
      // forEach and map operate on arrays
      this.dataList.forEach(e= > {
        if (e.date === this.selectDateValue) {
          e.workFlag = val
          newDataList.push(e)
        } else {
          newDataList.push(e)
        }
      })
      this.dataList = newDataList
      console.log(this.dataList)
    },
    cancel () {

    },
    getListData (value) {
      var listData = []
      // Note 1: Match the daily trading status to the calendar date by comparing the date
      this.dataList.forEach(e= > {
        // Match the array to the calendar date
        if (e.date === value.format('YYYYMMDD')) {
          listData.push(e)
        }
      })
      return listData
    }
  },
  computed: {
    nowDate: function () {
      const nowDate = moment(this.now).format('YYYYMMDD')
      return nowDate
    },
    next: function () {
      var next
      var nextDate = new Date(this.now - 0 + 86400000)
      next = moment(nextDate).format('YYYYMMDD')
      return next
    }
  },
  created () {
  },
  mounted () {
  }
}
</script>
Copy the code

Notes and difficulties:

  1. Make sure the daily trading status matches the calendar date by comparing the date
  2. A method to modify the status of a transaction

conclusion

A simple calendar component even if the building is basically completed, the specific code can go to gitee below to see, if there are mistakes and improvements, welcome to point out the exchange.

Find me

Gitee:gitee.com/heyhaiyon/a…

Wechat official account: Heyhaiyang

The Denver nuggets: heyhaiyang

B: Heyhaiyang

Headline number: Heyhaiyang