日程安排小程序实战教程

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

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.hqwc.cn/news/325870.html

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

相关文章

MySQL进阶篇(二) 索引

一、索引概述 1. 介绍 索引(index)是帮助 MySQL 高效获取数据 的 数据结构(有序)。在数据之外,数据库系统还维护着满足特定查找算法的数据结构,这些数据结构以某种方式引用(指向)数…

SpringBoot内嵌的Tomcat启动过程以及请求

1.springboot内嵌的tomcat的pom坐标 启动后可以看到tomcat版本为9.0.46 2.springboot 内嵌tomcat启动流程 点击进入SpringApplication.run()方法里面 看这次tomcat启动相关的核心代码refreshContext(context);刷新上下文方法 public ConfigurableApplicationContext run(Stri…

spark的任务提交方式及流程

本地模式 local 测试用,不多赘述 分布式模式 standalone standalone集群是spark 自带的一个资源调度集群,分为两个角色,master/worker,master负责接收任务请求、资源调度(监听端口7077),worker负责运行exec…

win10报错“zlib.dll文件丢失,软件无法启动”,修复方法,亲测有效

zlib.dll文件是一个由Zlib创建的动态链接库文件,它是用于Windows操作系统的数据压缩和解压缩的软件。Zlib是一个广泛使用的软件库,广泛应用在许多不同类型的软件中,包括游戏、浏览器和操作系统。 zlib.dll的主要作用是提供数据压缩和解压缩的…

50N65-ASEMI高压N沟道MOS管50N65

编辑:ll 50N65-ASEMI高压N沟道MOS管50N65 型号:50N65 品牌:ASEMI 封装:TO-247 连续漏极电流(Id):50A 漏源电压(Vdss):650V 功率(Pd):388W 芯片个数:2 引脚数量:…

Jupyter Lab | 在指定文件夹的 jupyter 中使用 conda 虚拟环境

Hi,大家好,我是源于花海。本文主要了解如何在指定文件夹的 jupyter 中使用 conda 虚拟环境,即在 conda 里面创建虚拟环境、将虚拟环境添加至 jupyter lab/notebook、安装软件包。 目录 一、创建虚拟环境 二、激活并进入虚拟环境 三、安装 …

差分约束算法

差分约束 差分约束系统包含 m m m个涉及 n n n个变量的差额限制条件,这些差额限制条件每个都是形式为 x i − x j ≤ b ∈ [ 1 , m ] x_i-x_j\leq b_{\in[1,m]} xi​−xj​≤b∈[1,m]​的简单线性不等式。 通常我们要求解出一组可行解。 最短路差分约束 如果我们…

Pygame和Cocos2d

Pygame和Cocos2d都是 Python 中常用的游戏引擎,但它们的设计目标、特点和使用场景略有不同。 Pygame与Cocos2d,目前是使用人数最多的两个Python游戏库。根据某知名产品点评网站的数据显示,排名前五的Python 2D游戏库如下图所示。其中&#x…

16.顺子日期(14)

题目 public class Main {public static boolean isLegal(String date) {int l 0;int n date.length();while(l<(n-3)) {int t1 (int)Integer.valueOf(date.substring(l,l1));int t2 (int)Integer.valueOf(date.substring(l1,l2));int t3 (int)Integer.valueOf(date.s…

Spring——Spring AOP1(代理模式Proxy)

代理&#xff08;Proxy&#xff09;模式 1.创建工程 2.代理&#xff08;Proxy&#xff09;模式介绍 作用&#xff1a;通过代理可以控制访问某个对象的方法&#xff0c;在调用这个方法前做前置处理&#xff0c;调用这个方法后做后置处理。&#xff08;即&#xff1a; AOP的微观…

多线程基础知识点

1. 进程 一个正在执行中的程序就是一个进程&#xff0c;系统会为这个进程发配独立的【内存资源】。进程是程序的一次执行过程&#xff0c;它有自己独立的生命周期&#xff0c;它会在启动程序时产生&#xff0c;运行程序时存在&#xff0c;关闭程序时消亡。 例如&#xff1a;正…

57.6K star!一个免费开源的 API 开发生态系统

&#xff01;&#xff01;&#xff01;文末有链接&#xff01;&#xff01;&#xff01; 小伙伴们&#xff0c;你们有没有遇到这样的问题呢&#xff1f;当你作为前端开发者和后端开发者一起协同工作时&#xff0c;联调接口成了必须要做的工作。 而为了验证接口的稳定性和安全…