今天来给大家带来的是inBuilder低代码平台特性推荐系列第十八期——表单设计器集成预约日历组件。

一、场景介绍

项目上希望用日历的形式展示某地点在一段时间内的预约记录，表单设计器新增支持创建日历预约视图，并配置预约属性。

二、运行效果

三、前置步骤：

此需求的场景里，要求有两个实体结构，一个是预约的地点表（例如会议室），一个是预约的记录表（例如会议室预约记录表）。所以我们首先创建两个业务实体：

01预约地点实体

以会议室为例，常用字段有地点编号（必需）、地点名称（必需）、备注、容纳人数、是否有投影等。

02预约记录表

以会议室预约为例，常用字段有地点（关联预约地点实体、必需）、预定标题（可以是预定主题等内容，必需）、开始时间（必需）、结束时间（必需）、预定类型等。

四、开发步骤

以下步骤，以会议室预定为例，说明了如何在表单设计器中创建预约日历视图并维护预约控件的属性。

01列表启用多视图

以管理列表表单为例，首先在控件树中右键选择【表格节点】，右键菜单点击【启用多视图】

02在多视图中新增日历视图

添加成功后，可以通过视图切换按钮，将页面切换到日历模式：

03 维护日历外观类属性

设计器已默认初始了日历控件的部分属性，若项目有样式类需求，可以在此进行调整。

默认视图类型：日历控件左上角，支持切换日视图和周视图，默认展示日视图。

地点列宽度：日历控件左侧地点列宽度。

日视图行高：日视图下表格每行的高度。

周视图行高：周视图下表格每行的高度。

周视图列宽度：周视图下表格每列的宽度。

04地点配置

地点列标题

地点数据源

首先需要根据地点（会议室实体）创建一个地点的维护表单，例如列卡类维护表单。

然后，回到日历预约表单，地点数据源选择的是地点维护表单对应的VO。选择后，设计器自动填充数据源请求url和数据源请求类型，开发者无需修改。

地点展示模板

模板编辑器中已预置了地点展示模板，可以在此模板中选择需要展示的字段，操作步骤如下动图所示：

地点标识字段、地点名称字段

05 日视图配置

在日视图展示模式下，表格中以横条展示预定信息。

日视图预定信息模板

模板编辑器中已预置了预定信息模板，可以在此模板中选择需要展示的字段，操作步骤如下动图所示：

日视图自定义样式

若需要根据某字段来区分横条的样式（例如背景颜色），可以配置自定义样式。

新增预定文本

用户将鼠标放在空白单元格上时，单元格显示的文本

06预定配置

依次选择预定实体中的关键字段。

地点标识字段：选择关联的会议室字段

预定主题名称字段：选择预定主题字段

开始时间字段、结束时间字段：选择预定的开始时间、结束时间字段

07详情卡片配置

详情卡片是指用户点击某条预定记录时弹出的卡片：

展示列：用户希望在详情卡片中展示的字段。

详情徽章模板：用户希望在详情卡片中以徽章的格式展示某个字段，通常为类型字段。

模板编辑器中已预置了徽章模板，可以在此模板中选择需要展示的字段，操作步骤如下动图所示：

详情卡片自定义样式：详情卡片的样式类，通常用于配置一些背景色。

此例中配置的背景色与日视图自定义样式一致。

08配置新增预定事件

用户点击空白单元格时，需要跳转到卡片页面进行预定信息的新增操作。我们需要在新增事件中选择一个卡片页面。

欢迎大家下载inBuilder开源社区版，体验上述特性，开启低代码开发之旅！