日程的界面提交

2020/x/biz/css/base-wk.css

@@ -239,29 +239,212 @@
}
.pages-calendar .time-line-container .time-line{
  font-size: .1rem;
  height: .2rem;
  height: .6rem;
  line-height: .2rem;
  color: rgba(0,0,0,.25);
  margin-left: .2rem;
  margin-bottom: .48rem;
  /*margin-bottom: .4rem;*/
}
.pages-calendar .time-line-container .time-line.choose-time{
  color: #2E8EFF;
}
.pages-calendar .line-container{
  flex: auto;
  margin-top: .05rem;
  margin-top: .09rem;
}
.pages-calendar .time-line-container .line{
  padding-top: .1rem;
  border-top: .01rem solid rgba(0,0,0,.15);
  margin-left: .15rem;
  height: .6815rem;
  color: #fff;
  font-size: .12rem;
  line-height: .4rem;
  padding-left: .1rem;
  height: .6rem;
  /*color: #fff;*/
  /*font-size: .12rem;*/
  /*line-height: .4rem;*/
  /*padding-left: .1rem;*/
}
.pages-calendar .time-line-container .line.chooseed{
  background: url("../img/time-choose.png");
  background-size: 100% 100%;
}
.pages-calendar .time-line-container .now-time{
  position: absolute;
  width: 100%;
}
.pages-calendar .time-line-container .now-time .now-detail{
  font-size: .1rem;
  line-height: .1rem;
  margin-left: .2rem;
  color: #FF4343;
}
.pages-calendar .time-line-container .now-time .now-line{
  height: .01rem;
  margin-top: .045rem;
  margin-left: .15rem;
  background-color: #FF4343;
}
.pages-calendar .schedule-container{
  position: absolute;
  margin-top: .1rem;
  font-size: .12rem;
  padding-left: .15rem;
  width: 83%;
  top:0;
}
.pages-calendar .schedule-item{
  border: .01rem solid rgba(0,0,0,.15);
  border-left: 4px solid #1EBAAB;
  border-radius: 4px;
  background-color: #fff;
  /*margin-right: .08rem;*/
  flex:1;
  position: absolute;
}
.pages-calendar .schedule-item div{
  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.pages-calendar-detail .detail-header-container{
  background-color: #fff;
  margin-top: .1rem;
  font-size: .16rem;
  line-height: .52rem;
}
.pages-calendar-detail .detail-header-container>div,.pages-calendar-detail .detail-time-container>div,.pages-calendar-detail .calendar-container>div{
  margin-left: .15rem;
  padding-right: .15rem;
}
.pages-calendar-detail .detail-header-container .title-container,.pages-calendar-detail .detail-time-container .time-container{
  border-bottom: 1px solid rgba(0,0,0,.09);
}
.pages-calendar-detail .detail-header-container>div .title{
  margin-right: .15rem;
}
.pages-calendar-detail .detail-time-container,.pages-calendar-detail .calendar-container{
  margin-top: .1rem;
  background-color: #fff;
  font-size: .16rem;
  line-height: .52rem;
}
.pages-calendar-detail .detail-time-container>div .title,.pages-calendar-detail .calendar-container .title{
  font-size: .14rem;
}
.pages-calendar-detail .detail-time-container .detail,.pages-calendar-detail .calendar-container .detail{
  color: rgba(0,0,0,.65);
}
.pages-calendar-detail .detail-time-container i,.pages-calendar-detail .calendar-container i{
  font-size: .22rem;
  color: rgba(0,0,0,.25);
}
.pages-calendar-detail .calendar-container .point{
  width:8px;
  height:8px;
  background:rgba(30,186,171,1);
  border-radius: 50%;
  margin-right: .05rem;
}
.pages-calendar-detail .ipu-actions-modal{
  background-color: #F5F6FA;
  border-radius: .12rem .12rem 0 0;
}
.pages-calendar-detail .ipu-actions-modal .operation-container{
  background-color: #fff;
  border-radius: .12rem .12rem 0 0;
  line-height: .52rem;
  padding-left: .17rem;
  color: rgba(0,0,0,0.85);
  font-size: .16rem;
}
.pages-calendar-detail .ipu-actions-modal .operation-container>div{
  border-bottom: 1px solid rgba(0,0,0,.09);
}
.pages-calendar-detail .ipu-actions-modal .operation-container i{
  color: rgba(0,0,0,0.5);
  margin-right: .05rem;
}
.pages-calendar-detail .ipu-actions-modal .cancel{
  margin-top: .1rem;
  text-align: center;
  line-height: .52rem;
  background-color: #fff;
  color: rgba(0,0,0,0.85);
  font-size: .16rem;
}
.pages-group-calendar .ri-add-line{
  color: #000;
}
.pages-group-calendar .list-container{
  margin-top: .1rem;
  background-color: #fff;
  font-size: .16rem;
  color: #000;
  line-height: .52rem;
}
.pages-group-calendar .list-container img{
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  margin: 0 .1rem 0 .15rem;
}
.pages-group-calendar .list-container .ipu-flex>div{
  border-bottom: 1px solid rgba(0,0,0,.09);
}
.pages-create-group .create-container{
  background-color: #fff;
  margin-top: .1rem;
  font-size: .14rem;
  line-height: .53rem;
  padding: 0 .15rem;
  color: #000;
}
.pages-create-group .create-container i{
  color: rgba(0,0,0,0.25);
  font-size: .22rem;
}
.pages-create-group .create-container input{
  border: none;
  text-align: right;
  color: rgba(0,0,0,.65);
}
.pages-create-group .details-container{
  height: 1.52rem;
}
.pages-create-group .create-container textarea{
  border: none;
  width: 100%;
  height: 1.52rem;
  color: #000;
}
.pages-create-group .create-container textarea::placeholder{
  color:rgba(0,0,0,0.45);
  font-size: .16rem;
}
.pages-create-group .user-container{
  background-color: #fff;
  flex-wrap: wrap;
}
.pages-create-group .user-container>div{
  margin: 0 .15rem .1rem .15rem;
}
.pages-create-group .user-container .img-container{
  height: .45rem;
}
.pages-create-group .create-container .look-container{
  color: rgba(0,0,0,.85);
}
.pages-create-group .user-container img,.pages-create-group .user-container i{
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background-color: rgba(147,147,147,0.15);
  text-align: center;
  line-height: .45rem;
  font-size: .22rem;
  color: #939393;
}
.pages-create-group .user-container .user-name{
  font-size: .12rem;
  color: #000;
  margin-top: .04rem;
  text-align: center;
  line-height: .2rem;
}

2020/x/biz/css/base.css

@@ -1,3 +1,3 @@
@import "base-ghh.css";
/*
@import "base-wk.css";*/
@import "base-wk.css";

2020/x/biz/js/page/calendar-detail.js

@@ -0,0 +1,13 @@
require(["ipuUI", "jquery"], function (ipuUI, $) {
  $(function () {
    $(".ipu-fn-right").click(function () {
      $(".ipu-actions-modal").addClass('ipu-modal-in');
      $(".ipu-modal-overlay").addClass('ipu-modal-overlay-visible');
    });
    $(".ipu-actions-modal .cancel").click(function () {
      $(".ipu-actions-modal").removeClass('ipu-modal-in');
      $(".ipu-modal-overlay").removeClass('ipu-modal-overlay-visible');
    });
  });
});

2020/x/biz/js/page/calendar.js

@@ -0,0 +1,443 @@
require(['jquery', 'ipuUI'], function ($, ipuUI) {
    var lunarInfo = new Array(
        0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2,
        0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977,
        0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970,
        0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950,
        0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557,
        0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5d0, 0x14573, 0x052d0, 0x0a9a8, 0x0e950, 0x06aa0,
        0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0,
        0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b5a0, 0x195a6,
        0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570,
        0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0,
        0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5,
        0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930,
        0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530,
        0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45,
        0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0)
    var solarMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
    var Animals = new Array("鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪");
    var solarTerm = new Array("小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至");
    var sTermInfo = new Array(0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758);
    var nStr1 = new Array('日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十');
    var nStr2 = new Array('初', '十', '廿', '卅');
    //公历节日
    var sFtv = new Array(
        "0101 元旦",
        "0214 情人节",
        "0308 妇女节",
        "0312 植树节",
        "0315 消费者权益日",
        "0401 愚人节",
        "0501 劳动节",
        "0504 青年节",
        "0512 护士节",
        "0601 儿童节",
        "0701 建党节",
        "0801 建军节",
        "0910 教师节",
        "0928 孔子诞辰",
        "1001 国庆节",
        "1006 老人节",
        "1024 联合国日",
        "1224 平安夜",
        "1225 圣诞节")
    //农历节日
    var lFtv = new Array(
        "0101 春节",
        "0115 元宵节",
        "0505 端午节",
        "0707 七夕情人节",
        "0715 中元节",
        "0815 中秋节",
        "0909 重阳节",
        "1208 腊八节",
        "1224 小年")
    //返回农历y年的总天数
    function lYearDays(y) {
        var i, sum = 348;
        for (i = 0x8000; i > 0x8; i >>= 1) sum += (lunarInfo[y - 1900] & i) ? 1 : 0;
        return (sum + leapDays(y));
    }
    //返回农历y年闰月的天数
    function leapDays(y) {
        if (leapMonth(y)) return ((lunarInfo[y - 1900] & 0x10000) ? 30 : 29);
        else return (0);
    }
    //判断y年的农历中那个月是闰月,不是闰月返回0
    function leapMonth(y) {
        return (lunarInfo[y - 1900] & 0xf);
    }
    //返回农历y年m月的总天数
    function monthDays(y, m) {
        return ((lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
    }
    //算出当前月第一天的农历日期和当前农历日期下一个月农历的第一天日期
    function Dianaday(objDate) {
        var i, leap = 0, temp = 0;
        var baseDate = new Date(1900, 0, 31);
        var offset = (objDate - baseDate) / 86400000;
        this.dayCyl = offset + 40;
        this.monCyl = 14;
        for (i = 1900; i < 2050 && offset > 0; i++) {
            temp = lYearDays(i)
            offset -= temp;
            this.monCyl += 12;
        }
        if (offset < 0) {
            offset += temp;
            i--;
            this.monCyl -= 12;
        }
        this.year = i;
        this.yearCyl = i - 1864;
        leap = leapMonth(i); //闰哪个月
        this.isLeap = false;
        for (i = 1; i < 13 && offset > 0; i++) {
            if (leap > 0 && i == (leap + 1) && this.isLeap == false) { //闰月
                --i; this.isLeap = true; temp = leapDays(this.year);
            }
            else {
                temp = monthDays(this.year, i);
            }
            if (this.isLeap == true && i == (leap + 1)) this.isLeap = false; //解除闰月
            offset -= temp;
            if (this.isLeap == false) this.monCyl++;
        }
        if (offset == 0 && leap > 0 && i == leap + 1)
            if (this.isLeap) { this.isLeap = false; }
            else { this.isLeap = true; --i; --this.monCyl; }
        if (offset < 0) { offset += temp; --i; --this.monCyl; }
        this.month = i;
        this.day = offset + 1;
    }
    //返回公历y年m+1月的天数
    function solarDays(y, m) {
        if (m == 1)
            return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28);
        else
            return (solarMonth[m]);
    }
    //记录公历和农历某天的日期
    function calElement(sYear, sMonth, sDay, week, lYear, lMonth, lDay, isLeap) {
        this.isToday = false;
        //公历
        this.sYear = sYear;
        this.sMonth = sMonth;
        this.sDay = sDay;
        this.week = week;
        //农历
        this.lYear = lYear;
        this.lMonth = lMonth;
        this.lDay = lDay;
        this.isLeap = isLeap;
        //节日记录
        this.lunarFestival = ''; //农历节日
        this.solarFestival = ''; //公历节日
        this.solarTerms = ''; //节气
    }
    //返回某年的第n个节气为几日(从0小寒起算)
    function sTerm(y, n) {
        var offDate = new Date((31556925974.7 * (y - 1900) + sTermInfo[n] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
        return (offDate.getUTCDate())
    }
    //保存y年m+1月的相关信息
    var fat = mat = 9;
    var eve = 0;
    function calendar(y, m) {
        fat = mat = 0;
        var sDObj, lDObj, lY, lM, lD = 1, lL, lX = 0, tmp1, tmp2;
        var lDPOS = new Array(3);
        var n = 0;
        var firstLM = 0;
        sDObj = new Date(y, m, 1); //当月第一天的日期
        this.length = solarDays(y, m);  //公历当月天数
        this.firstWeek = sDObj.getDay();  //公历当月1日星期几
        if ((m + 1) == 5) { fat = sDObj.getDay() }
        if ((m + 1) == 6) { mat = sDObj.getDay() }
        for (var i = 0; i < this.length; i++) {
            if (lD > lX) {
                sDObj = new Date(y, m, i + 1);  //当月第一天的日期
                lDObj = new Dianaday(sDObj);   //农历
                lY = lDObj.year;      //农历年
                lM = lDObj.month;     //农历月
                lD = lDObj.day;      //农历日
                lL = lDObj.isLeap;     //农历是否闰月
                lX = lL ? leapDays(lY) : monthDays(lY, lM); //农历当月最後一天
                if (lM == 12) { eve = lX }
                if (n == 0) firstLM = lM;
                lDPOS[n++] = i - lD + 1;
            }
            this[i] = new calElement(y, m + 1, i + 1, nStr1[(i + this.firstWeek) % 7], lY, lM, lD++, lL);
            if ((i + this.firstWeek) % 7 == 0) {
                this[i].color = 'red'; //周日颜色
            }
        }
        //节气
        tmp1 = sTerm(y, m * 2) - 1;
        tmp2 = sTerm(y, m * 2 + 1) - 1;
        this[tmp1].solarTerms = solarTerm[m * 2];
        this[tmp2].solarTerms = solarTerm[m * 2 + 1];
        if ((this.firstWeek + 12) % 7 == 5) //黑色星期五
            this[12].solarFestival += '黑色星期五';
        if (y == tY && m == tM) this[tD - 1].isToday = true; //今日
    }
    //用中文显示农历的日期
    function cDay(d) {
        d = parseInt(d);
        var s;
        switch (d) {
            case 10:
                s = '初十'; break;
            case 20:
                s = '二十'; break;
                break;
            case 30:
                s = '三十'; break;
                break;
            default:
                s = nStr2[Math.floor(d / 10)];
                s += nStr1[d % 10];
        }
        console.log(s)
        return (s);
    }
    //在表格中显示公历和农历的日期,以及相关节日
    var cld;
    function drawCld(SY, SM) {
        var TF = true;
        var p1 = p2 = "";
        var i, sD, s, size;
        console.log(SY, SM)
        cld = new calendar(SY, SM);
        // GZ.innerHTML = '                       【' + Animals[(SY - 4) % 12] + '】'; //生肖
        for (i = 0; i < 42; i++) {
            sObj = eval('SD' + i);
            lObj = eval('LD' + i);
            gObj = eval('GD' + i);
            sObj.className = 'num';
            lObj.className = 'old-num';
            sD = i - cld.firstWeek;
            if (sD > -1 && sD < cld.length) { //日期内
                gObj.jsondata = (SM+1)+"月"+(sD + 1)+"日";
                sObj.innerHTML = sD + 1;
                if (cld[sD].isToday) {
                    // sObj.style.color = '#9900FF';
                    gObj.className= "choose-day";
                sObj.className=sObj.className+" today" } //今日颜色
                else { sObj.style.color = ''; }
                if (cld[sD].lDay == 1) { //显示农历月
                    lObj.innerHTML = '<b>' + (cld[sD].isLeap ? '闰' : '') + cld[sD].lMonth + '月' + (monthDays(cld[sD].lYear, cld[sD].lMonth) == 29 ? '小' : '大') + '</b>';
                }
                else { lObj.innerHTML = cDay(cld[sD].lDay); } //显示农历日
                var Slfw = Ssfw = null;
                s = cld[sD].solarFestival;
                for (var ipp = 0; ipp < lFtv.length; ipp++) { //农历节日
                    if (parseInt(lFtv[ipp].substr(0, 2)) == (cld[sD].lMonth)) {
                        if (parseInt(lFtv[ipp].substr(2, 4)) == (cld[sD].lDay)) {
                            lObj.innerHTML = lFtv[ipp].substr(5);
                            Slfw = lFtv[ipp].substr(5);
                        }
                    }
                    if (12 == (cld[sD].lMonth)) { //判断是否为除夕
                        if (eve == (cld[sD].lDay)) { lObj.innerHTML = "除夕"; Slfw = "除夕"; }
                    }
                }
                for (var ipp = 0; ipp < sFtv.length; ipp++) { //公历节日
                    if (parseInt(sFtv[ipp].substr(0, 2)) == (SM + 1)) {
                        if (parseInt(sFtv[ipp].substr(2, 4)) == (sD + 1)) {
                            lObj.innerHTML = sFtv[ipp].substr(5);
                            Ssfw = sFtv[ipp].substr(5);
                        }
                    }
                }
                if ((SM + 1) == 5) { //母亲节
                    if (fat == 0) {
                        if ((sD + 1) == 7) { Ssfw = "母亲节"; lObj.innerHTML = "母亲节" }
                    }
                    else if (fat < 9) {
                        if ((sD + 1) == ((7 - fat) + 8)) { Ssfw = "母亲节"; lObj.innerHTML = "母亲节" }
                    }
                }
                if ((SM + 1) == 6) { //父亲节
                    if (mat == 0) {
                        if ((sD + 1) == 14) { Ssfw = "父亲节"; lObj.innerHTML = "父亲节" }
                    }
                    else if (mat < 9) {
                        if ((sD + 1) == ((7 - mat) + 15)) { Ssfw = "父亲节"; lObj.innerHTML = "父亲节" }
                    }
                }
                if (s.length <= 0) { //设置节气的颜色
                    s = cld[sD].solarTerms;
                    if (s.length > 0) s = s.fontcolor('limegreen');
                }
                if (s.length > 0) { lObj.innerHTML = s; Slfw = s; } //节气
                if ((Slfw != null) && (Ssfw != null)) {
                    lObj.innerHTML = Slfw + "/" + Ssfw;
                }
            }
            else { //非日期
                sObj.innerHTML = '';
                lObj.innerHTML = '';
            }
        }
    }
    //在下拉列表中选择年月时,调用自定义函数drawCld(),显示公历和农历的相关信息
    function changeCld() {
        var y, m;
        y = CLD.SY.selectedIndex + 1900;
        m = CLD.SM.selectedIndex;
        drawCld(y, m);
    }
    //用自定义变量保存当前系统中的年月日
    var Today = new Date();
    var tY = Today.getFullYear();
    var tM = Today.getMonth();
    var tD = Today.getDate();
    //打开页时,在下拉列表中显示当前年月,并调用自定义函数drawCld(),显示公历和农历的相关信息
    function initial() {
        // CLD.SY.selectedIndex = tY - 1900;
        // CLD.SM.selectedIndex = tM;
        // drawCld(tY, tM);
        drawCld(new Date().getFullYear(), new Date().getMonth());
        $(".date-choose").html((new Date().getMonth()+1)+"月"+new Date().getDate()+"日");
    }
    initial();
    $("#switch-time div").click(function(){
        $("#switch-time div").removeClass("checked-switch");
        $(this).addClass("checked-switch");
    })
    $("table td").click(function(){
        $("table td").removeClass("choose-day");
        $(this).addClass("choose-day");
        $(".date-choose").html((new Date().getMonth()+1)+"月"+$(this).find("font").eq(0).html()+"日");
    })
    $(".shrink").click(function(){
        if($(".can-hide").hasClass("ipu-fn-hide")){
            $(".shrink .ri-arrow-down-s-line").addClass("ri-arrow-up-s-line");
            $(".shrink .ri-arrow-down-s-line").removeClass("ri-arrow-down-s-line");
        }else{
            $(".shrink .ri-arrow-up-s-line").addClass("ri-arrow-down-s-line");
            $(".shrink .ri-arrow-up-s-line").removeClass("ri-arrow-up-s-line");
        }
        $(".can-hide").toggleClass("ipu-fn-hide");
    })
    // $(".line").click(function(){
    //     $(".line").removeClass("chooseed");
    //     $(".line").html('');
    //     $(this).toggleClass("chooseed");
    //     $(this).html("再次点击新建历程");
    //     // $(".line-container").on('click','.chooseed',function() {
    //     //     console.log(11)
    //     // })
    //     var index = $(".line-container .line").index(this);
    //     $(".time-container .time-line").removeClass("choose-time");
    //     $(".time-container .time-line").eq(index).toggleClass("choose-time");
    //     $(".time-container .time-line").eq(index+1).toggleClass("choose-time");
    //     $(".chooseed").click(function() {
    //         location.href = "calendar-detail.html"
    //     })
    // })
    var now = new Date();
    console.log(now.getHours())
    console.log(now.getMinutes())
    $(".now-time").css('top',(now.getHours()*0.6+now.getMinutes()*0.01+0.05)+'rem');
    $(".now-time .now-detail").html(now.getHours()+':'+now.getMinutes());
    var data = [
        {
            'start': '2020-04-23 14:30:00',
            'end': '2020-04-23 16:30:00',
            'detail': '交周报'
        },
        {
            'start': '2020-04-23 14:30:00',
            'end': '2020-04-23 15:30:00',
            'detail': '测试研发测试研发'
        },
        {
            'start': '2020-04-23 15:00:00',
            'end': '2020-04-23 16:00:00',
            'detail': 'X部落讨论',
            'address': '亚信大厦'
        },
        {
            'start': '2020-04-23 16:20:00',
            'end': '2020-04-23 17:40:00',
            'detail': '部门例会'
        },
    ]
    data.forEach((item,index)=>{
        data.forEach((itemInner,indexInner)=>{
            if(index>indexInner&&check(new Date(item.start),new Date(item.end),new Date(itemInner.start),new Date(itemInner.end))){
               if(item.array){
                   item.num = 2
                   if(data[indexInner].array){
                       data[indexInner].array.forEach((itemArray,indexArray)=>{
                           if(item.array.indexOf(itemArray)>-1){
                               item.num++
                               if(itemInner.num<item.num){
                                   itemInner.num = item.num
                               }
                               if(itemArray == 0){
                                    data[0].num = item.num
                               }
                           }
                       })
                   }
                   item.array.push(indexInner)
               } else {
                   // item.num = 2
                   if(data[indexInner].num>2){
                       item.num = data[indexInner].num
                   }else {
                       item.num = 2
                   }
                   item.array = []
                   item.array.push(indexInner)
               }
            }
            // if(index<indexInner&&check(new Date(item.start),new Date(item.end),new Date(itemInner.start),new Date(itemInner.end))){
            //     console.log(itemInner.num)
            //     if(itemInner.num){
            //         itemInner.num++
            //     }else {
            //         itemInner.num = 2
            //     }
            //     if(item.num){
            //         // if(itemInner.num&&itemInner.num>item.num){
            //         //     // item.maxNum = itemInner.num
            //         //     item.num++
            //         // }else{
            //             item.num++
            //         // }
            //     }else {
            //         // if(itemInner.num){
            //         //     item.num = itemInner.num
            //         // }else{
            //             item.num = 2
            //         // }
            //
            //     }
            // }
        })
    })
    data.forEach((item,index)=>{
    })
    console.log(data)
   function check(a, b, x, y) {
        if (y < a || b < x) {
            return false;
        } else {
            return true;
        }
    }
})

2020/x/biz/js/page/create-group.js

@@ -0,0 +1,5 @@
require(["ipuUI", "jquery"], function (ipuUI, $) {
    $(function () {
    });
});

2020/x/biz/js/page/group-calendar.js

@@ -0,0 +1,5 @@
require(["ipuUI", "jquery"], function (ipuUI, $) {
    $(function () {
    });
});

2020/x/biz/js/page/group-detail.js

@@ -0,0 +1,5 @@
require(["ipuUI", "jquery"], function (ipuUI, $) {
    $(function () {
    });
});

2020/x/calendar-detail.html

@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <title>日程详情</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
    <link rel="stylesheet" type="text/css" href="biz/lib/remixicon/remixicon.css">
    <link rel="stylesheet" type="text/css" href="biz/css/base.css">
    <script src="ipu/lib/requirejs/require.js"></script>
    <script src="biz/js/require-config.js"></script>
    <script src="biz/js/page/calendar-detail.js"></script>
</head>
<body class="pages-calendar-detail">
<div class="ipu-flex-row ipu-flex-vertical">
    <div class="ipu-flex-col header-container">
        <header class="ipu-toolbar">
            <a class="ipu-fn-left page-back" href="javascript:history.back();">
                <i class="ipu-icon ri-arrow-left-s-line"></i>
            </a>
            <h1 class="ipu-toolbar-title">日程详情</h1>
            <div class="ipu-fn-right">
                <i class="ipu-icon ri-more-line"></i>
            </div>
        </header>
    </div>
    <div class="ipu-flex-col ipu-flex-col-auto">
        <div class="detail-header-container">
            <div class="ipu-flex title-container">
                <div class="title">标题</div>
                <div>X部落会议</div>
            </div>
            <div class="ipu-flex">
                <div class="title">位置</div>
                <div>亚信大厦</div>
            </div>
        </div>
        <div class="detail-time-container">
            <div class="ipu-flex ipu-flex-justify-space time-container">
                <div class="title">开始</div>
                <div class="ipu-flex detail">
                    <div>2020/3/25  下午3:00</div>
                    <div><i class="ipu-icon ri-arrow-right-s-line"></i></div>
                </div>
            </div>
            <div class="ipu-flex ipu-flex-justify-space time-container">
                <div class="title">结束</div>
                <div class="ipu-flex detail">
                    <div>下午4:00</div>
                    <div><i class="ipu-icon ri-arrow-right-s-line"></i></div>
                </div>
            </div>
            <div class="ipu-flex ipu-flex-justify-space">
                <div class="title">重复</div>
                <div class="detail">每天重复</div>
            </div>
        </div>
        <div class="ipu-flex ipu-flex-justify-space calendar-container">
            <div class="title">日历</div>
            <div class="ipu-flex ipu-flex-align-center">
                <div class="point"></div>
                <div class="detail">工作</div>
                <i class="ipu-icon ri-arrow-right-s-line"></i>
            </div>
        </div>
        <div class="ipu-flex ipu-flex-justify-space calendar-container">
            <div class="title">添加附件</div>
            <div class="ipu-flex">
                <div class="detail">235.4MB</div>
                <div><i class="ipu-icon ri-arrow-right-s-line"></i></div>
            </div>
        </div>
    </div>
    <div class="ipu-actions-modal">
        <div class="operation-container">
            <div class="ipu-flex">
                <div><i class="ipu-icon ri-edit-box-line"></i></div>
                <div>修改</div>
            </div>
            <div class="ipu-flex">
                <div><i class="ipu-icon ri-share-box-line"></i></div>
                <div>分享</div>
            </div>
            <div class="ipu-flex">
                <div><i class="ipu-icon ri-delete-bin-4-line"></i></div>
                <div>删除</div>
            </div>
        </div>
        <div class="cancel">
            取消
        </div>
    </div>
    <div class="ipu-modal-overlay"></div>
</div>
</body>
</html>

2020/x/calendar.html

@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <title>日历</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
    <link rel="stylesheet" type="text/css" href="biz/lib/remixicon/remixicon.css">
    <link rel="stylesheet" type="text/css" href="biz/css/base.css">
    <script src="ipu/lib/requirejs/require.js"></script>
    <script src="biz/js/require-config.js"></script>
    <script src="biz/js/page/calendar.js"></script>
</head>
<body class="pages-calendar">
<div class="ipu-flex-row ipu-flex-vertical">
    <div class="ipu-flex-col header-container">
        <header class="ipu-toolbar">
            <h1 class="ipu-toolbar-title">日程</h1>
            <div class="ipu-fn-right">
                <div id="switch-time">
                    <div class="day checked-switch">日</div>
                    <div class="month">月</div>
                </div>
            </div>
        </header>
    </div>
    <div class="ipu-flex-col">
<!--        <form name=CLD>-->
            <table>
<!--                <tr class="header">-->
<!--                    <td colSpan=7>-->
<!--                        公历-->
<!--                        <select name=SY onchange=changeCld()>-->
<!--                            <script type="text/javascript">-->
<!--                                for (i = 1900; i < 2050; i++) document.write('<option>' + i);-->
<!--                            </script>-->
<!--                        </select>-->
<!--                        年-->
<!--                        <select name=SM onchange=changeCld()>-->
<!--                            <script type="text/javascript">-->
<!--                                for (i = 1; i < 13; i++) document.write('<option>' + i);-->
<!--                            </script>-->
<!--                        </select>-->
<!--                        月 <font id=GZ></font>-->
<!--                    </td>-->
<!--                </tr>-->
                <tr class="calendar-header">
                    <th>日</th>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                </tr>
                <script type="text/javascript">
                    var gNum;
                    for (i = 0; i < 6; i++) {
                        if(i!=0){
                            document.write('<tr class="can-hide">');
                        }else{
                            document.write('<tr>');
                        }
                        for (j = 0; j < 7; j++) {
                            gNum = i * 7 + j;
                            document.write('<td id="GD' + gNum + '"><font id="SD' + gNum + '" ');
                            if (j == 0) document.write(' color=red');
                            if (j == 6) document.write(' color=blue');
                            document.write('></font><br><font id="LD' + gNum + '" "></font></td>');
                        }
                        document.write('</tr>');
                    }
                </script>
            </table>
<!--        </form>-->
        <div class="shrink">
            <i class="ri-arrow-up-s-line"></i>
        </div>
        <div class="date-choose">2月12日</div>
    </div>
    <div class="ipu-flex-col ipu-flex-col-auto">
        <div class="time-line-container">
            <div class="ipu-flex">
                <div class="time-container">
                    <div class="time-line">上午0时</div>
                    <div class="time-line">上午1时</div>
                    <div class="time-line">上午2时</div>
                    <div class="time-line">上午3时</div>
                    <div class="time-line">上午4时</div>
                    <div class="time-line">上午5时</div>
                    <div class="time-line">上午6时</div>
                    <div class="time-line">上午7时</div>
                    <div class="time-line">上午8时</div>
                    <div class="time-line">上午9时</div>
                    <div class="time-line">上午10时</div>
                    <div class="time-line">上午11时</div>
                    <div class="time-line">上午12时</div>
                    <div class="time-line">下午1时</div>
                    <div class="time-line">下午2时</div>
                    <div class="time-line">下午3时</div>
                    <div class="time-line">下午4时</div>
                    <div class="time-line">下午5时</div>
                    <div class="time-line">下午6时</div>
                    <div class="time-line">下午7时</div>
                    <div class="time-line">下午8时</div>
                    <div class="time-line">下午9时</div>
                    <div class="time-line">下午10时</div>
                    <div class="time-line">下午11时</div>
                </div>
                <div class="line-container">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="schedule-container">
                        <div class="schedule-item" style="width: 28%;left: 31%;top: 8.7rem;height: .6rem">
                            <div>
                                交周报
                            </div>
                        </div>
                        <div class="schedule-item" style="width: 28%;left: 62%;top: 8.7rem;height: .6rem">
                            <div>
                                测试研发测…
                            </div>
                        </div>
                        <div class="schedule-item" style="width: 28%;top: 9rem;height: .6rem">
                            <div>
                                X部落讨论
                            </div>
                            <div>
                                <i class="ipu-icon ri-map-pin-fill"></i>
                                亚信大厦
                            </div>
                        </div>
                        <div class="schedule-item" style="width: 93%;top: 9.9rem;height: .6rem">
                            <div>
                                部门例会
                            </div>
                        </div>
                        <div class="schedule-item" style="width: 45%;top: 10.8rem;height: .6rem">
                            <div>
                                X部落讨论
                            </div>
                            <div>
                                <i class="ipu-icon ri-map-pin-fill"></i>
                                亚信大厦
                            </div>
                        </div>
                        <div class="schedule-item" style="width: 45%;left:52%;top: 10.8rem;height: .3rem">
                            <div>
                                运动一下｜小目标
                            </div>
                        </div>
                    </div>
                </div>
                <div class="now-time ipu-flex">
                    <div class="now-detail">下午3:48</div>
                    <div class="now-line ipu-flex-col-auto"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

2020/x/create-group.html

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <title>群组日程</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
    <link rel="stylesheet" type="text/css" href="biz/lib/remixicon/remixicon.css">
    <link rel="stylesheet" type="text/css" href="biz/css/base.css">
    <script src="ipu/lib/requirejs/require.js"></script>
    <script src="biz/js/require-config.js"></script>
    <script src="biz/js/page/create-group.js"></script>
</head>
<body class="pages-create-group">
<div class="ipu-flex-row ipu-flex-vertical">
    <div class="ipu-flex-col header-container">
        <header class="ipu-toolbar">
            <a class="ipu-fn-left page-back" href="javascript:history.back();">
               取消
            </a>
            <h1 class="ipu-toolbar-title">新建群组</h1>
            <a class="ipu-fn-right" href="javascript:;">
               完成
            </a>
        </header>
    </div>
    <div class="ipu-flex-col ipu-flex-col-auto">
        <div>
            <div class="ipu-flex ipu-flex-justify-space create-container">
                <div>参与人</div>
                <i class="ipu-icon ri-user-add-fill"></i>
            </div>
        </div>
        <div class="ipu-flex ipu-flex-justify-space create-container">
            <div>群组名称</div>
            <div>
                <input/>
            </div>
        </div>
        <div class="details-container create-container">
            <textarea placeholder="请输入您的描述"></textarea>
        </div>
    </div>
</div>
</body>
</html>

2020/x/group-calendar.html

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <title>群组日程</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
    <link rel="stylesheet" type="text/css" href="biz/lib/remixicon/remixicon.css">
    <link rel="stylesheet" type="text/css" href="biz/css/base.css">
    <script src="ipu/lib/requirejs/require.js"></script>
    <script src="biz/js/require-config.js"></script>
    <script src="biz/js/page/group-calendar.js"></script>
</head>
<body class="pages-group-calendar">
<div class="ipu-flex-row ipu-flex-vertical">
    <div class="ipu-flex-col header-container">
        <header class="ipu-toolbar">
            <a class="ipu-fn-left page-back" href="javascript:history.back();">
                <i class="ipu-icon ri-arrow-left-s-line"></i>
            </a>
            <h1 class="ipu-toolbar-title">群组日程</h1>
            <div class="ipu-fn-right">
                <i class="ipu-icon ri-add-line"></i>
            </div>
        </header>
    </div>
    <div class="ipu-flex-col ipu-flex-col-auto">
        <div class="list-container">
            <div class="ipu-flex ipu-flex-align-center">
                <img src="biz/img/bg-login.png"/>
                <div class="ipu-flex-col-auto">物联网一期</div>
            </div>
            <div class="ipu-flex ipu-flex-align-center">
                <img src="biz/img/bg-login.png"/>
                <div class="ipu-flex-col-auto">业务中台</div>
            </div>
            <div class="ipu-flex ipu-flex-align-center">
                <img src="biz/img/bg-login.png"/>
                <div class="ipu-flex-col-auto">X部落工作</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

2020/x/group-detail.html

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <title>群组日程</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
    <link rel="stylesheet" type="text/css" href="biz/lib/remixicon/remixicon.css">
    <link rel="stylesheet" type="text/css" href="biz/css/base.css">
    <script src="ipu/lib/requirejs/require.js"></script>
    <script src="biz/js/require-config.js"></script>
    <script src="biz/js/page/group-detail.js"></script>
</head>
<body class="pages-create-group">
<div class="ipu-flex-row ipu-flex-vertical">
    <div class="ipu-flex-col header-container">
        <header class="ipu-toolbar">
            <a class="ipu-fn-left page-back" href="javascript:history.back();">
                <i class="ipu-icon ri-arrow-left-s-line"></i>
            </a>
            <h1 class="ipu-toolbar-title">群组详情</h1>
        </header>
    </div>
    <div class="ipu-flex-col ipu-flex-col-auto">
        <div>
            <div class="ipu-flex ipu-flex-justify-space create-container">
                <div>参与人</div>
                <div class="ipu-flex look-container">
                    <div>查看4名成员</div>
                    <i class="ipu-icon ri-arrow-right-s-line"></i>
                </div>
            </div>
            <div class="ipu-flex ipu-flex-justify-start user-container">
                <div>
                    <div class="img-container">
                        <img src="biz/img/bg-login.png"/>
                    </div>
                    <div class="user-name">孙欢欢</div>
                </div>
                <div>
                    <div class="img-container">
                        <img src="biz/img/bg-login.png"/>
                    </div>
                    <div class="user-name">孙欢欢</div>
                </div>
                <div>
                    <div class="img-container">
                        <img src="biz/img/bg-login.png"/>
                    </div>
                    <div class="user-name">孙欢欢</div>
                </div>
                <div>
                    <div class="img-container">
                        <img src="biz/img/bg-login.png"/>
                    </div>
                    <div class="user-name">孙欢欢</div>
                </div>
                <div>
                    <div class="img-container">
                        <img src="biz/img/bg-login.png"/>
                    </div>
                    <div class="user-name">孙欢欢</div>
                </div>
                <div>
                    <i class="ipu-icon ri-add-line"></i>
                    <div class="user-name">邀请</div>
                </div>
            </div>
        </div>
        <div class="ipu-flex ipu-flex-justify-space create-container">
            <div>群组名称</div>
            <div>
                X部落工作
            </div>
        </div>
        <div class="details-container create-container">
            对X部落工作内容进行讨论
        </div>
    </div>
</div>
</body>
</html>