技術標籤：VUEjavascriptCalendar自定義日曆

基於element ui的Calendar實現新增自定義內容

• 目標
• • 官方文件
  • 自定義要改的內容
  • 建立axios例項

目標

實現的內容是在Element UI的 Calenda 中可以自己新增內容

官方文件

通過設定名為 dateCell 的 scoped-slot 來自定義日曆單元格中顯示的內容。在 scoped-slot 可以獲取到 date（當前單元格的日期）, data（包括 type，isSelected，day 屬性）。

自定義要改的內容

直接看下面code

1. value的值是選中月份的值
2. calendarData中的每一物件的dutyDate的格式是2021-01-20
3. 主要方法handleAddClick，handleEventClick
4. 使用者資訊格式：

 {
            "id": 14,
            "loginName": "nige",
            "userName": "倪割",
            "ding_user_id": "23123123"
        },

以下為完整程式碼：

<template>
  <div id="app"
 
>
    <div class="search-container">
      <div class="search-item-container">

        <el-dropdown trigger="click">
          <el-button plain>
            產品:{{ productList.find(o=>o.key===product).name
            }}
            <i
              class
 
="el-icon-caret-bottom el-icon--right"
            />
          </el-button>
          <el-dropdown-menu slot="dropdown" class="no-border">
            <el-radio-group v-model="product" style="padding: 5px 15px;">
              <el-radio
                v-for="item in productList"
                :key="item.key"
                :value="item.key"
                :label="item.key"
              >{{ item.name }}</el-radio>
            </el-radio-group>
          </el-dropdown-menu>
        </el-dropdown>

        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="getCalendarData()"
        >{{ $t('table.search') }}</el-button>
      </div>
    </div>
    <el-aside direction="horizontal" style="margin-left:10px;padding-right:10px;background-color:skyblue" width="100%">
      您可以直接在以下日曆中點選<b style="background-color:rgb(163, 241, 238);">日期</b> 新增值班人員；點選 <b style="color: #f8a535;">名字</b> 修改值班人員。
    </el-aside>
  <!--value的值是選中月份的值 -->
    <el-calendar id="calendar" v-model="value">
      <template slot="dateCell" slot-scope="{date, data}">
        <!--自定義內容 item.dutyDate的格式是2021-01-20,-->
        <div @click="handleAddClick(data)">
          <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
          <div v-for="(item,index) in calendarData" :key="index">
           
            <div v-if="(item.dutyDate.split('-')[1]).indexOf(data.day.split('-').slice(1)[0])!=-1">
              <div
                v-if="(item.dutyDate.split('-')[2]).indexOf(data.day.split('-').slice(2).join('-'))!=-1"
              >
                <el-tooltip class="item" effect="dark" :content="item.loginName" placement="right">
                  <div class="is-selected" @click="handleEventClick(item)">{{ item.userName }}</div>
                </el-tooltip>
              </div>
              <div v-else />
            </div>
            <div v-else />
          </div>
        </div>
      </template>
    </el-calendar>
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <el-form ref="varform" :model="formData" label-position="right" label-width="80px">

        <el-form-item label="值班人員" prop="loginName">
          <!-- 此處必須加value-key，否則每次都顯示最後一個選項 -->
          <el-select
            v-model="formData.loginName"
            placeholder="選擇人員"
            value-key="loginName"
            filterable
            clearable
            icon="el-icon-caret-bottom el-icon--right"
          >
            <el-option
              v-for="(item) in userList"
              :key="item.loginName"
              :value="item"
              :label="item.loginName"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false;cancel()">取 消</el-button>
        <el-button v-if="!isupdate" type="primary" @click="dialogVisible = false;add()">確 定</el-button>
        <el-button v-if="isupdate" type="primary" @click="dialogVisible = false;update()">更新</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetch } from '@/utils/requestJira'
let jiraBugServer="http://192.168.11.12:8080"

export default {
  name: 'Calendar',
  data() {
    return {
      product: 'bixin',
      productList: [
        { key: 'xxx', name: '測試之迷' },
        
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        }
      },
      isupdate: false,
      formData: {
        data: '',
        component: undefined,
        loginName: undefined
      },
      userList: [],
      dialogVisible: false,
      calendarData: [
        // {
        //   id: 1,
        //   dutyDate: "2021-01-15",
        //   loginName: "zhangsan",
        //   username: "張三",
        //   component: "feixiang"
        // },
      ],
      value: new Date()
    }
  },

  watch: {
    value: function() {
      var month = this.value.getMonth() + 1
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
    }
  },
  created() {
    this.getUserList()
  },
  mounted() { this.getCalendarData() },
  methods: {
    getCalendarData() {
      const url = jiraBugServer + '/api/getList'
      const params = { component: this.product }
      this.$post(url, params).then(res => {
        if (res.code == 8000) {
          this.calendarData = res.result
        } else {
          this.$message.error('獲取資料出錯')
        }
      })
    },
    getUserList() {
      const url =
        'https://user_info_api_url'
      fetch(url).then(res => {
        this.userList = res.data
        // console.log(this.userList);
      })
    },
    threeBtnListener() {
      this.$nextTick(() => {
        // 點選上個月
        const prevBtn1 = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(1)'
        )
        prevBtn1.addEventListener('click', () => {
          console.log('上個月')
        })
        // 點選今天
        const prevBtn2 = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(2)'
        )
        prevBtn2.addEventListener('click', () => {
          console.log('今天')
        })
        // 點選下個月
        const prevBtn3 = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(3)'
        )
        prevBtn3.addEventListener('click', () => {
          console.log('下個月')
        })
      })
    },
    handleAddClick(data) {
      // debugger;
      // console.log(data);
      this.dialogVisible = true
      this.formData.data = data.day
    },
    handleEventClick(item) {
    //   console.log("update...");
      this.formData.component = item.component
      this.formData.loginName = item.loginName
      this.formData.id = item.id
      this.isupdate = true
    },
    add() {
      const url = jiraBugServer + '/api/addContent'
      const params = {
        dutyDate: this.formData.data,
        loginName: this.formData.loginName.loginName,
        userName: this.formData.loginName.userName,
        component: this.product
      }
      this.calendarData.push(params)
      this.$post(url, params).then(res => {
        if (res.code == 8000) {
          this.$message.success(res.msg)
          this.getCalendarData()
        }
      })
    //   console.log(this.calendarData);
      // console.log(this.formData);
      // this.formData = {};
    },
    update() {
      const url = jiraBugServer + '/api/editContent'

      this.calendarData.forEach(item => {
        if (item.id == this.formData.id) {
          item.component = this.product
          item.dutyDate = this.formData.data
          item.loginName = this.formData.loginName.loginName
          item.userName = this.formData.loginName.userName
          this.$post(url, item).then(res => {
            if (res.code == 8000) {
              this.$message.success(res.msg)
              this.getCalendarData()
            }
          })
        }
      })
      this.isupdate = false
      // this.formData = {};
    },
    cancel() {
      this.isupdate = false
      // this.formData = {};
    }
  }
}
</script>

<style>
.calendar-day {
  text-align: center;
  color: #202535;
  background-color:rgb(163, 241, 238);
  line-height: 30px;
  font-size: 12px;
}
.is-selected {
  color: #f8a535;
  font-size: 10px;
  margin-top: 5px;
}
#calendar
  .el-button-group
  > .el-button:not(:first-child):not(:last-child):after {
  content: "當月";
}

.fc-day-grid-event {
  margin: 1px 2px 0;
  padding: 0 1px;
}
</style>

建立axios例項

import axios from "axios";

// For common config
axios.defaults.headers.post["Content-Type"] = "application/json";

const mainAxios = axios.create({
  baseURL: 'https://dingtalk.nige.com',
  timeout: 30000
});

export function fetch(url, config = {}) {
  return new Promise((resolve, reject) => {
    mainAxios.get(url, { params: config })
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

參考連結，感謝 https://blog.csdn.net/qq_39863107/article/details/105712061