kintone 活动日历的插件

aki发表于:2017年01月16日 16:31:06更新于:2019年02月03日 10:51:20

Index

概要

本篇介绍使用FullCalendar库可在kintone列表页面上进行查看、创建活动日历。

可实现kintone标准日历列表无法实现的如下功能(2016年5月8日的更新版)。

  • 可随意切换按月/按周/按日显示的日历。

  • 在日历上可更改活动的日期与时间。

  • 从活动的开始到结束的整个期间都可以在日历上显示出来。

  • 和流程管理整合,还可以通过视觉掌握活动的进展情况。

完成后的样子

记录列表页面(记录添加后)

使用了此插件的应用的日历列表如下。

00158885c290948f6e58e5bed2aa5f0 

设置页面(设置范例)

 00158885c5a9a2aef8436b65518a178

使用插件

STEP1:设置表单

设置应用的表单。

  • 请准备好用于在日历上显示活动的字段。
    最少需要以下3个字段。

    • 单行文本框 ・・・ 作为活动标题。

    • 日期与时间 ・・・作为活动的开始时间。

    • 日期与时间 ・・・作为活动的结束时间。

STEP2:在应用中添加插件

在应用中添加活动日历插件。
关于插件的添加方法请参考kintone帮助。

添加插件

STEP3:设置流程管理(任意)

可以与任意的流程管理一起使用。

跟流程管理整合后,
可根据活动的进展情况,更改背景色。

关于流程管理的设置方法请参考kintone帮助。

设置流程管理

STEP4:设置插件

1.在应用管理页面点击“插件”,
  然后点击活动日历插件的齿轮图标。

2.设置各项目。

项目名称说明
活动名称字段选择活动名称的对象字段。(必须)
只可选择单行文本框字段。
开始时间字段选择作为活动开始时间的字段名称。(必须)
只可选择日期与时间字段。
结束时间字段选择作为活动结束时间的字段名称。(必须)
只可选择日期与时间字段。
状态在流程管理中设置的“状态”及与该状态相对应的活动背景色。(最大5个/任意)
背景色可支持英文/16进制数/RGB等指定方法。

列:
 状态“未处理” 背景色“blue”
 状态“处理中” 背景色“#ff0000"
 状态为“完成” 背景色“rgb(0,128,0)”

3.点击[保存]。

4.在[应用的设置]页面,点击[更新应用],插件的设置将被反映到应用中。

STEP5:使用插件

添加一条记录,看看活动是否显示在日历上。

00158885c7d9f6b3c4898728c69619d

※如果不输入“标题”、“开始时间”、“结束时间”,保存的时候将报错
※“开始时间”不可设置成与“结束时间”一样或比其晚。

记录添加后,将显示“日程安排”列表页面,
添加的活动显示在相应日期的格子里。

点击右上方的按钮,可切换成按月/按周/按日显示。

00158885c92d5c9cd5035d583ed6ede

点击各日历上的活动,将打开该活动的详情页面。
另外,拖拽活动,可更改活动的时间。

00158885bfe82d1e8ac787d6cf047a6

在按周显示和按日显示页面上,也可以伸缩活动的时间。
(按周显示的日历以1小时为单位,按日显示的日历以30分钟为单位进行伸缩)

00158885cb2f22c75765833db80ab23

在列表页面进行筛选,可以仅显示符合条件的活动。

00158885cdb7ea1c02f4f2d42b0df13

另外,在[设置此应用] > [列表] > [已创建的列表] > [日程安排]中可以设置好筛选条件,
这样,日历显示时,默认显示筛选的活动。

00158885cf29ae50d5388a7395896c7

插件范例

访问plugin-sdk,下载整个文件夹。
文件夹内的“examples/eventCalendar”是这次要使用的文件包。
文件结构如下。

eventCalendar/
 css/
   -51-us-default.css
   -config.css
   -customize.css
 js/
   -customize.js
   -config.js
 html/
  -config.html
 image/
   -icon.png
 manifest.json

请参考插件的开发步骤 打包 ,打包“eventCalendar”。

打包后的范例

event_calendar_plugin.zip

更新履历

于2016/07/27公开v1.0。

于2016/07/29公开v1.1。

其他限制事项

  • 智能手机上不可使用。

注意事项

  • 本范例程序,不保证运行绝对正确。

  • 另外不对本范例程序提供技术上的支持。

  • 如果流程管理无效或与插件设置页面上的状态名称不一致,活动背景色显示蓝色。

插件扩展

通过自定义来扩展本插件的话,可实现如下功能。

  • 点击日期时,可以打开记录添加页面,日期默认所点击的日期。

  • 更改日期的背景色或日期的数字的颜色。

  • 更改国定假日的背景色或日期的数字的颜色。

  • 使用模态窗口打开记录编辑页面等,实现在日历页面上完成所有操作。

  • 更改按周显示时,从周几开始显示。

  • 登记整天的预订。

  • 记录即使超过100条,可以显示所有活动。
    ……等等。


    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。
    您需要登录后才可以回复