一文读懂-如何使用自定义控件建一个日历

日常开发当中，苍穹平台为我们提供了很多公共组件，富文本、轮播图、代码编辑器等，基本上涵盖了我们95%以上的开发所需要功能。除此之外，还给我们提供了一个自定义控件，来满足我们想要自定义开发功能的需求。今天我们来介绍一个如何使用自定义控件生成一个日历，如果还不知道自定义控件如何使用的话，可以先学习一下https://club.kdcloud.com/school/liveCourse/338。

首先我们先建立动态表单，并添加自定义控件，标识为edge_cuscal设置高度为100%

接下来就是设置我们控件方案的资源文件，第一步需要画一个如图所示的页面，这里就不再展示代码如何实现的了，html和css文件已以附件形式上传。

本文以div方式画的页面（前端大佬可自由发挥），其中需要对上个月按钮（左箭头）、当前月、下个月按钮（右箭头）以及每个日期div赋id值，日期赋值为date_行_列的形式。如图所示：

完成页面创建之后，我们来创建必要的JS文件，JS文件结构非常固定，我们只需要关注init、update以及最后将文件注册到方案中的标识（register中的内容，本文为calendar）即可。

Init方法中为初始化方法，只需要将初始化时需要调用的操作信息放到该方法中即可，本文中我们初始化方法为CalendarInitial，只需要将action赋值为CalendarInitial。而update方法主要为与服务端交互的内容。

本文中InvokeCal方法为初始化、与服务端交互通用方法，需要在方法中判断参数是否合理以及与后端交互的具体内容，初始化时我们所传参数为CalendarInitial，所以先加载CSS文件以及html文件。

下面我们就把刚刚创建好的html、css以及js文件打包上传建立一个新的日历方案，方案id为在js设置的标识calendar，方案以zip压缩包形式上传

配置完成之后，看一下预览效果

接下来我们需要向服务器请求数据，向服务器发送请求的方法为model.invoke(方法名,参数);

服务器端处理请求需要我们用插件来实现，继承AbstractFormPlugin，在custonEvent中可以获取到前端的请求，e.getEventArgs()可以获取到请求参数，e.getEventName()获取请求方法名。

在setDivDate中，是处理每一个日期div中应该放的数字，需要根据月份计算出每个日期在表格中所处的位置，另外还需要判断出非本月的日期。处理完成后拼装返回数据，date为当月日期，otherDatas为非本月日期，datas为每一个日期在表格中所处位置，action为返回前端后需要处理的方法

最后获取页面中的自定义控件，并将数据返回到页面当中

前端得到后端返回的数据后，会执行update操作，根据后端返回数据，action为CalendarInitData进行页面赋值操作。

进入页面数据更新方法后，将date赋值到本月日期，遍历datas到每个div中，并将otherDatas中的日期字体置为灰色。

到了这一步我们的日历就完成80%的工作了，部署插件后来看下效果

已经可以展示出一个完整的日历了，接下来做一下翻页效果，监听上个月（lastMonth）、下个月（nextMonth）的点击事件，该事件添加到初始化方法当中，将当前月nowMonth的信息以及点击的id发送到服务端，方法如下图：

服务端依旧是在customEvent方法中处理逻辑

在tabDateMonth中先根据传入的日期月、点击的id来计算所需要显示的月的信息，并将该日传传入setDivDate重新计算每个div需要显示的日期。

完成之后来看下效果：

以上就是一个简单的用自定义控件开发日历的方法，自定义控件最主要的逻辑就是前端update方法与后端的customEvent之间的交互，功能上并不复杂，只是如果写前端页面经验不多在调试方面有些困难。另外，可以在日历上增加工作任务，形成一个工作日历，该如何实现呢？感兴趣的小伙伴可以试着做一下