vue項(xiàng)目實(shí)現(xiàn)會(huì)議預(yù)約功能(包含某天的某個(gè)時(shí)間段和某月的某幾天)

更新時(shí)間：2023年02月17日 11:04:20 作者：coderdwy

這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)會(huì)議預(yù)約功能(包含某天的某個(gè)時(shí)間段和某月的某幾天),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、一天的時(shí)間段預(yù)約

在這里插入圖片描述

會(huì)議預(yù)約有以下操作：

1.點(diǎn)擊預(yù)約按鈕，彈窗最近一周的預(yù)約時(shí)間點(diǎn)（半小時(shí)一個(gè)點(diǎn)），預(yù)約時(shí)間為5:00到24:00;
2.超過(guò)當(dāng)前時(shí)間的時(shí)間點(diǎn)不允許再預(yù)約，已經(jīng)預(yù)約的時(shí)間不允許再預(yù)約，預(yù)約的時(shí)間段內(nèi)有已經(jīng)預(yù)約的時(shí)間點(diǎn)不允許預(yù)約；
3.預(yù)約時(shí)間為時(shí)間段，所以最少包含兩個(gè)時(shí)間點(diǎn)，選中兩個(gè)時(shí)間點(diǎn)時(shí)，兩個(gè)時(shí)間點(diǎn)被選中，若兩個(gè)時(shí)間點(diǎn)內(nèi)有其他時(shí)間點(diǎn)，其他時(shí)間點(diǎn)也要被選中；
4.已經(jīng)選中的時(shí)間點(diǎn)再次點(diǎn)擊時(shí)，取消選中，

html部分

<el-dialog title="預(yù)約"  :visible.sync="isAppoint" width="40%" :before-close="closeAppoint">
      <el-form label-width="120px" :model="appointForm">
        <div style="margin:20px;">
          <div style="display:flex;justify-content:space-between;">
            <span v-for="(item,index) in week" :key="index" :class="{'top_style':item.is_active==0,'top_active':item.is_active==1}" @click="changWeek(item,index)">
              <div style="height:25px;line-height:20px;">{{item.month}}-{{item.date}}</div>
              <div style="height:25px;line-height:20px;">{{item.day}}</div>
            </span>
          </div>
          <div style="display:flex;margin:20px 50px;font-size:18px;justify-content:space-between;">
            <div style="display:flex;"><div style="background-color:#C8C9CC;width:40px;height:20px;margin-right:10px;"></div><div>不可預(yù)約</div></div>
            <div style="display:flex;"><div style="background-color:#ffa4a4;width:40px;height:20px;margin-right:10px;"></div><div>已有預(yù)約</div></div>
            <div style="display:flex;"><div style="background-color:#3EA7F1;width:40px;height:20px;margin-right:10px;"></div><div>當(dāng)前預(yù)約</div></div>
          </div>
          <div style="margin:20px 50px;height:250px" class="button_wrap">
            <el-button v-for="(item,index) in timeArr" :key="index" @click="changTime(item,index)" :type="item.status==0?'':item.status==1?'danger':item.status==2?'info':'primary'" :disabled="item.status==1||item.status==2" class="button_style">{{item.time}}</el-button>
          </div>
        </div>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="備注：">
              <el-input placeholder="請(qǐng)輸入" v-model="remark" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="closeAppoint">取消</el-button>
        <el-button type="primary" @click="saveAppoint" style="margin-left:20px;">確定</el-button>
      </div>
    </el-dialog>

css部分

.top_style,.top_active{
  border:1px solid #AAA;
  padding:3px 20px;
  text-align:center;
}
.top_active{
  border-color:#02A7F0;
  color: #02A7F0;
}
.button_style{
  text-align:center;
  float:left;
  width: 80px;
}

js部分

1.點(diǎn)擊預(yù)約時(shí)

記錄下會(huì)議id及name，位置id及name，并把會(huì)議id，當(dāng)前時(shí)間（0點(diǎn)~24點(diǎn)）傳過(guò)去，后臺(tái)需要根據(jù)時(shí)間返回時(shí)間點(diǎn)數(shù)組

	//預(yù)約
    addAppoint(val){
      this.isAppoint=true;
      this.appointAreaId=val.appointAreaId;
      this.appointAreaName=val.appointAreaName;
      this.positionId=val.positionId;
      this.positionName=val.positionName;
      this.getAppoint();
      let formData={
        appointAreaId:val.appointAreaId,
        startTime:this.getYMD(new Date())+' '+'00:00:00',
        endTime:this.getYMD(new Date())+' '+'23:59:59'
      }
      this.getAppointed(formData);
    },
    //每次打開(kāi)預(yù)約彈窗時(shí)，默認(rèn)選中當(dāng)天
    getAppoint(){
      let arr = []
      for (let i = 0; i < 7; i++) {
        arr.push(this.dealTime(i))
      }
      arr[0].is_active=1;
      this.week=arr;
      this.dateNow=this.week[0].full;
    },

2.獲取時(shí)間數(shù)組

//獲取時(shí)間數(shù)組
    getAppointed(formData){
      appointTime(formData).then(res=>{
        this.timeArr=res.data.data;
        if(res.data.code==200){
          this.timeArr=res.data.data;
        }
      })
    },

時(shí)間數(shù)組格式為：時(shí)間點(diǎn)+狀態(tài)；未選中狀態(tài)為0，已經(jīng)預(yù)約過(guò)的狀態(tài)為1，不可預(yù)約(過(guò)期時(shí)間)的狀態(tài)為2，當(dāng)前預(yù)約(即點(diǎn)擊時(shí)選中)的狀態(tài)為3（這個(gè)狀態(tài)為點(diǎn)擊時(shí)判斷，不要接口返回）

在這里插入圖片描述

3.處理未來(lái)七天的函數(shù)

// 處理未來(lái)七天的函數(shù)
    dealTime(num){
      let time = new Date() // 獲取當(dāng)前時(shí)間日期
      let date = new Date(time.setDate(time.getDate() + num)).getDate() //這里先獲取日期，在按需求設(shè)置日期，最后獲取需要的
      let newDate=(date.toString()).padStart(2,"0");
      let month = time.getMonth() + 1 // 獲取月份
      let newMonth=(month.toString()).padStart(2,"0");
      let day = time.getDay() //  獲取星期
      let year=time.getFullYear();
      let full=year+'-'+month+'-'+date;
      switch (day) { //  格式化
        case 0:
          day = "星期日"
          break
        case 1:
          day = "星期一"
          break
        case 2:
          day = "星期二"
          break
        case 3:
          day = "星期三"
          break
        case 4:
          day = "星期四"
          break
        case 5:
          day = "星期五"
          break
        case 6:
          day = "星期六"
          break
      }
      let obj = {
        date: newDate,
        day: day,
        is_active: 0,
        month: newMonth,
        year:year,
        full:full,
      }
      return obj // 返回對(duì)象
    },

4.點(diǎn)擊切換星期狀態(tài)

//點(diǎn)擊切換星期狀態(tài)
    changWeek(val,index){
      for(let i=0;i<this.week.length;i++){
        this.week[i].is_active=0;
      }
      //星期切換時(shí)，其他星期狀態(tài)重置為0，即未選中，當(dāng)前星期狀態(tài)為1，即選中
      this.week[index].is_active=1;
      let formData={
        appointAreaId:this.appointAreaId,
        startTime:val.full+' '+'00:00:00',
        endTime:val.full+' '+'23:59:59'
      };
      this.dateNow=val.full;//dateNow為當(dāng)前選中時(shí)的日期（年月日）
      this.getAppointed(formData)
    },

5.選中時(shí)間點(diǎn)時(shí)，判斷狀態(tài)及改變狀態(tài)

//選中時(shí)間點(diǎn)時(shí)，判斷狀態(tài)及改變狀態(tài)
//appointTimeArr 保存點(diǎn)擊的按鈕的數(shù)組，即當(dāng)前選中數(shù)組
    changTime(val,index){
    //當(dāng)前選中數(shù)組的長(zhǎng)度小于2時(shí)，即點(diǎn)擊了1次、2次
      if(this.appointTimeArr.length<2){
        this.timeArr[index].status=3;點(diǎn)擊按鈕的狀態(tài)設(shè)為3，即當(dāng)前選中
        this.appointTimeArr.push(index);
        //當(dāng)前選中數(shù)組的長(zhǎng)度為2，即點(diǎn)擊了2次
        if(this.appointTimeArr.length==2){
        //選中數(shù)組的倆個(gè)下標(biāo)一樣時(shí)，即同一個(gè)時(shí)間點(diǎn)點(diǎn)擊了兩次，即取消選中，則把狀態(tài)都重置為0，并且清空選中數(shù)組
          if(this.appointTimeArr[0]==this.appointTimeArr[1]){
            this.timeArr[this.appointTimeArr[0]].status=0;
            this.appointTimeArr=[];
          }else{
          	//選中數(shù)組的兩個(gè)下下標(biāo)不一樣時(shí)，對(duì)數(shù)組進(jìn)行排序，順序排序，如若是[3,2]則改為[2,3]，開(kāi)始時(shí)間點(diǎn)和結(jié)束時(shí)間點(diǎn)
            this.appointTimeArr=this.appointTimeArr.sort(function(a,b){return a-b});
            //求出開(kāi)始時(shí)間和結(jié)束時(shí)間之間選中的時(shí)間點(diǎn)個(gè)數(shù)，
            let len=this.appointTimeArr[1]-this.appointTimeArr[0];
            //根據(jù)個(gè)數(shù)，把選中時(shí)間段內(nèi)的時(shí)間的狀態(tài)都改為3，即當(dāng)前選中
            for(let i=0;i<len;i++){
            //將下選中數(shù)組內(nèi)容的下標(biāo)與時(shí)間數(shù)組的下標(biāo)狀態(tài)進(jìn)行比對(duì)，若是有狀態(tài)等于1的，即已有預(yù)約，則做出提示，并且把開(kāi)始時(shí)間點(diǎn)和結(jié)束時(shí)間點(diǎn)重置為空，循環(huán)終止
              if(this.timeArr[this.appointTimeArr[0]+i].status==1){
                this.$message.warning("已預(yù)約過(guò)的時(shí)間不允許預(yù)約！")
                this.timeStart='';
                this.timeEnd='';
                break
              }else{
              將最終獲取到的選中數(shù)組下標(biāo)與時(shí)間數(shù)組進(jìn)行比對(duì)，獲取開(kāi)始時(shí)間點(diǎn)和結(jié)束時(shí)間點(diǎn)，并且狀態(tài)改為3，即當(dāng)前選中
                this.timeArr[this.appointTimeArr[0]+i].status=3;
                this.timeStart=this.timeArr[this.appointTimeArr[0]].time;
                this.timeEnd=this.timeArr[this.appointTimeArr[1]].time;
              }
            }
            
          }
        }
      }else if(this.appointTimeArr.length=3){//當(dāng)前選中數(shù)組的長(zhǎng)度等于3時(shí)，即點(diǎn)擊了3次，則把前兩個(gè)狀態(tài)改為0，即未選中，把第三次點(diǎn)擊時(shí)的狀態(tài)設(shè)為3，即當(dāng)前選中
        for(let i=0;i<this.timeArr.length;i++){
          if(this.timeArr[i].status===3){
            this.timeArr[i].status=0;
          }
        }
        this.appointTimeArr=[];
        this.appointTimeArr.push(index);
        this.timeArr[index].status=3;
      }
    },

6.保存

saveAppoint(){
	//保存時(shí)，開(kāi)始時(shí)間點(diǎn)和結(jié)束時(shí)間點(diǎn)必須存在，即選中數(shù)組的長(zhǎng)度為2，否則做出提示，并且將選中的下標(biāo)對(duì)贏得時(shí)間點(diǎn)狀態(tài)重置為0，即未選中
      if(this.timeStart!=''&&this.timeEnd!=''){
        this.appointForm.appointAreaId=this.appointAreaId;
        this.appointForm.appointAreaName=this.appointAreaName;
        this.appointForm.positionId=this.positionId;
        this.appointForm.positionName=this.positionName;
        this.appointForm.remark=this.remark;
        //對(duì)開(kāi)始時(shí)間和結(jié)束時(shí)間進(jìn)行拼接，即當(dāng)前選中星期對(duì)應(yīng)的日期+當(dāng)前選中時(shí)間點(diǎn)
        this.appointForm.startTime=this.dateNow+' '+this.timeStart;
        this.appointForm.endTime=this.dateNow+' '+this.timeEnd;
        appoint(this.appointForm).then(res=>{
          if(res.data.code==200){
            this.$message.success(res.data.message)
            this.remark='';
            this.isAppoint=false;
            this.isMeeting=false
            this.getList();
          }else{
            this.$message.error(res.data.message)
          }
        })
      }else{
        this.$message.error("請(qǐng)選擇預(yù)約時(shí)間")
        for(let i=0;i<this.timeArr.length;i++){
          if(this.timeArr[i].status==2){
            this.timeArr[i].status=0
          }
        }
      }
    },

7.彈窗關(guān)閉

closeAppoint(){
      this.isAppoint=false
      //彈窗關(guān)閉時(shí)，星期重置，默認(rèn)選中星期數(shù)組的第一個(gè)，即當(dāng)前日期對(duì)應(yīng)的星期；重置備注；重置當(dāng)前星期對(duì)應(yīng)的時(shí)間數(shù)組中的狀態(tài)為3的時(shí)間點(diǎn)狀態(tài)為0，即未未選中
      for(let i=0;i<this.week.length;i++){
        this.week[i].is_active=0;
      }
      this.week[0].is_active=1;
      this.remark='';
      for(let i=0;i<this.timeArr.length;i++){
        if(this.timeArr[i].status==3){
          this.timeArr[i].status=0;
        }
      }
    },

二、一月的天數(shù)預(yù)約（最少一天）

在這里插入圖片描述

1.時(shí)間數(shù)組同樣由后端返回，把每月的第一天和最后一天傳給后端，后端接口返回日期數(shù)組，
格式也是time+status，0代表未選中，1代表已有預(yù)約，2代表不可預(yù)約，3代表當(dāng)前選中
2.與時(shí)間點(diǎn)預(yù)約不同的是，天數(shù)預(yù)約可以選擇一個(gè)時(shí)間點(diǎn)，即某個(gè)月的某一天，其他的邏輯基本都差不多了，剩下的就是一些代碼的不同了
3.天數(shù)預(yù)約比較有意思的就是會(huì)用到日歷！沒(méi)錯(cuò)就是日歷，一開(kāi)始是想著使用一些什么日歷插件的，但是考慮到日歷插件能滿(mǎn)足我目前需求的可能性不大，所以只好想著給他畫(huà)出來(lái)！哈哈，去百度了億篇博客，然后自己再匯總+修改，so，手繪的日歷出來(lái)了，切換月份啊，顯示數(shù)據(jù)啊都么得問(wèn)題的，嘿嘿，針不戳針不戳~

在這里插入圖片描述

html

<el-dialog title="預(yù)約"  :visible.sync="isAppoint" width="40%" :before-close="closeAppoint">
      <el-form label-width="120px" :model="appointForm">
        <div class="calender">
          <div class="calender_title">
            <div class="arrow arrow-left" @click="prev()">&lt;</div>
            <div class="data">{{ currentYear }}-{{ currentMonthChinese }}</div>
            <div class="arrow arrow-right" @click="next()">></div>
          </div>
          <div class="calender_content">
            <div class="row title">
              <span class="title_span" v-for="item in title" :key="item">{{item}}</span>
            </div>
            <div class="row content">
              <span style="margin-bottom:5px;width:60px;margin-left:10px;" class="button_no" v-for="(item,index) in prevDays" :key="index+'a'"></span>
              <el-button class="content_button" v-for="(item,index) in timeArr" :key="index" @click="changTime(item,index)" :type="item.status==0?'':item.status==1?'danger':item.status==2?'info':'primary'" :disabled="item.status==1||item.status==2">{{index+1 }}</el-button>
            </div>
          </div>
        </div>
        <div class="button_wrap">
          <div style="display:flex;"><div style="background-color:#C8C9CC;width:40px;height:20px;margin-right:10px;"></div><div>不可預(yù)約</div></div>
          <div style="display:flex;"><div style="background-color:#ffa4a4;width:40px;height:20px;margin-right:10px;"></div><div>已有預(yù)約</div></div>
          <div style="display:flex;"><div style="background-color:#3EA7F1;width:40px;height:20px;margin-right:10px;"></div><div>當(dāng)前預(yù)約</div></div>
        </div>
        <el-row style="width:500px;margin:0 auto;">
          <el-col>
            <el-form-item label="備注：" label-width="60px">
              <el-input placeholder="請(qǐng)輸入" v-model="remark" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="closeAppoint">取消</el-button>
        <el-button type="primary" @click="saveAppoint" style="margin-left:20px;">確定</el-button>
      </div>
    </el-dialog>

data(){
	reurn{
		appointForm:{},//預(yù)約
	    isAppoint:false,//
      appointAreaId:'',//預(yù)約的路演廳id
      appointAreaName:'',//預(yù)約的路演廳name
      remark:'',//備注
      appointTimeArr:[],//預(yù)約選中時(shí)間數(shù)組
      title: ["日", "一", "二", "三", "四", "五", "六"],
      timeArr:[],
      dateNow:'',//預(yù)約年月
      timeStart:'',//預(yù)約開(kāi)始日期
      timeEnd:'',//預(yù)約結(jié)束日期
      currentDay: new Date().getDate(),
      currentMonth: new Date().getMonth(),
      currentYear: new Date().getFullYear(),
	}
}

computed: {
    // 獲取中文的月份    顯示：8月
    currentMonthChinese() {
      return new Date(this.currentYear, this.currentMonth).toLocaleString(
        "default",{ month: "short" }
      );
    },
    currentDays() {
      // Date中的月份是從0開(kāi)始的
      return new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
    },
    prevDays() {
      // 獲取上個(gè)月的最后一行的日期
      let data = new Date(this.currentYear, this.currentMonth, 0).getDate();
      let num = new Date(this.currentYear, this.currentMonth, 1).getDay();
      var days = [];
      while (num > 0) {
        days.push(data--);
        num--;
      }
      return days.sort();
    },
  },

methods:{
	/* 以下日歷相關(guān)*/
	//日歷點(diǎn)擊事件
    changTime(val,index){
      if(this.appointTimeArr.length<2){
        this.timeArr[index].status=3;
        this.appointTimeArr.push(index);
        if(this.appointTimeArr.length==1){
          this.timeStart=this.appointTimeArr[0];
          this.timeEnd=this.appointTimeArr[0];
        }else if(this.appointTimeArr.length==2){
          if(this.appointTimeArr[0]==this.appointTimeArr[1]){
            this.timeArr[this.appointTimeArr[0]].status=0;
            this.appointTimeArr=[];
          }else{
            this.appointTimeArr=this.appointTimeArr.sort(function(a,b){return a-b});
            let len=this.appointTimeArr[1]-this.appointTimeArr[0];
            for(let i=0;i<len;i++){
              if(this.timeArr[this.appointTimeArr[0]+i].status==1){
                this.$message.warning("已預(yù)約過(guò)的時(shí)間不允許預(yù)約！")
                this.timeStart='';
                this.timeEnd='';
                break
              }else{
                this.timeArr[this.appointTimeArr[0]+i].status=3;
                this.timeStart=this.timeArr[this.appointTimeArr[0]].time;
                this.timeEnd=this.timeArr[this.appointTimeArr[1]].time;
              }
            }
            
          }
        }
      }else if(this.appointTimeArr.length=3){
        for(let i=0;i<this.timeArr.length;i++){
          if(this.timeArr[i].status===3){
            this.timeArr[i].status=0;
          }
        }
        this.appointTimeArr=[];
        this.appointTimeArr.push(index);
        this.timeArr[index].status=3;
      }
    },
    //點(diǎn)擊左側(cè)箭頭
    prev() {
      // 點(diǎn)擊上個(gè)月，若是0月則年份-1
      // 0是1月  11是12月
      if (this.currentMonth == 0) {
        this.currentYear -= 1;
        this.currentMonth = 11;
      } else {
        this.currentMonth--;
      }
      let date=this.currentYear+'-'+(this.currentMonth+1);
      let formData={
        appointAreaId:this.appointAreaId,
        startTime:this.getFirst(date)+' '+"00:00:00",
        endTime:this.getLast(date)+' '+"23:59:59"
      }
      this.dateNow=date;
      this.getAppointed(formData)
    },
    //點(diǎn)擊右側(cè)箭頭
    next() {
      if (this.currentMonth == 11) {
        this.currentYear++;
        this.currentMonth = 0;
      } else {
        this.currentMonth++;
      }
      let date=this.currentYear+'-'+(this.currentMonth+1);
      let formData={
        appointAreaId:this.appointAreaId,
        startTime:this.getFirst(date)+' '+"00:00:00",
        endTime:this.getLast(date)+' '+"23:59:59"
      }
      this.dateNow=date;
      this.getAppointed(formData)
    },
     /* 以上日歷相關(guān)*/
    getYM(time){
      let date = new Date(time)
      let Str=date.getFullYear() + '-' +
      (date.getMonth() + 1)
      return Str
    },
    getFirst(time){
      let date = new Date(time)
      let Str=date.getFullYear() + '-' +
      (date.getMonth() + 1) + '-' + 
      date.getDate()
      return Str
    },
    getLast(time){
      var y = new Date(time).getFullYear(); //獲取年份
      var m = new Date(time).getMonth() + 1; //獲取月份
      var d = new Date(y, m, 0).getDate(); //獲取當(dāng)月最后一日
      let Str=y + '-' +m + '-' + d
      return Str
    },
    //獲取時(shí)間數(shù)組
    getAppointed(formData){
      appointTime(formData).then(res=>{
        this.timeArr=res.data.data;
        if(res.data.code==200){
          this.timeArr=res.data.data;
        }
      })
    },
    //預(yù)約
    addAppoint(val){
      this.isAppoint=true;
      this.appointAreaId=val.appointAreaId;
      this.appointAreaName=val.appointAreaName;
      this.positionId=val.positionId;
      this.positionName=val.positionName;
      let formData={
        appointAreaId:val.appointAreaId,
        startTime:this.getFirst(this.getYM(new Date()))+' '+'00:00:00',
        endTime:this.getLast(this.getYM(new Date()))+' '+'23:59:59'
      }
      this.dateNow=this.getYM(new Date());
      this.getAppointed(formData);
    },
    saveAppoint(){
      if(this.timeStart!=''&&this.timeEnd!=''){
        this.appointForm.appointAreaId=this.appointAreaId;
        this.appointForm.appointAreaName=this.appointAreaName;
        this.appointForm.positionId=this.positionId;
        this.appointForm.positionName=this.positionName;
        this.appointForm.remark=this.remark;
        this.appointForm.startTime=this.timeStart+' '+"00:00:00";
        this.appointForm.endTime=this.timeEnd+' '+"23:59:59";
        appoint(this.appointForm).then(res=>{
          if(res.data.code==200){
            this.$message.success(res.data.message)
            this.remark='';
            this.currentDay=new Date().getDate();
            this.currentMonth=new Date().getMonth();
            this.currentYear=new Date().getFullYear();
            this.isAppoint=false;
            this.isMeeting=false
            this.getList();
          }else{
            this.$message.error(res.data.message)
          }
        })
      }else{
        this.$message.error("請(qǐng)選擇預(yù)約時(shí)間")
        for(let i=0;i<this.timeArr.length;i++){
          if(this.timeArr[i].status==3){
            this.timeArr[i].status=0
          }
        }
      }
    },
    closeAppoint(){
      this.isAppoint=false
      this.remark='';
      for(let i=0;i<this.timeArr.length;i++){
        if(this.timeArr[i].status==3){
          this.timeArr[i].status=0;
        }
      }
      this.currentDay=new Date().getDate();
      this.currentMonth=new Date().getMonth();
      this.currentYear=new Date().getFullYear();
    },
}

css

.button_wrap{
  margin: 0 auto;
  width: 480px;
  display: flex;
  font-size: 18px;
  justify-content: space-between;
  margin-bottom: 20px;
}
.button_no{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  background: #FFFFFF;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 400;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.calender {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  // margin-left:50px;
}
.calender_title {
  display: flex;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.arrow {
  width: 50px;
  height: 100%;
}
.data {
  font-size: 20px;
}
.title_span {
  width: calc(100% / 7);
  text-align: center;
  height: 40px;
  line-height: 40px;
}
.row {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.prevDay {
  color: #fff;
  background-color: #eee;
}

.content_span {
  width: calc(100% / 7);
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.content_button{
  margin-bottom:5px;
  width:60px;
  margin-left:10px;
}

.calender_content {
  width: 100%;
  height: 250px;
}
.content {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

到此這篇關(guān)于vue項(xiàng)目實(shí)現(xiàn)會(huì)議預(yù)約（包含某天的某個(gè)時(shí)間段和某月的某幾天）的文章就介紹到這了,更多相關(guān)vue項(xiàng)目會(huì)議預(yù)約內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: