如何使用Axure制作日历附源文件
日历控件是一个比较常用的控件，但是Axure自带元件库中不包含此元件，因此想要使用此控件需要我们手工制作并实现它。
准备工作：新建一个Axure页面，使用五个控件实现日历头：上一年、上一月、年/月、下一月和上一年，为了美观控制年月偏移的控件可以考虑使用图片，其中年月文本命名为：Months。
布局方式采用水平方式：
最终显示效果如下：
下面使用另外一个中继器实现日历，此中继器需要42行，至于为什么需要42行请各位看官老爷开动自己的脑筋，为了下一步方便使用建议将列名修改一下，我是将列名设置为index，并且将中继器的名称设置为了：Calendar。并且将此中继器的布局修改为水平+网格，每行7列。
为了更美观一点，我还在这个中继器的下层放置了一个矩形控件，并将这个矩形控件命名为curMonth。通过分别双击之前设计的这两个中继器，编辑每行的样式。我将每行的宽度设置为100px，并且将Calendar每行的中的矩形名字设置为day，并设置一个选项组。
同时一定要修改Calendar的中继器属性，取消“隔离列表项之间的选项组”的选中状态，在交互页面中可以找到此项。
重点来了，选中Calendar中继器后对交互进行编辑，缺省情况下只有一个“每项加载”，现在我们需要添加“载入时”这个交互项。单击【新建交互】按钮，在下拉菜单中选择【载入时】：
在新弹出的下拉菜单中选中【设置变量值】：
一般情况下，在没有添加变量前，我们可以看到的变量列表如下：
选择添加变量，添加四个变量，分别命名为：Today、FirstDay，FirstIndex，lastIndex。选择Today变量，并将此变量的值设置为Now。单击【fx】按钮弹出一个对话框，单击【插入变量或函数】滚动鼠标找到Axure自带的日期变量：Now。
单击【确定】按钮关闭此对话框，单击【完成】按钮完成此变量值的设置。
使用[[Today.addDays(1-Today.getDate())]]函数设置FirstDay变量，使用[[FirstDay.getDay() + 1]]函数设置FirstIndex变量，同时可以给控件：Months和curMonth设置文本，值分别是：[[FirstDay.getFullYear() + "年" + FirstDay.getMonth() + "月"]]和[[FirstDay.getMonth()]]，并且给curMonth设置文本：[[FirstDay.getMonth()]]。最终Calendar的“载入时”交互设置如下：
下面开始对【每项加载】进行交互设置，首先设置每一项的文本设置为日期：通过使用日期函数addDays()来设置每一项的日期，使用第一天索引值与当前行索引值之间的差值来实现，算式：[[FirstDay.addDays(item.index-FirstIndex).getDate()]]。在列表中【选中当天】，使用算式：[[FirstDay.addDays(item.index-FirstIndex)]]并且与变量：Today进行比较，如果相等则代表需要选中。
本例中以月为单位，以周为每行单位对日历进行展示，因此需要计算哪一项后的日期需要进行隐藏，首先计算最后一个可显示的日期项。可以分为两种情况：下月1号是周日和不是周日，所以需要计算此两种情况的最后一个索引。下月1号是周日，可以使用条件：FirstDay.addMonths(1).getDay() == 0进行判断，此时还需要满足另外一个条件当前项目指向的是下月1号，判断条件为：[[FirstDay.addDays(item.index-FirstIndex)]] == FirstDay.addMonths(1)，此时将变量：lastIndex设置为[[Item.index - 1]]。如果1号不是周日则只满足上述条件中的第二条，此时将变量lastIndex设置为：[[Item.index + 6 - FirstDay.addMonths(1).getDay()]]。使用判断条件：[[Item.index]] > [[lastIndex]]，将项目索引大于lastIndex的全部设置为隐藏。
【禁用非本月的日期】目的是不让用户选中非本月的日期，判断条件：[[FirstDay.addDays(item.index-FirstIndex).getMonth()]] != [[FirstDay.getMonth()]]，将满足此条件的项目禁用。全部交互设置如下图：
最后给四个按钮：上一年、上一月、下一月和下一年分别设置单击交互事件，更新变量：FirstDay的算式分别如下：[[FirstDay.addYears(-1)]]，[[FirstDay.addMonths(-1)]]，[[FirstDay.addMonths(1)]]和[[FirstDay.addYears(1)]]，然后根据此变量计算第一条索引：FirstIndex。在这个交互中需要对Months和curManth的文字进行设置，并且需要更新Calendar中继器的行。下图以上一月进行举例：
最后，总结一下本文中使用的几个Axure日期函数：
| Now | 根据计算机系统设定的日期和时间返回当前的日期和时间值 |
| getDay() | 获取日期对象返回表示星期的某一天的数字。(0 ~ 6)。返回值是 0（周日） 到 6（周六） 之间的一个整数 |
| getFullYear() | 获取日期对象“年份”部分四位数字 |
| getMonth() | 获取日期对象“月份”部分的数值(1 ~ 12) |
| addYears(years) | 将指定的年份数加到当前日期对象上，获取一个新的日期对象。参数：years为整数数值，正负均可 |
| addMonths(months) | 将指定的月份数加到当前日期对象上，获取一个新的日期对象。参数：months为整数数值，正负均可 |
| addDays(days) | 将指定的天数加到当前日期对象上，获取一个新的日期对象。参数：days为整数数值，正负均可 |
最后想要源文件的看官老爷，请在百度网盘自取：
链接: https://pan.baidu.com/s/16q3HqVatcWNUGw11yZmLXQ
提取码: uphz
如何使用Axure制作日历附源文件相关推荐
- axure没有团队页签_Axure教程：多页签可滚动的选项卡制作（附源文件下载）
选项卡,就是用多个页签来切换展示不同的功能页面,通过点击相应页签来切换相应选项卡页面的效果,相信大家在绘制原型中常常会遇到,并不陌生.但是如何优化选项卡的展示效果?以及如果选项卡过多,如何做到像真正系 ...
- vue制作日历_如何使用Vue制作每月日历
vue制作日历 Have you ever seen a calendar on a webpage and thought, how the heck did they did that? For ...
- [原型设计]Axure制作首页轮播图片切换效果
1.新建Axure PR文件,取名"Axure制作首页轮播图片切换效果" 2.获取素材,进入36Kr官网主页,获取轮播图片素材. 获取素材 3.拖拽动态面板控件Dynamic Pa ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
- 企业管理系统原型、HRM、工作报告统计、0A、商机、合同、客户管理、产品管理、企业oa、行政办公系统、数据报表、销售分析、客户分析、产品管理、人力资源管理系统、crm、axure原型、rp源文件
企业管理系统原型.HRM.CRM.工作报告统计.0A.商机.合同.客户管理.产品管理.企业oa.行政办公系统.数据报表.销售分析.客户分析.产品管理.人力资源管理系统.crm客户管理.axure原型. ...
- 在线教育、直播教育、课程直播、订单系统、老师介绍、收入提现、在线学习、业绩统计、课程统计、选老师、选课程、作业管理、课程管理、报名统计、在线教育管理系统、axure原型、rp源文件
在线教育.直播教育.课程直播.订单系统.老师介绍.收入提现.在线学习.业绩统计.课程统计.选老师.选课程.作业管理.课程管理.报名统计.在线教育管理系统.axure原型.rp源文件 Axure原型演示 ...
- 人力资源管理系统、OA、行政管理系统、考勤管理、资产管理、车辆管理、绩效管理、员工管理、招聘、入职、离职、转正、加班、调休、企业OA系统、axure原型、rp源文件、web端后台管理原型、高保真原型
人力资源管理系统.OA.行政管理系统.考勤管理.资产管理.车辆管理.绩效管理.员工管理.招聘.入职.离职.转正.加班.调休.企业OA系统.axure原型.rp源文件.web端后台管理原型.高保真原型 ...
- indesign选中不了图片删除_word图文设计：如何用图片水印功能制作日历画册
编按:新的一年马上来临了,许多人都会换上新的日历.通常大家都是去外面购买,买来的日历总是千篇一律,没有特色.为何不自己新自己动手制作一本专属于自己的个性日历呢?做好后,自己使用或作为礼物送给亲朋好友都 ...
- 用html和css制作日历,CSS3制作日历
前面使用了CSS3制作过Progress Bars.分页导航.Login栏.Search Box等等.今天一起和大家使用css3来制作一个日历效果,希望大家喜欢. 目标 今天我们的目标是制作如下面DE ...
最新文章
- 100+Python编程题给你练~（附答案）
- c++代码转为go_Go与C/C++ 互相调用
- python使用函数的优点-Python函数的特点
- 文巾解题 70. 爬楼梯
- 《Effective STL》学习笔记（第三部分）
- java运行效率优化_如何优化JAVA代码及提高执行效率
- 数据结构和算法 —— 图
- EFCore废弃了TransactionScope取而代之的Context.Database.BeginTransaction
- Deeplab unexpected label
- MyEclipse for Windows 关于 java、jsp、xml、js、html 等文件的注释快捷键及注释格式介绍
- asp.net winform 实现复制，粘贴，剪切功能
- Flask cookie API(response.set_cookie,request.cookies)
- Delphi 与 DirectX 之 DelphiX(60): TDIB.DoTrace();
- atitit.导出excel的设计----查询结果 导出为excel的实现java .net php 总结
- 手工清除severe.exe病毒
- python新手入门.pdf_所有Python入门书籍的整理，初学者必看，附赠所有电子版（一）...
- linux系统怎么改待机时间,LINUX操作系统——易用程度/待机时间/连接功能_手机_手机其它OS-中关村在线...
- 基于Arduino的吉他调音器
- [论文笔记]Rob-GAN: Generator, Discriminator, and Adversarial Attacker(CVPR 2019)
- 品酒论三国之一（帅才的典型特征）