日程安排小程序实战教程

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

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
在这里插入图片描述
设置点击事件,打开新页面,我们先创建一个页面
在这里插入图片描述
输入页面的标题为日程新增
在这里插入图片描述
选中表单容器,拖入页面中
在这里插入图片描述
数据模型选择日程安排
在这里插入图片描述
选择事件下边的组件内置方法
在这里插入图片描述
点击+号继续增加事件,选择返回上一页
在这里插入图片描述
在这里插入图片描述
回到首页,选择图标组件,设置点击事件
在这里插入图片描述
选择打开页面,选择日程新增页面
在这里插入图片描述
在这里插入图片描述

最终的效果

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

在这里插入图片描述

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

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

相关文章

Erupt即开即用的后台管理系统【告别前端代码】

一、引子 【零前端代码,几行Java注解,搞定后台管理系统】 如果只是自己内部公司使用的话,大多数功能都可以满足,剩下的就是自己添砖加瓦了。 我用这个主要是简单快捷,10分钟搭建一个简易的后台管理系统。 二、基本…

【精通C语言】:深入解析C语言中的while循环

🎥 屿小夏 : 个人主页 🔥个人专栏 : C语言详解 🌄 莫道桑榆晚,为霞尚满天! 文章目录 📑前言一、while循环1.1语法1.2 执行过程解析1.3 break1.4 continue 🌤️全篇总结 &…

ssm基于vue.js的购物商场的设计与实现论文

摘 要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计算机上安装购物商场软件来发挥其高效地信息处理的作用,可以…

Notepad++ v7.7.1 安装及添加插件

1、notepad_v7.7.1.zip npp.7.7.1.Installer.x64.exe npp.7.7.1.Installer.x86.exe notepad_v7.7.1.ziphttps://www.123pan.com/s/VTMXjv-X6H6v.html 2、notepad插件包_64bit_4.zip ComparePlugin ---->文件对比插件 ComparePlugin.dllNppFTP ---->FTP、FTPES和SFTP …

软件测试/测试开发丨Selenium 高级控件交互方法

一、使用场景 使用场景对应事件复制粘贴键盘事件拖动元素到某个位置鼠标事件鼠标悬停鼠标事件滚动到某个元素滚动事件使用触控笔点击触控笔事件(了解即可) www.selenium.dev/documentati… 二、ActionChains解析 实例化类ActionChains,参…

bootstrap5实现宠物商店网站 Cat-Master

一、需求分析 宠物商店网站是指专门为宠物商店或宠物用品商家而建立的在线平台。这种网站的功能通常旨在提供以下服务: 产品展示:宠物商店网站通常会展示宠物食品、玩具、床上用品、健康护理产品等各种宠物用品的图片和详细信息。这样,潜在的…

IP2312U_VSET 5V 2A 单节锂电池同步开关降压充电IC

IP2312U是一款5V输入,支持单节锂电池同步开关降压充电管理的IC。 IP2312U集成功率MOS,采用同步开关架构, 使其在应用时仅需极少的外围器件,并有效减小整体方案的尺寸,降低BOM 成本。 IP2312U的升压开关充电转换器工作频…

PromptCast:基于提示学习的时序预测模型!

目前时序预测的SOTA模型大多基于Transformer架构,以数值序列为输入,如下图的上半部分所示,通过多重编码融合历史数据信息,预测未来一定窗口内的序列数值。 受到大语言模型提示工程技术的启发,文章提出了一种时序预测新…

未来人工智能技术发展趋势

近年来,人工智能技术在全球范围内得到了快速的发展和广泛的应用。随着技术的不断进步和创新,未来人工智能技术将会呈现出哪些发展趋势呢?本文将会从以下几个方面进行分析。 1. 多模态融合 未来的人工智能技术将会更加注重多模态数据的融合&…

如何正确安装Axure插件?详细步骤分享

产品经理在使用Axure导出html文件时,如果选择“完成后打开浏览器”,浏览器往往无法识别。此时,我们需要使用Axure官方谷歌浏览器插件直接访问浏览器中的本地html项目,否则我们需要上传到AxureCloud或使用软件本身的预览功能。接下…

玩转Mysql 三(权限管理)

一、用户管理 1、登录MySQL服务器 语法示例: mysql –h hostname|hostIP –P port –u username –p DatabaseName –e "SQL语句" 详细命令中参数说明: -h参数 后面接主机名或者主机IP,hostname为主机,hostIP为主机…

Allegro如何进行四层板板层设计

Allegro如何进行四层板板层设计 板层设计说明 在进行多层板设计时我们画好PCB板框后,都要进行板层的设计。这里就以最简单的4层板为例为大家举例说明。 板层设置 点击“Setup”->“Cross Section Editor”如下图所示: 也可以直接点击工具栏进入…

期货日数据维护与使用_日数据维护_模块运行演示

写在前面: 本文默认已经创建了项目,如果不知道如何创建一个空项目的,请参看以下两篇博文 PyQt5将项目搬到一个新的虚拟环境中 https://blog.csdn.net/m0_37967652/article/details/122625280 python_PyQt5开发工具结构基础 https://blog.cs…

C++矩阵例题分析(3):螺旋矩阵

一、审题 时间限制:1000ms 内存限制:256MB 各平台平均AC率:14.89% 题目描述 输出一个n*n大小的螺旋矩阵。 螺旋矩阵的样子: 输入描述 共一行,一个正整数n,表示矩阵变长的长度…

vue+springboot项目上传部署tomcat

下载及安装Tomcat 进入tomcat官网,Tomcat官网 选择需要下载的版本,点击下载下载路径一定要记住,并且路径中尽量不要有中文 下载后是压缩包 .zip,解压后 tomcat系统各个文件夹目录是什么意义: bin:放置的是…

吉林大学19、21级计算机学院《计算机网络》期末真题试题

一、21级(考后回忆) 一、不定项选择(一共10个选择题,一个两分,选全得满分) 不定项:可以选择1~4个 考点有: ①协议、服务 ②码分多路复用通过接受码片序列,求哪个站点发送…

AI小蜜批量写作助手:多级指令,插件,GPTs满足不同写作需求

为什么会开发这个脚本? 爆文项目的核心是矩阵怼量 具体怎么做这里介绍很清楚了: AI爆文撸流量主保姆级教程3.0脚本写作教程(解放双手) 我在刚做爆文项目时候,都是手动操作,复制指令,组合指令…

2024-01-04 用llama.cpp部署本地llama2-7b大模型

点击 <C 语言编程核心突破> 快速C语言入门 用llama.cpp部署本地llama2-7b大模型 前言一、下载llama.cpp以及llama2-7B模型文件二、具体调用总结 前言 要解决问题: 使用一个准工业级大模型, 进行部署, 测试, 了解基本使用方法. 想到的思路: llama.cpp, 不必依赖显卡硬件…

CMake入门教程全导航

&#x1f608;「CSDN主页」&#xff1a;传送门 &#x1f608;「Bilibil首页」&#xff1a;传送门 &#x1f608;「动动你的小手」&#xff1a;点赞&#x1f44d;收藏⭐️评论&#x1f4dd; 文章目录 1.CMake简介2.编程小鱼酱的课程导览2.1拥有这个专栏&#xff0c;您将获得什么…

在Uniapp中使用Echarts创建可视化图表

在uniapp中可以引入echarts创建数据可视化图表。 1. 安装Echarts 使用npm安装echarts插件&#xff0c;命令如下&#xff1a; npm install echarts --save2. 引入Eharts 在需要使用Echarts的页面引入&#xff1a; import *as echarts from echarts3. 创建实例 创建画布元素…