uniapp会议预约顶部横向滑动日历和时间线_uniapp 时间轴会议预约

<template>
  <view class="container">
    <view class="swiper" >
      <view 
          v-for="(item, index) in dateList" 
          :key="index" 
          @click ="ClickDateCheng(item.id, index)" 
          :class="{'selected': selectedIndex === index}"   
          class="box">
          <text style="padding-bottom: 4rpx;">{{ item.label }}</text>
          <text >{{ item.day}}</text>
      </view>
    </view>
    <view class="all">
        <text>{{ year }}年</text>
        <view @click="show = true">{{month }}月</view>
    </view>
    <u-calendar :show="show" @close="show = !show" @confirm="confirm"></u-calendar>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      show: false,
      single: '',
      dateList: [],
      dateListArray: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      maxCount: 15, // 横向日期默认显示的日期数量
      clientWidthCount: 0, // 每行显示的数量
      selectedIndex: 0,
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
    };
  },
  methods: {
    // 初始化日期数组
    initDates() {
      // { label："周一",'day':"22", value:"2023-12-22"}
      this.dateList.push(this.formatData(new Date()))
      for (let i = 1; i <= this.maxCount; i++) {
        let now = new Date();
        this.dateList.push(this.formatData(new Date(now.setDate(now.getDate()+i))))
      }
    },
    formatData(date){
      let nowStr=this.$u.timeFormat(date.getTime(), 'yyyy-mm-dd')
      let label=this.dateListArray[date.getDay()]
      return {
        label:label,
        day:date.getDate(),
        value:nowStr
      }
    },
    confirm(e) {
      const date = new Date(e[0]);   
      this.year = date.getFullYear(); 
      this.month = date.getMonth() + 1;
      const selectedIndex = this.dateList.findIndex(item => item.value === this.$u.timeFormat(date.getTime(), 'yyyy-mm-dd'));
      if (selectedIndex !== -1) {
        this.selectedIndex = selectedIndex;
      }
      this.show = false;  
    },
    // 添加日期到数组
    addDate(date, txt) {
      let year = date.getFullYear();
      let mon = (date.getMonth() + 1 < 10 ? '0' : '') + (date.getMonth() + 1);
      let day = (date.getDate() < 10 ? '0' : '') + date.getDate();
      let week = txt !== "" ? txt : this.dateListArray[date.getDay()];
      let newObj = {
        id: year + '-' + mon + '-' + day,
        text: week,
        mon: mon,
        day: day
      };
      this.Dates.push(newObj);
    },
    // 点击日期事件
    ClickDateCheng(id, index) {
      this.selectedIndex = index;
      this.dateCurrentStr = id;
      // uni.showToast({
      //   title: '加载中...',
      //   icon: 'loading',
      //   duration: 1000
      // });
    }
  },
  created() {
    // 初始化日期数组
    this.initDates();
  },
 
};
</script>
 
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: row;
  width: 100vw;
  .swiper {
    background: #4b9efc;
    color: white;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    white-space: nowrap;
    padding: 8rpx 0;
    .box {
      width: calc(100% / 6 - 50rpx);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      //width: calc( 100% / 7 - 270rpx );
      padding: 8rpx 15rpx;
      margin: 0 10rpx;
    }
    .selected {
      background-color: #fff; 
      color: #54a6f8; 
      border-radius: 10rpx;
    }
  }
  .all {
    width: 180rpx;
    font-size: 12px;
    display: flex;
    padding: 10rpx;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: #2e8ff1;
    color: #FFFFFF;
  }
}
</style>

时间线：

<template>
  <view>
    <view class="item">
      <view v-for="(item,index) in nums" :key="index" >
        <view>
          {{item}}
        </view>
      </view>
    </view>
    <view style="display: flex;">
      <view v-for="(item,index) in nums" :key="index"
            :style="{width:100/nums.length + '%'}" style="background:#fac7c7;height:30rpx">
        <view v-for="(deepitem,dindex) in colorDeeps"
              :key="dindex">
          <view v-if="item>= deepitem.start && item <deepitem.end" class="deep">
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      nums: [
        7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24
      ],
      colorDeeps:[
        { start: 12, end: 14},
        { start: 8, end: 9 }
      ],
    }
  },
  methods: {
  }
}
</script>
 
<style lang="scss" scoped>
.item{
  font-size: 14px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #999999;
  margin-bottom: 6rpx;
}
.deep{
  background: #fc5967;
  height:30rpx;
}
</style>