uniapp 简易自定义日历

注:此日历是根据接口返回的日期自动对应星期的,返回的数据中也包含星期,其实就是一个div自定义,可根据自己需求更改;
在这里插入图片描述
1、组件代码 gy-calendar-self.vue

<template>
  <view class="calendar">
	<view class="selsct-date">
		请选择预约日期
	</view>
    <!-- 日历头部,显示星期 -->
    <view class="weekdays">
      <view v-for="day in weekDays" :key="day" class="weekday">{{ day }}</view>
    </view>

    <!-- 日历主体 -->
    <view class="calendar-body">
      <view v-for="(week, weekIndex) in calendarData" :key="weekIndex" class="week">
        <view
          v-for="(day, dayIndex) in week"
          :key="dayIndex"
          @click="selectDate(day)"
          :class="{'has-schedule': day.schState !== 0 }"
          class="day"
          :style="{ width: cellWidth + 'rpx' }"
        >
          <view class="day-label">{{ day.dateLabel }}</view>
          <view v-if="day.day"
			class="day-status-has"
			:class="[day.info == '有' ? 'day-status-has' : day.info == '满' ? 'day-status-over' : 'day-status-none']"
			>
			  {{day.info}}
		  </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    scheduleData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      weekDays: ["日", "一", "二", "三", "四", "五", "六"],
      calendarData: [],
      selectedDate: null,
      cellWidth: 100, // 单位为rpx
    };
  },
  created() {
    this.generateCalendar();
  },
  methods: {
    generateCalendar() {
      const startDate = new Date(this.scheduleData[0].dateWork);
      const endDate = new Date(this.scheduleData[this.scheduleData.length - 1].dateWork);

      let currentDate = new Date(startDate);
      let week = [];

      if (currentDate.getDay() !== 0) {
        for (let i = 0; i < currentDate.getDay(); i++) {
          week.push({});
        }
      }

      while (currentDate <= endDate) {
        const dateWork = currentDate.toISOString().split('T')[0];
		const schState = this.getScheduleState(dateWork);
		const weekDay = currentDate.getDay();
		const day = currentDate.getDate();
	
		const dayObject = { date: dateWork, dateLabel: this.formatDateLabel(currentDate), schState, weekDay, day };
	
		week.push(dayObject);
	
		if (currentDate.getDate() === new Date().getDate()) {
		  // Check if the current date matches the current date
		  this.selectedDate = dayObject;
		}
	
		if (currentDate.getDay() === 6) {
		  this.calendarData.push(week);
		  week = [];
		}
	
		currentDate.setDate(currentDate.getDate() + 1);
      }

       if (week.length > 0) {
          this.calendarData.push(week);
        }
      
        // Check if the last week array has fewer than 7 elements
        const lastWeek = this.calendarData[this.calendarData.length - 1];
        const remainingCells = 7 - lastWeek.length;
      
        if (remainingCells > 0) {
          // Add empty objects to fill the remaining cells
          for (let i = 0; i < remainingCells; i++) {
            lastWeek.push({});
          }
        }
      
        this.calendarData.forEach((item) => {
          if (item && item.length > 0) {
            item.forEach((s) => {
              s.info = s.schState == 1 ? "有" : s.schState == 0 ? "满" : "无";
			  s.pkSchs = s.pkSchs
            });
          }
        });
	  console.log(this.calendarData, 'this.calendarData')
    },
    getScheduleState(date) {
      const scheduleItem = this.scheduleData.find(item => item.dateWork === date);
      return scheduleItem ? scheduleItem.schState : 0;
    },
    selectDate(day) {
      this.selectedDate = day;
	  const additionalData = this.scheduleData.find(item => item.dateWork === day.date);
	  console.log(additionalData, 'additionalData')
	  this.$emit('selceted', additionalData);
      // this.$emit('selceted', day)
    },
    isDateSelected(day) {
      return this.selectedDate && day.date === this.selectedDate.date;
    },
    formatDateLabel(date) {
	  const month = date.getMonth() + 1;
	  const day = date.getDate();
	  return `${this.padZero(month)}-${this.padZero(day)}`;
	},
	padZero(num) {
	  return num < 10 ? `0${num}` : `${num}`;
	},
  },
};
</script>

<style scoped lang="scss">
.calendar {
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  .selsct-date {
	  text-align: center;
	  margin: 20rpx auto;
  }
}

.weekdays {
  display: flex;
  justify-content: space-around;
  // background-color: #f2f2f2;
  padding: 10rpx;
  // border-bottom: 1px solid #ccc;

  .weekday {
    text-align: center;
    padding: 5rpx;
    font-weight: bold;
    flex: 1;
  }
}

.calendar-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 10rpx;
}

.day {
  position: relative;
  text-align: center;
  padding: 10rpx 0;
  cursor: pointer;
  box-sizing: border-box;
  flex: 1;

  .day-label {
    font-size: 28rpx;
    // font-weight: bold;
  }
  
  .day-status-has {
	width: 40rpx;
	height: 40rpx;
	color: #4AB039;
	opacity: 0.8;
	background-color: #EDF8EC;
	border-radius: 50%;
	text-align: center;
	line-height: 40rpx;
	border-radius: 50%;
	box-sizing: border-box;
	margin: auto;
  }
  
  .day-status-over {
	width: 40rpx;
	height: 40rpx;
	color: #EA4070;
	opacity: 0.8;
	background-color: #EFEFEF;
	border-radius: 50%;
	text-align: center;
	line-height: 40rpx;
	border-radius: 50%;
	box-sizing: border-box;
	margin: auto;
  }
  
  .day-status-none {
	width: 40rpx;
	height: 40rpx;
	color: rgb(102, 102, 102);
	opacity: 0.8;
	background-color: #EFEFEF;
	border-radius: 50%;
	text-align: center;
	line-height: 40rpx;
	border-radius: 50%;
	box-sizing: border-box;
	margin: auto;
  }

  &.selected {
    background-color: #85af8b;
    color: #fff;
  }
}

.week {
  display: flex;
  flex-wrap: wrap;
}
</style>

2、引入

<view class="calendar-box" v-if="showCalendar">
	<u-popup v-model="showCalendar" safe-area-inset-bottom mode="bottom">
		<data-calendar :scheduleData="selectedList" @selceted="selcetedDate"></data-calendar>
	</u-popup>
</view>

最后附上返回的数据格式:
只需要 dateWork 和 week
在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/329268.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[Linux 进程(四)] 再谈环境变量,程序地址空间初识

文章目录 1、前言2、环境变量2.1 main函数第三个参数 -- 环境参数表2.2 本地环境变量和env中的环境变量2.3 配置文件与环境变量的全局性2.4 内建命令与常规命令2.5 环境变量相关的命令 3、程序地址空间 1、前言 上一篇我们讲了环境变量&#xff0c;如果有不明白的先读一下上一…

黑马程序员——html css基础——day01——HTML基础

目录&#xff1a; 今日课程介绍 核心技术点标签语法HTML骨架标签的关系注释标题标签段落标签换行和水平线文本格式化标签图像标签 图像属性属性语法路径 相对路径绝对路径超链接标签音频视频综合案例一个人简介综合案例二Vue简介 1.今日课程介绍 今日目标&#xff1a;掌握标…

连接超时的问题

连接超时的问题 通用第三方工具连接超时 connect timeout 方案一&#xff1a; /etc/ssh/sshd_config node1上操作&#xff0c;图是错的 方案二&#xff1a; windows上Hosts文件域名解析有问题 比如&#xff1a; 192.168.xx.100 node1 192.168.xx.161 node1 两个都解析成node…

Peter算法小课堂—并查集

我们先来看太戈编程467题 攀亲戚 题目描述&#xff1a; 最近你发现自己和古代一个皇帝长得很像&#xff1a;都有两个鼻子一个眼睛&#xff0c;你想知道这皇帝是不是你的远方亲戚&#xff0c;你是不是皇亲国戚。目前你能掌握的信息有m条&#xff0c;关于n个人&#xff1a;第i条…

论文翻译: Vision-Language Foundation Models as Effective Robot Imitators

Vision-Language Foundation Models as Effective Robot Imitators 使用视觉-语言基础模型对机器人进行有效的模仿 文章目录 Vision-Language Foundation Models as Effective Robot Imitators使用视觉-语言基础模型对机器人进行有效的模仿ABSTRACT摘要1 INTRODUCTION1 引言2 …

huggingface学习 | 云服务器使用git-lfs下载huggingface上的模型文件

文章目录 一、找到需要下载的huggingface文件二、准备工作&#xff08;一&#xff09;安装git-lfs&#xff08;二&#xff09; 配置git ssh 三、检查ssh连接huggingface是否成功 一、找到需要下载的huggingface文件 huggingface官网链接&#xff1a;https://huggingface.co/ 以…

东北编程语言???

在GitHub闲逛&#xff0c;偶然发现了东北编程语言&#xff1a; 东北编程语言是由Zhanyong Wan创造的&#xff0c;它使用东北方言词汇作为基本关键字。这种编程语言的特点是简单易懂&#xff0c;适合小学文化程度的人学习&#xff0c;并且易于阅读、编写和记忆。它的语法与其他编…

Linux下安装Mysql【CentOS7 】

Linux下安装Mysql 一、Linux下安装Mysql-5.7.41【tar包下载安装】1.1.首先检查是否已经安装过mysql1.2.下载Linux版本的Mysql-5.71.3.解压缩1.4.安装执行 rpm 安装包需要先下载 openssl-devel 插件1.5.安装 Mysql5.7 执行 rpm 安装包1.6.Mysql相关操作命令1.7.查看Mysql-5.7 临…

生物制药行业研究:预计2029年将达到559亿美元

生物制药是指运用微生物学、生物学、医学、生物化学等的研究成果&#xff0c;从生物体、生物组织、细胞、器官、体液等。综合利用微生物学、化学、生物化学、生物技术、药学等科学的原理和方法制造的一类用于预防、治疗和诊断的制品。 生物制药上游行业主要涉及酵母粉、葡萄糖…

【JavaEEj进阶】 Spring实现留言板

文章目录 &#x1f38d;预期结果&#x1f340;前端代码&#x1f384;约定前后端交互接⼝&#x1f6a9;需求分析&#x1f6a9;接⼝定义 &#x1f333;实现服务器端代码&#x1f6a9;lombok &#x1f332;服务器代码实现&#x1f334;运⾏测试 &#x1f38d;预期结果 可以发布并…

Qt 调试系统输出报警声以及添加资源

文章目录 前言一、方法1 使用 Qsound1.添加都文件 直接报错2.解决这个错误 添加 QT multimedia3. 加入代码又遇到新的错误小结 二、第二种方法1.引入库2.添加资源2.1依次点击Qt--->Qt Resource File--->Choose2.2给资源文件起个名字&#xff0c;如&#xff1a;res&#…

【管理篇 / 升级】❀ 13. FortiOS 7.4固件升级新规则 ❀ FortiGate 防火墙

【简介】飞塔防火墙的固件升级一直是所有厂家中最好的。只要有注册官方帐号&#xff0c;有注册设备&#xff0c;并且只要有一台设备在服务期内&#xff0c;即可下载所有型号的所有版本的固件。即使其它设备服务期已过&#xff0c;也可以通过固件文件手动升级&#xff0c;避免防…

QT界面表格加入勾选框和表格更改颜色显示NG和OK

在QTableWidget上添加框选&#xff0c;获取框选状态 添加选项框在表格中 //添加选择框QTableWidgetItem* check0 new QTableWidgetItem();check0->setCheckState(Qt::Checked);ui->tableWidget_TestResult->setItem(0, 0, check0);ui->tableWidget_TestResult->…

linux安装QQ(官方正版)

QQ官网上有支持linux系统的版本&#xff0c;所以去官网直接下载正版就好。 安装步骤&#xff1a; 1.进入官网&#xff1a;https://im.qq.com/linuxqq/index.shtml 2.选择版本&#xff1a;X86版下载dep 如下所示&#xff1a; 3.下载qq安装包&#xff1a; 4.使用命令安装qq s…

读人工智能专业可以考什么证书呢?

由国家工信部权威认证的人工智能证书是跨入人工智能行业的敲门砖&#xff0c;随着人工智能技术的发展越来越成熟&#xff0c;相关的从业人员也会剧增&#xff0c;证书的考取难度也会变高。如果已经从事或者准备从事人工智能行业的人员&#xff0c;对于考证宜早不宜迟&#xff0…

自建服务器如何备案?

随着互联网的普及和发展&#xff0c;越来越多的人开始考虑自建服务器。然而&#xff0c;在中国大陆地区&#xff0c;自建服务器需要进行备案。本文将介绍自建服务器备案的流程、所需材料以及注意事项。 一、备案流程 确定备案地区 根据《中华人民共和国计算机信息网络国际联网…

excel(vab)删除空行

删除第一、二、三列位空的所有行&#xff08;8000)行范围以内 代码如下&#xff1a; Sub Macro1()Dim hang As Integer For hang 8000 To 1 Step -1If Sheet1.Cells(hang, 1) "" And Sheet1.Cells(hang, 2) "" And Sheet1.Cells(hang, 3) "&quo…

软件测试|Docker cp命令详解:在Docker容器和主机之间复制文件/文件夹

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

安泰功率信号源设计方法有哪些

在电子系统中&#xff0c;功率信号源是一个关键的组成部分&#xff0c;用于提供稳定、可靠的电能。这篇文章将详细介绍功率信号源的设计方法&#xff0c;包括选择功率源类型、设计电源拓扑结构、提高效率和管理电磁干扰等方面。 1.功率源类型的选择 选择适当的功率源类型是功率…

MySQL下对[库]的操作

目录 创建数据库 创建一个数据库案例&#xff1a; 字符集和校验规则&#xff1a; 默认字符集&#xff1a; 默认校验规则&#xff1a; 查看数据库支持的字符集&#xff1a; 查看数据库支持的字符集校验规则&#xff1a; 校验规则对数据库的影响&#xff1a; 操作数据…