Axure 制作动态日历记录

最近学习Axure的使用，学到制作自己的元件，又恰好客户制作的原型中需要用到日历，就想到自己制作一个动态变化的日历表，添加到“我的原件”中，于是，我就开始了研究。。。

首先看一下效果：第一张图为界面原始效果，第二张图为点击箭头之后的变化图。

2017年9月份日历

2017年10月份日历

首先我们得知道客户使用日历的先后顺序：显示日历——选择年份月份——选择日期

第一步：显示日历

显示内容：当前年份月份，以及日期。年份月份都很好知道，通过电脑系统即可知道当前年份和月份，方法：获取年份，[[Now.getFullYear()]]；获取月份，[[Now.getMonth()]]；

显示日期就比较麻烦了，要确定每月第一天是星期几，确保每一个单元格内容正确显示，经过多次尝试最终得出正确打开方式：

计算每月第一天：

蔡勒（Zeller）公式：w=y+[y/4]+[c/4]-2c+[26(m+1)/10]+d-1；w：星期；c：世纪-1；y：年（两位数）；m：月（m大于等于3，小于等于14，即在蔡勒公式中，某年的1、2月要看作上一年的13、14月来计算，比如2003年1月1日要看作2002年的13月1日来计算）；d：日；[ ]代表取整，即只要整数部分。(C是世纪数减一，y是年份后两位，M是月份，d是日数。1月和2月要按上一年的13月和 14月来算，这时C和y均按上一年取值。)

蔡勒公式得出的结果除以7 取余，余数即为每月第一天对应的是星期几，如：2017年09月第一天为星期五。

需要注意的是：蔡勒公式计算中  取整  问题，Axure  里面没有取整计算方式，所以我一开始使用的是  [[LVAR.toFixed(0)]]，这个方法是保留0位小数，在一开始的设计中，九月份能正常显示，但是十月份第一天就往后推一天（本来是周日，变成周一），后来查资料发现这个公式有四舍五入的效果，而恰好在蔡勒公式中的  [26(m+1)/10]  在十月份的时候是28.6，那么在最终结果上就多出“1”，所以十月份第一天就往后推了一天；问题找到，解决问题：将  [[LVAR.toFixed(0)]]  替换为  [[LVAR.split('.',1)]]。该函数意为：将字符串以“.”分割为1个字符串数组，成功解决问题。

在单元格中正确显示日期：将每个单元格设置名称，从第一个个开始设置为1，第二个设置为2，第三个设置为3，第四个。。。，以此类推，将所有单元格设置名称（星期所在单元格除外）。给每个单元格赋值：[[This.name-MinuendNumber]]，This指的是当前单元格；

完成以上内容基本上可以实现日历显示，只不过我们还需注意各个事件的先后顺序，以及事件的执行时机，进过诸多尝试得出如下执行顺序：显示年份月份的控件：执行    载入时   获取年份月份，获取蔡勒公式中需要的C和Y，并对控件赋值。执行   文本改变时   给月份赋值，同时将日历表显示。

控件载入时

文本改变时

说明：X对应的是蔡勒公式中的年份，Y对应的是蔡勒公式中的世纪数（世纪数不需要减一）。Z对应的是月份数。

日历表：执行  显示时   ，判断月份，根据月份设置月份天数，计算月份第一天的星期数，改变所有单元格的选中状态；

日历表显示时

显示时Case1

单元格：执行  选中改变时  根据 [[This.name-MinuendNumber]] 结果来判断单元格赋值情况，执行   鼠标单击时  给某一控件赋值。这个就很随意了，直接将单元格内容赋值到某一控件。

第二步：改变年份和月份

这一步是整个日历表最重要的一部分，他是实现日历表动态变化的关键。仅以左侧箭头来说明问题：执行   鼠标单击时  事件：根据月份来判断年份和月份的增减，给显示年月的控件重新赋值，日历表隐藏，日历表显示；

箭头-鼠标单击时

说明：左侧箭头“减”：Case1：月份等于1时，年份减少，月份为12月；Case2：月份大于1时改变月份。

到这，一个完整的日历表就完成了，下面给一个事件执行顺序图，以帮助大家的理解。

事件执行顺序图

另外，需要注意的是单元格点击事件需要作出判断，单元格内容为空的时候作出合理的操作。

实际上在大多数的原型设计中不需要这么复杂的功能设计，只需要展示即可，单复杂的设计有助我们去理解Axure中事件执行的先后顺序，函数的功能等等，所以没事的时候不妨自己设计几个比较好玩的控件也是不错的！