kintone 活动日历的插件

aki发表于:2017年01月16日 16:31:06更新于:2022年10月13日 17:16:31

Index

注意事项

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

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

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

  • kintone的插件功能只可在标准版使用,简易版不可使用这点请大家注意一下。

  • 初次设置此插件需要系统管理权限。

概要

本篇介绍可在kintone日历形式的列表上查看/创建活动的插件,该插件使用了FullCalendar库

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

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

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

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

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

主要更新信息

2017/05/08 对插件进行了升级,可获取所有记录并显示在日历上(以前最多只能获取100条)。

完成后的样子

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

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

 0015ec6225d313df509d93533f2849d

设置页面(设置范例)

 0015ec6237d80b66b8018c695ec2d51

使用插件

STEP1:设置表单

设置应用的表单。

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

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

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

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

STEP2:在应用中添加插件

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

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

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

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

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

STEP4:设置插件

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

2.设置各项目。

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

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

3.点击[保存]。

4.在[应用的设置]页面,点击[更新应用],插件的设置将被反映到应用中。
此时,添加了一个名为“日程安排”的列表。

STEP5:使用插件

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

00158885c7d9f6b3c4898728c69619d

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

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

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

0015ec62470035d7d80dc19142c9dea

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

0015ec624b5adb8edf70c66a0c1be79

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

00158885cb2f22c75765833db80ab23

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

00158885cdb7ea1c02f4f2d42b0df13

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

00158885cf29ae50d5388a7395896c7

插件范例

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

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

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

更新履历

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

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

于2017/05/08 公开了v1.2。可获取所有记录显示在日历上。

于2017/08/25公开了v1.3。将css「51-us-default.css」更改为「51-modern-default.css」,其他细节调整。

于2017/12/01公开了v1.4。将程序中使用的表单设计信息获取API更改为字段列表获取API。

于2021/02/01公开了v1.4.1。修复了列表中的筛选条件未反映在日历中的错误。

于2022/10/05公布了v1.4.2。修改了受系统基础架构更新影响的内容。

限制事项

  • 智能手机上不可使用。

  • 来宾空间内不可使用。

插件扩展

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

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

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

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

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

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

  • 登记整天的预订。

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

所使用的OSS许可证信息

此插件中使用到以下OSS。

    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。