用甘特图显示To Do

aki发表于:2016年10月05日 15:01:00更新于:2022年07月27日 10:42:45

开发者中心包含此范例模板(甘特图查看项目进度),请前往开发者中心下载学习。

Index

概 要

此范例介绍如何使用甘特图显示To Do应用的记录列表。

  • 在记录列表页面,当有可显示的记录时才显示甘特图。

  • 甘特图根据优先度字段的值显示不同的颜色。

  • 年月日根据用户设置的语言自动切换显示。

其他详细内容请查看程序。

完成图

211164-2.JPG

事前准备

  • 表单设置详情如下:

    字段名称

    字段类型

    字段代码

    ToDo名称

    单行文本框

    To_Do

    负责人

    选择用户

    Assignees

    优先顺序

    下拉菜单

    Priority

    截止日

    日期

    Duedate

    开始日

    日期

    From

    结束日

    日期

    To

    附件

    附件

    Attachments

       ※优先顺序的选项:A、B、C、D、E、F
       ※其他字段任意设置

  • 编辑器
    选择符合自己使用习惯的文本编辑器。

程序范例

通过本应用程序范例来介绍Cybozu CDN 的使用方法,以及 JavaScript和 CSS 的写法。

注意事项

  • 直接使用此处提供的程序范例的情况,才望子不予以保证程序的正常运行

  • 才望子不提供对程序范例的技术支持

PC专用的JavaScript文件

在应用设置页面打开【通过JavaScript / CSS自定义】,从Cybozu CDN 中选择以下库。

  • jQuery
    https://js.cybozu.com/jquery/2.1.1/jquery.min.js  
    https://js.cybozu.com/jqueryui/1.12.1/jquery-ui.min.js

  • jQuery.Gantt
    https://js.cybozu.com/jquerygantt/20140623/jquery.fn.gantt.min.js 


JavaScript 范例

  • 将以下代码拷贝到编辑器,文件命名为【sample-ganttchart.js】,文字编码设为【UTF-8】、无BOM,保存
    ※文件名任意,但是文件的扩展名要指定为【js】


    /*
     * Gantt chart display of sample program
     * Copyright (c) 2015 Cybozu
     *
     * Licensed under the MIT License
     */
    (function() {
        "use strict";
        // Date conversion for Gantt.
        function convertDateTime(str) {
            if (str !== "") {
                return '/Date(' + (new Date(str)).getTime() + ')/';
            }
            return "";
        }
        // To HTML escape
        function escapeHtml(str) {
            return str
                .replace(/&/g, '&')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }
        // Record list of events.
        kintone.events.on('app.record.index.show', function(event) {
            var records = event.records;
            var data = [];
            // Don't display when there is no record.
            if (records.length === 0) {
                return;
            }
            var elSpace = kintone.app.getHeaderSpaceElement();
            // I will adjust the style depending on the version of the design
            var uiVer = kintone.getUiVersion();
            switch (uiVer) {
                case 1:
                    elSpace.style.marginLeft = "28px";
                    elSpace.style.marginRight = "28px";
                    elSpace.style.border = "solid 1px #ccc";
                    break;
                default:
                    elSpace.style.marginLeft = "15px";
                    elSpace.style.marginRight = "15px";
                    elSpace.style.border = "solid 1px #ccc";
                    break;
            }
            // I create an element of Gantt chart.
            var elGantt = document.getElementById("gantt");
            if (elGantt === null) {
                elGantt = document.createElement("div");
                elGantt.id = "gantt";
                elSpace.appendChild(elGantt);
            }
            // To switch the moon, the day of the week, depending on the login user's Locale.
            var user = kintone.getLoginUser();
            var ganttMonths, ganttDow, ganttWaitmessage = "";
            switch (user['language']) {
                case "ja":
                    ganttMonths = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
                    ganttDow = ['日', '月', '火', '水', '木', '金', '土'];
                    ganttWaitmessage = '表示するまでお待ちください。';
                    break;
                case "zh":
                    ganttMonths = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
                    ganttDow = ['日', '一', '二', '三', '四', '五', '六'];
                    ganttWaitmessage = '请等待显示';
                    break;
                default:
                    ganttMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                    ganttDow = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
                    ganttWaitmessage = 'Please Wait...';
                    break;
            }
            // Set the record.
            for (var i = 0; i < records.length; i++) {
                var colorGantt = "ganttGray";
                switch (records[i]['Priority']['value']) {
                    case 'A':
                        colorGantt = "ganttRed";
                        break;
                    case 'B':
                        colorGantt = "ganttOrange";
                        break;
                    case 'C':
                        colorGantt = "ganttGreen";
                        break;
                    case 'D':
                        colorGantt = "ganttBlue";
                        break;
                    case 'E':
                        colorGantt = "ganttYellow";
                        break;
                    case 'F':
                        colorGantt = "ganttGray";
                        break;
                    default:
                        colorGantt = "ganttGray";
                }
                var descGantt = "<strong>" + escapeHtml(records[i]['To_Do']['value']) + "</strong>";
                if (records[i]['From']['value']) {
                    descGantt += "<br />" + "From: " + escapeHtml(records[i]['From']['value']);
                }
                if (records[i]['To']['value']) {
                    descGantt += "<br />" + "To:" + escapeHtml(records[i]['To']['value']);
                }
                if (records[i]['Priority']['value']) {
                    descGantt += "<br />" + escapeHtml(records[i]['Priority']['value']);
                }
                var obj = {
                    id: escapeHtml(records[i]['$id']['value']),
                    name: escapeHtml(records[i]['To_Do']['value']),
                    values: [{
                        from: convertDateTime(records[i]['From']['value']),
                        to: convertDateTime(records[i]['To']['value']),
                        desc: descGantt,
                        label: escapeHtml(records[i]['To_Do']['value']),
                        customClass: escapeHtml(colorGantt)
                    }]
                };
                data.push(obj);
            }
            // Set in Gantt object.
            $(elGantt).gantt({
                source: data,
                navigate: "scroll",
                scale: "days",  // days,weeks,months
                maxScale: "months",
                minScale: "days",
                months: ganttMonths,
                dow: ganttDow,
                left: "70px",
                itemsPerPage: 100,
                waitText: ganttWaitmessage,
                scrollToToday: true
            });
        });
    })();


PC专用的CSS文件

在应用设置页面打开【通过JavaScript / CSS自定义】,从Cybozu CDN 中选择以下库。

  • jQuery.Gantt
    https://js.cybozu.com/jquerygantt/20140623/css/style.css (使用version 20140623)

CSS范例

为了使颜色更加丰富,自己指定了颜色。省略的话程序也可以正常运行。

  • 将以下代码拷贝到编辑器,文件命名为【sample-addin.css」】,文字编码设为【UTF-8】、无BOM,保存
    ※文件名任意,但是文件的扩展名要指定为【css】


    /*
     * Copyright (c) 2015 Cybozu
     *
     * Licensed under the MIT License
    */
     
    .fn-gantt .ganttGray {
        background-color: #d3d3d3;
    }
    .fn-gantt .ganttGray .fn-label {
        color: #444;
    }
    .fn-gantt .ganttYellow {
        background-color: #ffff99;
    }
    .fn-gantt .ganttYellow .fn-label {
        color: #444;
    }


设置的页面

以下是【通过JavaScript / CSS自定义】页面的设置范例。
00157f4b088d6086f82e6359d78d462

JavaScript / CSS 文件的设置如上图。
返回应用的首页,添加记录,确认自定义的结果是否正常。

使用的API

  1. 添加事件句柄

  2. 获取字段元素

  3. 获取设计版本

  4. 获取用户信息