在线日程管理工具的制作原理

日常工作或者活动比价多的朋友相信都用过日程表，来提醒自己要做什么，或者做过什么。那么对日程进行管理是必不可少的。

这里有一种常见的日程管理的方式：点击日期，在一个固定的区域显示活动；可以对活动进行添加和修改。看一下大致的效果是怎样的？

想自己操作一下，更直接的感受效果，可以点击预览效果。https://tm4qzd.axshare.com

首先分析一下，这个日程管理的交互逻辑是怎么样的

1、点击日期，显示与日期相对应的活动

2、当日没有活动，可以添加活动

3、当日已有活动，可以修改活动

怎么样，有没有觉得很眼熟？没错了，不止是在日程管理可以看到，许多管理类的产品都可以看到类似的逻辑。只要掌握了方法，做其他的产品时都没有问题了。

那么就让我们开始吧，直接来掌握做法。

在这个例子里面，由两部分组成，一个是日历，一个是活动内容。

日历部分比较简单，我这里是直接用矩形搭建出来，大家也可以采用其他方式去做。

重点！重点！下面的活动内容的部分，应该怎么做呢？有朋友第一反应可能是用动态面板去做。31天做31个状态，点击日期时进行状态的切换。这不失为一种方法，这里我要介绍的另一种方法，利用中继器去做。

对样式进行简单的设置就可以了。设置分页，每页显示一项，并且起始页设置为当前日期。这样设置，就能够单独显示一天的活动内容。在点击日历中日期的时候，用中继器动作“设置当前页面”即可。

这样，我们刚才分析出来的第一点交互逻辑就完成了。

下面要到活动内容（中继器）中去完成其他的交互逻辑了。

内容有两种可能性，一是没有活动，二是已有活动。没有活动的时候，需要添加活动，所以按钮应该是“添加”。添加完成之后，可以再次进行修改，这时按钮应该是“修改”。这里我的默认按钮是“修改”，所以下面设置“添加”。什么情况下设置为“添加”？

看数据集，很容易知道当plan这一列的没有内容也就是为空的时候，该日是没有活动，可以添加的。很简单，将按钮的文字设置为“添加”，就行了。

添加和修改内容应该怎么做呢？这个问题就是我们也是使用中继器制作的一个关键，大家应该记得，中继器有一个动作—更新行。我们只需输入内容，点击保存之后，将数据更新为我们输入的内容就可以了。

当这个按钮是“添加”和“修改”按钮的时候，点击之后，我们可以输入或修改内容。既然要输入或修改，那么我们就在这里用一个多行文本框来制作输入框。先隐藏了，点击的时候再显示出来就行。添加时，输入框原本内容是空的，修改时，输入框原本内容是中继器数据集中的内容，跟数据集都是能匹配的。所以，在这个情况下需要先让输入框获取到中继器的数据对应的内容。

在输入框中编辑好文字之后，我们就可以保存这些文字了。按照刚才我们的分析，利用中继器的更新行，只需将item.plan的数据更新为我们输入的文字就可以了。

再将输入框隐藏，按钮的文字修改，我们的完整的交互就完成了。

最后再来理一下整个交互逻辑。点击日期，如果没有活动，点击添加按钮，输入内容，点击保存，添加完成，获得内容；如果已有活动，点击修改按钮，修改内容，点击保存，修改完成，获得新内容。

简单画一下图，一目了然，整个逻辑非常清楚了。在整理思路的时候，简单的画一下图对我们是很有帮助的，能让我们的思路清晰。

这个例子说起来不难，在我们的工作、生活中也见得不少了，只要理解了思路，就能够举一反三，随机应变了。