日程安排小程序实战教程

日常中我们经常有一些事情需要提醒自己,使用日历的形式比较符合实际的使用习惯。本篇我们就利用微搭低代码工具带着大家开发一款日程安排的小程序。

1 创建数据源

登录微搭低代码控制台,打开数据模型,点击创建
在这里插入图片描述
输入数据源的名称日程安排
在这里插入图片描述
点击编辑添加字段
在这里插入图片描述
输入标题,类型选择文本
在这里插入图片描述
输入内容,类型选择文本
在这里插入图片描述

2 创建应用

点击侧边栏导航,创建应用,选择从空白创建
在这里插入图片描述
在这里插入图片描述

3 搭建首页

首页我们一共有三个功能点

  • 日历显示日程的一个情况,如果当天有日程安排显示一个红色的小圆点
  • 选中小圆点,下边出现列表
  • 点击+号按钮跳转到日程的新增页面

首先我们来实现一下日历的效果

3.1 日历的效果

从右侧的组件库里拖入日历组件
在这里插入图片描述
日历如果要显示数据,需要创建一个变量,在左侧的代码区点击+号
在这里插入图片描述
选择新建微搭数据表查询
在这里插入图片描述
选择日程安排数据表,触发方式选择入参变化时自动执行
在这里插入图片描述
切换到配置页签,点击展示配置的fx
在这里插入图片描述
输入如下表达式

$w.query1.data.records.map(item=>({matchDate:$w.DateText(item.createdAt, 'YYYY-MM-DD'),marked:'red'}))

3.2 数据列表展示

选中日期下边会出现一个日程的列表,我们使用数据列表组件来实现。从右侧的组件库拖入数据列表组件
在这里插入图片描述
切换到属性页签,选择日程安排数据源
在这里插入图片描述
数据筛选,我们设置让我们的创建时间大于等于我们的选中日期,小于我们选中日期加一天
在这里插入图片描述

$w.DateAdd($w.calendar1.value, 1)

3.3 创建日程

往页面中添加一个图标,选择+号
在这里插入图片描述
切换到属性,设置定位为固定定位,距右边5,距下边5
在这里插入图片描述
设置点击事件,打开新页面,我们先创建一个页面
在这里插入图片描述
输入页面的标题为日程新增
在这里插入图片描述
选中表单容器,拖入页面中
在这里插入图片描述
数据模型选择日程安排
在这里插入图片描述
选择事件下边的组件内置方法
在这里插入图片描述
点击+号继续增加事件,选择返回上一页
在这里插入图片描述
在这里插入图片描述
回到首页,选择图标组件,设置点击事件
在这里插入图片描述
选择打开页面,选择日程新增页面
在这里插入图片描述
在这里插入图片描述

最终的效果

点击+号,输入日程,可以看到列表页多了一条数据

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【PaperReading- VLM】1. FERRET

CategoryContent论文题目FERRET: REFER AND GROUND ANYTHING ANYWHERE AT ANY GRANULARITY作者Haoxuan You (Columbia University), Haotian Zhang, Zhe Gan, Xianzhi Du, Bowen Zhang, Zirui Wang, Liangliang Cao (Apple AI/ML), Shih-Fu Chang (Columbia University), Yinfe…

【【深入浅出了解静态时钟分析和时钟约束】】

深入浅出了解静态时钟分析和时钟约束 时序分析是什么? 我们提出一些特定的时序要求(或者说是添加特定的时序约束),使用特定的时序模型,针对特定的电路进行分析。分析的最终结果是要求系统时序满足我们提出的要求。 这…

Flink异步IO

本文讲解 Flink 用于访问外部数据存储的异步 I/O API。对于不熟悉异步或者事件驱动编程的用户,建议先储备一些关于 Future 和事件驱动编程的知识。 本文代码gitee地址: https://gitee.com/ddxygq/BigDataTechnical/blob/main/Flink/src/main/java/operator/AsyncIODemo.java …

【HarmonyOS4.0】第九篇-ArkUI布局容器组件(一)

容器组件指的是它可以包含一个或多个子组件的组件,除了前边介绍过的公共属性外。 一、线性布局容器(Row、Column) 线性容器类表示按照水平方向或者竖直方向排列子组件的容器,ArkUI开发框架通过 Row 和 Colum 来实现线性布局。 …

matlab使用PhysioNet的WFDB工具箱

目录 PhysioNet 官方安装示例 PhysioNet 官方 官方的文档:Waveform Database Software Package (WFDB) for MATLAB and Octave 简介:用于MATLAB的WFDB工具箱是用于读取、写入和操作(处理)PhysioNet数据的MATLAB函数的集合&#x…

源码搭建教学:连锁餐饮APP开发实战

连锁餐饮APP,对于很多从事餐饮行业的人来说不会陌生,同样这个项目本身就有着很高的热度。今天,小编将深入为大家讲述一下此系统的前后端开发、数据库设计、用户界面设计等方面,让您深入了解全栈开发的方方面面。 一、项目准备与规…

JavaScript系列——闭包

文章目录 闭包定义词法作用域闭包示例使用场景创建私有变量ES5 中,解决循环变量的作用域问题 小结 闭包定义 闭包,是函数及其关联的周边环境的引用的组合,在闭包里面,内部函数可以访问外部函数的作用域,而外部函数不能…

java通过HttpClient方式实现https请求的工具类(绕过证书验证)

目录 一、引入依赖包二、HttpClient方式实现的https请求工具类三、测试类 一、引入依赖包 引入相关依赖包 <!--lombok用于简化实体类开发--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><option…

AD软件与其他EDA软件工程的问题汇总

1:如何在AD中使用eagle工程 在ad中打不开原理图&#xff0c;要使用导入功能,转化为ad的文件后&#xff0c;就可以打开了 2:打开旧版本的Protel文件 有时候新版本的AD打不开以前Protel的PCB文件&#xff0c;可以在DXP菜单下的Extension下进行配置&#xff08;Configure&…

求幸存数之和 - 华为OD统一考试

OD统一考试(C卷) 分值: 100分 题解: Java / Python / C++ 题目描述 给一个正整数列nums,一个跳数jump,及幸存数量left。运算过程为:从索引为0的位置开始向后跳,中间跳过 J 个数字,命中索引为 J+1 的数字,该数被敲出,并从该点起跳,以此类推,直到幸存left个数为止。…

制造知识普及--MES系统中的调度排产管理

要想弄清楚MES系统调度排产的管理机制&#xff0c;则要首先搞清楚车间调度排产是一套怎样的工作流程&#xff0c;它的难点在什么地方&#xff1f; 生产调度指的是具体组织实现生产作业计划的工作&#xff0c;是对执行生产作业计划过程中发生的问题和可能出现的问题&#xff0c…

工业以太网的网络安全与数据传输性能

工业以太网主要是一种用于工业控制系统的网络通信协议&#xff0c;它基于以太网技术&#xff0c;将其应用于工业环境中&#xff0c;以实现高速、可靠、安全的数据传输。跟传统的专用工业网络比较&#xff0c; 工业以太网具有更大的带宽、更低的成本以及更好的扩展性&#xff0c…

轮询定时器 清除 + vue2.0

需求? Gin Vue Element UI框架中, 我的大屏可视化项目, 大屏页面, 里边写了多个轮询定时器. 离开页面需要清理掉, 要不然切换路由还会在后台运行, 页面是自动缓存状态, 也不存在销毁一说了 所以通过路由router配置中, 页面路由监听中, 进行监听路由变化, 但是也没生效 …

MySQL中datetime和timestamp的区别

datetime和timestamp的区别 相同点: 存储格式相同 datetime和timestamp两者的时间格式都是YYYY-MM-DD HH:MM:SS 不同点: 存储范围不同. datetime的范围是1000-01-01到9999-12-31. 而timestamp是从1970-01-01到2038-01-19, 即后者的时间范围很小. 与时区关系. datetime是存储…

Vue2 实现带输入的动态表格,限制el-input输入位数以及输入规则(负数、小数、整数)

Vue2 实现el-input带输入限制的动态表格&#xff0c;限制输入位数以及输入规则&#xff08;负数、小数、整数&#xff09; 在这个 Vue2 项目中&#xff0c;我们实现一个限制输入位数&#xff08;整数16位&#xff0c;小数10位&#xff09;以及输入规则&#xff08;负数、小数、…

Android 11.0 mtp模式下连接PC后只显示指定文件夹功能实现

1. 前言 在android11.0的系统rom定制化开发中,对于usb作为otg连接电脑时,在mtp模式下会作为一个存储器在电脑端显示,作为电脑的 一个盘符,来显示设备的内部存储的文件,所以说如果要对设备内部的资料做保密处理的时候,需要在mtp模式下不显示某些 文件夹,接下来就分析下相…

Fluids —— Narrow band and variable density

目录 Narrow Band Variable Density Narrow Band Narrow band是一种有效的加速模拟、节省资源、及优化整体性能的方法&#xff1b;其想法是&#xff0c;只在表面上带有一定厚度的粒子&#xff0c;表面下的一切都不是通过粒子表示的&#xff1b; 具有大量粒子的模拟&#xff0…

Leetcode2981. 找出出现至少三次的最长特殊子字符串 I

Every day a Leetcode 题目来源&#xff1a;2981. 找出出现至少三次的最长特殊子字符串 I 解法1&#xff1a;滑动窗口 暴力枚举 滑动窗口枚举窗口内字符相同的字符串&#xff0c;再暴力枚举长度相等的字符串。 代码&#xff1a; /** lc appleetcode.cn id2981 langcpp**…

DHCP,怎么在Linux和Windows中获得ip

一、DHCP 1.1 什么是dhcp DHCP动态主机配置协议&#xff0c;通常被应用在大型的局域网络环境中&#xff0c;主要作用是集中地管理、分配IP地址&#xff0c;使网络环境中的主机动态的获得IP地址、DNS服务器地址等信息&#xff0c;并能够提升地址的使用率。 DHCP作为用应用层协…

DRAM、SRAM、PSRAM和Flash

DRAM、SRAM和Flash都属于存储器&#xff0c;DRAM通常被称为内存&#xff0c;也有些朋友会把手机中的Flash闪存误会成内存。SRAM的存在感相对较弱&#xff0c;但他却是CPU性能发挥的关键。DRAM、SRAM和Flash有何区别&#xff0c;它们是怎样工作的&#xff1f; DRAM&#xff1a;…