增加日程相关设置界面，把日程页面合入首页

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

@@ -1542,6 +1542,7 @@ body {
  border-radius: 50%;
  background: url("../img/schedule-add.png") center center no-repeat;
  background-size: .7rem;
  z-index: 11;
}
.all-todo-item.done .all-todo-flag {
@@ -1750,4 +1751,162 @@ body {
.month-day-schedule-item-more {
  color: rgba(0, 0, 0, .45);
}
.icon-slt-flag {
  font-size: .2rem;
  color: #2E8EFF;
  line-height: .22rem;
  display: none;
}
.ipu-list-item.slt .icon-slt-flag {
  display: block;
}
.notice-time-option {
  font-size: 0.14rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 0.22rem;
}
.schedule-color-list {
  overflow: auto;
  padding-right: .11rem;
  padding-bottom: .2rem;
}
.schedule-color-item {
  margin-left: .15rem;
  margin-right: .04rem;
  float: left;
  position: relative;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 0.12rem;
  margin-top: .19rem;
  overflow: visible;
}
.schedule-color-item .schedule-color-bg {
  width: 100%;
  height: 100%;
  border-radius: 0.12rem;
}
.schedule-color-item .icon-flag {
  position: absolute;
  bottom: -.06rem;
  right: -.06rem;
  width: .2rem;
  height: .2rem;
  overflow: hidden;
  border-radius: 50%;
  display: none;
}
.schedule-color-item.slt .icon-flag {
  display: block;
}
.schedule-color-item .icon-flag:before {
  display: block;
  font-size: .24rem;
  width: .24rem;
  height: .24rem;
  background-color: #fff;
  border-radius: 50%;
  line-height: 1;
  text-align: center;
  margin-top: -.02rem;
  margin-left: -.02rem;
  box-shadow: 0rem 0rem 0.03rem 0rem rgba(0, 0, 0, 0.2);
}
.schedule-color-1 .schedule-color-bg {
  background-color: #4A70F8;
}
.schedule-color-1 .schedule-color {
  color: #4A70F8;
}
.schedule-color-2 .schedule-color-bg {
  background-color: #6F44FF;
}
.schedule-color-2 .schedule-color {
  color: #6F44FF;
}
.schedule-color-3 .schedule-color-bg {
  background-color: #2EB5FF;
}
.schedule-color-3 .schedule-color {
  color: #2EB5FF;
}
.schedule-color-4 .schedule-color-bg {
  background-color: #93AAC3;
}
.schedule-color-4 .schedule-color {
  color: #93AAC3;
}
.schedule-color-5 .schedule-color-bg {
  background-color: #FF6344;
}
.schedule-color-5 .schedule-color {
  color: #FF6344;
}
.schedule-color-6 .schedule-color-bg {
  background-color: #FF8944;
}
.schedule-color-6 .schedule-color {
  color: #FF8944;
}
.schedule-color-7 .schedule-color-bg {
  background-color: #FFC444;
}
.schedule-color-7 .schedule-color {
  color: #FFC444;
}
.set-list-title {
  font-size: 0.16rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 0.22rem;
  padding: .15rem 0 .02rem .15rem;
  background-color: #fff;
}
.schedule-color-set-list .icon-flag {
  display: block;
  font-size: .22rem;
  line-height: 1;
  margin-right: .15rem;
}
.schedule-type-item {
  font-size: 0.16rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  line-height: 0.22rem;
}
.schedule-color-set-list .color-flag {
  margin-top: -.02rem;
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 0.04rem;
}

2020/x/biz/css/base.css

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

2020/x/biz/js/page/index.js

@@ -1,14 +1,12 @@
require(["ipuUI", "jquery", 'tool'], function (ipuUI, $, tool) {
require(["ipuUI", "jquery", 'tool', 'calendar', 'artTemplate'], function (ipuUI, $, tool, calendar, artTemplate) {
  $.sizeReady(function () {
    // 页面公共逻辑
    ipuUI.navBar(".ipu-navbar", {
      callBack: function (index) {
      }
    });
    // 待办
    $(function () {
      // 点搜索进入搜索页
@@ -96,6 +94,286 @@ require(["ipuUI", "jquery", 'tool'], function (ipuUI, $, tool) {
    // 日程
    $(function () {
      // 共享变量
      var today = stdDate(new Date());         // 当前天
      var chooseDate = today;         // 选中天，默认今天
      var chooseMonthDays = [];       // 选中当前月日程信息
      init();
      bindEvent();
      function init() {
        chooseMonthDays = getMonthScheduleList();   // 获取选中月日程信息
        initToday();
        initDayPage();
        initMonthPage();
      }
      // 转化为标准日期，将年、月、日固化
      function stdDate(date) {
        return {
          data: date,
          year: date.getFullYear(),
          month: date.getMonth(),
          date: date.getDate(),
          day: date.getDay()
        }
      }
      // 绑定页面事件
      function bindEvent() {
        // 日，上下收起与展开
        $(".calendar-day-more .icon-flag").click(function () {
          $(".calendar-item").toggleClass("open");
        });
        // 日月显示切换，需要关联日，月的时间，比如在日界面选中2020-05-04，切换到月，则默认2020-05月，仍选中当前日期
        $(".switch-option-wrap .switch-option").click(function () {
          if (!$(this).hasClass("on")) {
            $(this).addClass("on").siblings(".on").removeClass("on");
            var index = $(this).index();
            $(".calendar-item:eq(" + index + ")").addClass("on").siblings(".on").removeClass("on");
          }
          // todo: 需要查询选中日的日程数据
        });
        // 日选中-日期切换
        $(".calendar-day-table-body .table-td").click(function () {
          if (!$(this).hasClass("sltday")) { // 当前日期不是选中的
            $(".calendar-day-table-body .table-td.sltday").removeClass("sltday");
            $(this).addClass("sltday");
            if (!$(this).parents(".table-tr").hasClass("sltrow")) {
              $(".calendar-day-table-body .table-tr.sltrow").removeClass("sltrow");
              $(this).parents(".table-tr").addClass("sltrow");
            }
            loadDayData();  // 加载对应天数据
          }
        });
        // 月日程切换，无须处理，选中日期没有特效显示效果
        // 点击月中某天，显示详情列表
        $(".calendar-month-table-body").on("click", ".month-day", function () {
          $(".calendar-month-table-body .table-td.current").removeClass("current");
          $(".month-day-schedule-list-all").hide();
          $(this).parents(".table-td").addClass("current");
          $(".month-day.sltday").removeClass("sltday");
          $(this).addClass("sltday");
          var data = $(this).data("scheduleList");  // 取缓存数据
          if (data) {  // 判断有详情列表数据
            var htmlStr = artTemplate("schedule-month-list-tpl", {list: data.event});
            $(".month-day-schedule-list-all").show().find("ul").html(htmlStr);
            var offset = $(this).offset();
            var listHeight = $(".month-day-schedule-list-all").innerHeight();
            var winHeight = $(window).innerHeight();
            var toolbarHeight = $(".ipu-toolbar").innerHeight();
            $(".month-day-schedule-list-all .arrow-flag").css("left", offset.left + $(this).innerWidth() / 2);
            var topPosition = offset.top + $(this).innerHeight();
            if (winHeight - topPosition > listHeight) {  // 放置在上面不够，放置在日历下面
              $(".month-day-schedule-list-all").css("top", topPosition - toolbarHeight);
              $(".arrow-flag-up").show();
              $(".arrow-flag-down").hide();
            } else {
              $(".month-day-schedule-list-all").css("top", offset.top - listHeight - toolbarHeight);
              $(".arrow-flag-up").hide();
              $(".arrow-flag-down").show();
            }
          }
        });
        // 任何点击先隐藏弹出的月详情列表，除非在点在列表上
        $("body").on("touchstart", function (e) {
          var target = e.target;
          if ($(".month-day-schedule-list-all").find(target).size() == 0) {
            $(".calendar-month-table-body .table-td.current").removeClass("current");
            $(".month-day-schedule-list-all").hide();
          }
        });
        // 月进入详情
        $(".month-day-schedule-list-all").on("click", ".ipu-list-item", function () {
          location.href = "schedule-detail.html";
        });
        // 日界面进入详情页
        $(".day-schedule-list").on("click", ".ipu-list-item", function () {
          location.href = "schedule-detail.html";
        });
        // 新建日程
        $(".schedule-add").click(function () {
          location.href = "schedule-add.html";
        });
        // 进入日程设置页
        $(".head-icon-config").click(function () {
          window.location.href = "schedule-set.html";
        });
      }
      // 数字转化为两位数字符串
      function toStdNum(num) {
        return (num > 0 && num < 10 ? "0" : "") + num;
      }
      // 转换为日历信息
      function toCalendarDay(year, month, date) {
        var day = calendar.solar2lunar(year, month + 1, date);
        var numText = day.cDay;
        var oldNumText = day.festival || day.Term || day.IDayCn;    // 显示优先：节日、节气、农历
        if (oldNumText == day.IDayCn && day.lDay == 1) {    // 初一若不是节日，则显示成X月
          oldNumText = day.IMonthCn;
        }
        day.num = numText;
        day.oldNum = oldNumText;
        day.dateStr = year + toStdNum(month + 1) + toStdNum(date);    // 当前天日期，如2020-05-12
        day.className = "";
        if (month != chooseDate.month) {
          day.className += " othermonthday";
        }
        // 当前天
        if (year == today.year && month == today.month && date == today.date) {
          day.className += " today";
        }
        // 选中天
        if (year == chooseDate.year && month == chooseDate.month && date == chooseDate.date) {
          day.className += " sltday";
        }
        return day;
      }
      // 获取选中月，日程信息
      function getMonthScheduleList() {
        var monthDays = [];
        var tempDay = null;
        var i = 0;
        var year = chooseDate.year;
        var month = chooseDate.month;
        var monthDayNum = calendar.solarDays(year, month + 1);    // 当月最大天数
        var monthFirstDay = (new Date(year, month, 1)).getDay();
        var monthLastDay = (new Date(year, month, monthDayNum)).getDay();
        // 判定起始天是否周日，不是周日，则要补充上月N天
        if (monthFirstDay != 0) {
          for (i = 0; i < monthFirstDay; i++) {
            tempDay = new Date(year, month, -i);
            tempDay = toCalendarDay(year, tempDay.getMonth(), tempDay.getDate());
            monthDays.unshift(tempDay);   //往数组前面插入数
          }
        }
        for (i = 1; i <= monthDayNum; i++) {
          tempDay = new Date(year, month, i);
          tempDay = toCalendarDay(year, tempDay.getMonth(), tempDay.getDate());
          monthDays.push(tempDay);
        }
        // 最后一天不是周六，补充下月N天
        if (monthLastDay != 6) {
          for (i = 1; i < 7 - monthLastDay; i++) {
            tempDay = new Date(year, month + 1, i);
            tempDay = toCalendarDay(year, tempDay.getMonth(), tempDay.getDate());
            monthDays.push(tempDay);
          }
        }
        return monthDays;
      }
      // 初始化今天信息
      function initToday() {
        var dayText = ['日', '一', '二', '三', '四', '五', '六'];
        var dateStr = (today.month + 1) + "月" + today.date + "日" + "<span class='day'>周" + dayText[today.day] + "</span>";
        $(".date-choose").html(dateStr);
      }
      // 初始化日界面
      function initDayPage() {
        // 再根据周情况，进行一次数据封装
        var weekDayList = [];
        for (var i = 0; i < chooseMonthDays.length - 1; i = i + 7) {
          var array = [chooseMonthDays[i], chooseMonthDays[i + 1], chooseMonthDays[i + 2], chooseMonthDays[i + 3],
            chooseMonthDays[i + 4], chooseMonthDays[i + 5], chooseMonthDays[i + 6]];
          weekDayList.push(array);
        }
        var dayHtmlStr = artTemplate('schedule-day-tpl', {data: weekDayList});
        $(".calendar-day-table-body").html(dayHtmlStr);
        $(".calendar-day-table-body .sltday").parents(".table-tr").addClass("sltrow");  // 标记为当前选择行
        // 查询当天数据，更新选中天数据
        loadDayData();
      }
      // 初始化月界面
      function initMonthPage() { // 获取当前年，月，
        var monthDteStr = (chooseDate.year) + "年" + (chooseDate.month + 1) + "月";
        $(".calendar-month-title").html(monthDteStr);
        var dayHtmlStr = artTemplate('schedule-month-tpl', {data: chooseMonthDays});
        $(".calendar-month-table-body").html(dayHtmlStr);
        // 查询当月数据
        loadMonthData();
      }
      // 加载天数据
      function loadDayData() {
        // 加载数据，更新日期
        console.log('update day data');
      }
      // 加载月数据
      function loadMonthData() {
        // 假设生成第4，7，8天数据
        var data = [{
          date: chooseMonthDays[4].dateStr,
          event: [{title: '交周报', time: '下午2:00-3:00'}, {title: '部门例会', time: '下午2:00-3:00'}]
        }, {
          date: chooseMonthDays[7].dateStr,
          event: [{
            title: '交周报', time: '下午2:00-3:00'
          }, {
            title: '部门例会', time: '下午2:00-3:00'
          }, {
            title: '部门例会', time: '下午2:00-3:00'
          }, {
            title: '部门例会', time: '下午2:00-3:00'
          }, {
            title: '部门例会', time: '下午2:00-3:00'
          }, {
            title: '部门例会', time: '下午2:00-3:00'
          }],
          workday: true   // 工作日
        }, {
          date: chooseMonthDays[8].dateStr,
          holiday: true   // 休息日
        }, {
          date: chooseMonthDays[35].dateStr,
          event: [{title: '交周报', time: '下午2:00-3:00'}, {title: '部门例会', time: '下午2:00-3:00'}]
        },];
        $.each(data, function (index, obj) {
          var htmlStr = artTemplate("schedule-month-tpl-child", {item: obj});
          $(".month-day-" + obj.date).append(htmlStr).data("scheduleList", obj);
        });
      }
    });
    // 工作

2020/x/biz/js/page/schedule-notice-set.js

@@ -0,0 +1,8 @@
require(["ipuUI", "jquery", "tool"], function (ipuUI, $, tool) {
  $(function () {
    $(".common-list").on("click", ".ipu-list-item", function () {
      $(this).addClass("slt").siblings(".slt").removeClass("slt");
    });
  });
});

2020/x/biz/js/page/schedule-set-color.js

@@ -0,0 +1,8 @@
require(["ipuUI", "jquery", "tool"], function (ipuUI, $, tool) {
  $(function () {
    $(".schedule-color-list").on("click", ".schedule-color-item", function () {
      $(this).addClass("slt").siblings(".slt").removeClass("slt");
    });
  });
});

2020/x/index.html

@@ -187,214 +187,312 @@
          </li>
          <!-- 日程-->
          <li class="pages-calendar">
            <div class="ipu-fn-p ipu-txt-center">待完善</div>
            <!--
          <li class="pages-schedule">
            <div class="ipu-flex-row ipu-flex-vertical">
              <div class="ipu-flex-col header-container ipu-fn-bd-b">
              <div class="ipu-flex-col ipu-fn-bd-b">
                <header class="ipu-toolbar">
                  <h1 class="ipu-toolbar-title">日程</h1>
                  <a class="ipu-fn-left head-icon-config" href="javascript:;">
                    <i class="ipu-icon ri-settings-4-line"></i>
                  </a>
                  <div class="ipu-fn-right">
                    <div id="switch-time">
                      <div class="day checked-switch">日</div>
                      <div class="month">月</div>
                    <div class="switch-time ipu-flex-middle-center">
                      <div class="switch-option-wrap ipu-flex">
                        <div class="switch-option switch-option-day on">日</div>
                        <div class="switch-option switch-option-month">月</div>
                      </div>
                    </div>
                  </div>
                </header>
              </div>
              <div class="ipu-flex-col">
                <table>
                  <tbody>
                  <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>
                  <tr>
                    <td id="GD0"><font id="SD0" color="red" class="num"></font><br><font id="LD0" "=""
                      class="old-num"></font></td>
                    <td id="GD1"><font id="SD1" class="num"></font><br><font id="LD1" "="" class="old-num"></font></td>
                    <td id="GD2"><font id="SD2" class="num"></font><br><font id="LD2" "="" class="old-num"></font></td>
                    <td id="GD3"><font id="SD3" class="num">1</font><br><font id="LD3" "="" class="old-num">愚人节</font>
                    </td>
                    <td id="GD4"><font id="SD4" class="num">2</font><br><font id="LD4" "="" class="old-num">初十</font>
                    </td>
                    <td id="GD5"><font id="SD5" class="num">3</font><br><font id="LD5" "="" class="old-num">十一</font>
                    </td>
                    <td id="GD6"><font id="SD6" color="blue" class="num">4</font><br><font id="LD6" "=""
                      class="old-num"><font color="limegreen">清明</font></font></td>
                  </tr>
                  <tr class="can-hide">
                    <td id="GD7"><font id="SD7" color="red" class="num">5</font><br><font id="LD7" "=""
                      class="old-num">十三</font></td>
                    <td id="GD8"><font id="SD8" class="num">6</font><br><font id="LD8" "="" class="old-num">十四</font>
                    </td>
                    <td id="GD9"><font id="SD9" class="num">7</font><br><font id="LD9" "="" class="old-num">十五</font>
                    </td>
                    <td id="GD10"><font id="SD10" class="num">8</font><br><font id="LD10" "="" class="old-num">十六</font>
                    </td>
                    <td id="GD11" class="choose-day"><font id="SD11" class="num today">9</font><br><font id="LD11" "=""
                      class="old-num">十七</font></td>
                    <td id="GD12"><font id="SD12" class="num">10</font><br><font id="LD12" "=""
                      class="old-num">十八</font></td>
                    <td id="GD13"><font id="SD13" color="blue" class="num">11</font><br><font id="LD13" "=""
                      class="old-num">十九</font></td>
                  </tr>
                  <tr class="can-hide">
                    <td id="GD14"><font id="SD14" color="red" class="num">12</font><br><font id="LD14" "=""
                      class="old-num">二十</font></td>
                    <td id="GD15"><font id="SD15" class="num">13</font><br><font id="LD15" "=""
                      class="old-num">廿一</font></td>
                    <td id="GD16"><font id="SD16" class="num">14</font><br><font id="LD16" "=""
                      class="old-num">廿二</font></td>
                    <td id="GD17"><font id="SD17" class="num">15</font><br><font id="LD17" "=""
                      class="old-num">廿三</font></td>
                    <td id="GD18"><font id="SD18" class="num">16</font><br><font id="LD18" "=""
                      class="old-num">廿四</font></td>
                    <td id="GD19"><font id="SD19" class="num">17</font><br><font id="LD19" "=""
                      class="old-num">廿五</font></td>
                    <td id="GD20"><font id="SD20" color="blue" class="num">18</font><br><font id="LD20" "=""
                      class="old-num">廿六</font></td>
                  </tr>
                  <tr class="can-hide">
                    <td id="GD21"><font id="SD21" color="red" class="num">19</font><br><font id="LD21" "=""
                      class="old-num"><font color="limegreen">谷雨</font></font></td>
                    <td id="GD22"><font id="SD22" class="num">20</font><br><font id="LD22" "=""
                      class="old-num">廿八</font></td>
                    <td id="GD23"><font id="SD23" class="num">21</font><br><font id="LD23" "=""
                      class="old-num">廿九</font></td>
                    <td id="GD24"><font id="SD24" class="num">22</font><br><font id="LD24" "=""
                      class="old-num">三十</font></td>
                    <td id="GD25"><font id="SD25" class="num">23</font><br><font id="LD25" "=""
                      class="old-num">初一</font></td>
                    <td id="GD26"><font id="SD26" class="num">24</font><br><font id="LD26" "=""
                      class="old-num">初二</font></td>
                    <td id="GD27"><font id="SD27" color="blue" class="num">25</font><br><font id="LD27" "=""
                      class="old-num">初三</font></td>
                  </tr>
                  <tr class="can-hide">
                    <td id="GD28"><font id="SD28" color="red" class="num">26</font><br><font id="LD28" "=""
                      class="old-num">初四</font></td>
                    <td id="GD29"><font id="SD29" class="num">27</font><br><font id="LD29" "=""
                      class="old-num">初五</font></td>
                    <td id="GD30"><font id="SD30" class="num">28</font><br><font id="LD30" "=""
                      class="old-num">初六</font></td>
                    <td id="GD31"><font id="SD31" class="num">29</font><br><font id="LD31" "=""
                      class="old-num">初七</font></td>
                    <td id="GD32"><font id="SD32" class="num">30</font><br><font id="LD32" "=""
                      class="old-num">初八</font></td>
                    <td id="GD33"><font id="SD33" class="num"></font><br><font id="LD33" "="" class="old-num"></font>
                    </td>
                    <td id="GD34"><font id="SD34" color="blue" class="num"></font><br><font id="LD34" "=""
                      class="old-num"></font></td>
                  </tr>
                  <tr class="can-hide">
                    <td id="GD35"><font id="SD35" color="red" class="num"></font><br><font id="LD35" "=""
                      class="old-num"></font></td>
                    <td id="GD36"><font id="SD36" class="num"></font><br><font id="LD36" "="" class="old-num"></font>
                    </td>
                    <td id="GD37"><font id="SD37" class="num"></font><br><font id="LD37" "="" class="old-num"></font>
                    </td>
                    <td id="GD38"><font id="SD38" class="num"></font><br><font id="LD38" "="" class="old-num"></font>
                    </td>
                    <td id="GD39"><font id="SD39" class="num"></font><br><font id="LD39" "="" class="old-num"></font>
                    </td>
                    <td id="GD40"><font id="SD40" class="num"></font><br><font id="LD40" "="" class="old-num"></font>
                    </td>
                    <td id="GD41"><font id="SD41" color="blue" class="num"></font><br><font id="LD41" "=""
                      class="old-num"></font></td>
                  </tr>
                  </tbody>
                </table>
                <div class="shrink">
                  <i class="ri-arrow-up-s-line"></i>
              <div class="ipu-flex-col ipu-flex-col-auto ">
                <!-- 日程的日展现形式  -->
                <div class="ipu-flex-content common-bg-white calendar-item calendar-item-day on">
                  <div class="ipu-flex-row ipu-flex-vertical">
                    <div class="ipu-flex-col">
                      <div class="common-bg-white">
                        <div class="calendar-day-table">
                          <div class="calendar-day-table-head">
                            <div class="common-flex-tiled table-tr">
                              <div class="table-th">日</div>
                              <div class="table-th">一</div>
                              <div class="table-th">二</div>
                              <div class="table-th">三</div>
                              <div class="table-th">四</div>
                              <div class="table-th">五</div>
                              <div class="table-th">六</div>
                            </div>
                          </div>
                          <div class="calendar-day-table-body">
                          </div>
                        </div>
                        <div class="calendar-day-more">
                          <i class="icon-flag ri-arrow-down-s-line"></i>
                          <i class="icon-flag ri-arrow-up-s-line"></i>
                        </div>
                      </div>
                      <div class="date-choose"></div>
                    </div>
                    <div class="ipu-flex-col ipu-flex-col-auto">
                      <div class="ipu-list ipu-list-media common-list day-schedule-list">
                        <ul>
                          <li class="">
                            <a class="ipu-list-item ">
                              <div class="ipu-list-item-media ipu-flex-align-start">
                                <div class="schedule-item-flag"></div>
                              </div>
                              <div class="ipu-list-item-inner">
                                <div class="ipu-list-item-title-row">
                                  <div class="ipu-list-item-title">
                                    <div class="schedule-item-title">X部落例会，讨论原型设计相关问题</div>
                                  </div>
                                </div>
                                <div class="ipu-list-item-subtitle">
                                  <div class="schedule-item-date">全天</div>
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="">
                            <a class="ipu-list-item ">
                              <div class="ipu-list-item-media ipu-flex-align-start">
                                <div class="schedule-item-flag"></div>
                              </div>
                              <div class="ipu-list-item-inner">
                                <div class="ipu-list-item-title-row">
                                  <div class="ipu-list-item-title">
                                    <div class="schedule-item-title">X部落例会，讨论原型设计相关问题</div>
                                  </div>
                                </div>
                                <div class="ipu-list-item-subtitle">
                                  <div class="schedule-item-date">全天</div>
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="">
                            <a class="ipu-list-item">
                              <div class="ipu-list-item-media ipu-flex-align-start">
                                <div class="schedule-item-flag"></div>
                              </div>
                              <div class="ipu-list-item-inner">
                                <div class="ipu-list-item-title-row">
                                  <div class="ipu-list-item-title">
                                    <div class="schedule-item-title">X部落例会，讨论原型设计相关问题</div>
                                  </div>
                                </div>
                                <div class="ipu-list-item-subtitle">
                                  <div class="schedule-item-date">全天</div>
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="">
                            <a class="ipu-list-item">
                              <div class="ipu-list-item-media ipu-flex-align-start">
                                <div class="schedule-item-flag"></div>
                              </div>
                              <div class="ipu-list-item-inner">
                                <div class="ipu-list-item-title-row">
                                  <div class="ipu-list-item-title">
                                    <div class="schedule-item-title">X部落例会，讨论原型设计相关问题</div>
                                  </div>
                                </div>
                                <div class="ipu-list-item-subtitle">
                                  <div class="schedule-item-date">全天</div>
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="">
                            <a class="ipu-list-item">
                              <div class="ipu-list-item-media ipu-flex-align-start">
                                <div class="schedule-item-flag"></div>
                              </div>
                              <div class="ipu-list-item-inner">
                                <div class="ipu-list-item-title-row">
                                  <div class="ipu-list-item-title">
                                    <div class="schedule-item-title">X部落例会，讨论原型设计相关问题</div>
                                  </div>
                                </div>
                                <div class="ipu-list-item-subtitle">
                                  <div class="schedule-item-date">全天</div>
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="">
                            <a class="ipu-list-item">
                              <div class="ipu-list-item-media ipu-flex-align-start">
                                <div class="schedule-item-flag"></div>
                              </div>
                              <div class="ipu-list-item-inner">
                                <div class="ipu-list-item-title-row">
                                  <div class="ipu-list-item-title">
                                    <div class="schedule-item-title">X部落例会，讨论原型设计相关问题</div>
                                  </div>
                                </div>
                                <div class="ipu-list-item-subtitle">
                                  <div class="schedule-item-date">全天</div>
                                </div>
                              </div>
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="schedule-add"></div>
                  </div>
                </div>
                <div class="date-choose">4月9日</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 class="time-line">下午12时</div>
                <!-- 日程的月展现形式  -->
                <div class="ipu-flex-content common-bg-white calendar-item calendar-item-month ">
                  <div class="calendar-month-title">
                    2020年4月
                  </div>
                  <div class="calendar-month-table">
                    <div class="calendar-month-table-head">
                      <div class="common-flex-tiled table-tr">
                        <div class="table-th weekday">
                          日
                        </div>
                        <div class="table-th">
                          一
                        </div>
                        <div class="table-th">
                          二
                        </div>
                        <div class="table-th">
                          三
                        </div>
                        <div class="table-th">
                          四
                        </div>
                        <div class="table-th">
                          五
                        </div>
                        <div class="table-th weekday">
                          六
                        </div>
                      </div>
                    </div>
                    <div class="calendar-month-table-body">
                    </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="line"></div>
                  </div>
                  <!-- 月列表全 -->
                  <div class="month-day-schedule-list-all">
                    <div class="arrow-flag arrow-flag-up"></div>
                    <div class="arrow-flag arrow-flag-down"></div>
                    <div class="ipu-list common-list common-list-last-clear">
                      <ul></ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            -->
            <script type="text/html" id="schedule-day-tpl">
              {{ each data list dataindex }}
              <div class="common-flex-tiled table-tr">
                {{ each list item}}
                <div class="table-td {{item.className}}">
                  <div class="day ">
                    <div class="num">{{item.num}}</div>
                    <div class="old-num">{{item.oldNum}}</div>
                  </div>
                </div>
                {{ /each}}
              </div>
              {{/each}}
            </script>
            <!-- 月界面，日历列表 -->
            <script type="text/html" id="schedule-month-tpl">
              {{ each data item }}
              <div class="table-td">
                <div class="ipu-flex ipu-flex-vertical month-day {{item.className}} month-day-{{item.dateStr}}">
                  <div class="ipu-flex-grow-0 ipu-flex-center-middle month-day-num">
                    <span class="num">{{item.num}}</span>
                    <span class="old-num">{{item.oldNum}}</span>
                  </div>
                </div>
              </div>
              {{/each}}
            </script>
            <!-- 月界面，日期后台数据模板 -->
            <script type="text/html" id="schedule-month-tpl-child">
              {{set event = item.event}}
              {{if event && event.length != 0 }}
              <div class="month-day-over">
                <div class="ipu-flex-middle-center">
                  <i class="icon ri-close-line"></i>
                </div>
              </div>
              <div class="ipu-flex-grow-1 month-day-schedule-list">
                {{each event ev index}}
                {{if index < 4 || index == 4 && event.length == 5 }}
                <div class="month-day-schedule-item ipu-fn-row">{{ev.title}}</div>
                {{else if index == 4 && event.length > 5 }}
                <div class="month-day-schedule-item month-day-schedule-item-more ipu-fn-row">还有{{event.length-4}}项...</div>
                {{else}}
                <!-- 不显示　-->
                {{/if}}
                {{/each}}
                {{/if}}
              </div>
              {{if item.workday}}
              <div class="flag-workday">班</div>
              {{/if}}
              {{if item.holiday}}
              <div class="flag-holiday">休</div>
              {{/if}}
            </script>
            <!-- 月界面，日程列表全 -->
            <script type="text/html" id="schedule-month-list-tpl">
              {{ each list item}}
              <li class="ipu-list-item ipu-flex-align-start">
                <div class="item-flag">
                </div>
                <div class="ipu-list-item-inner">
                  <div class="ipu-flex ipu-flex-vertical">
                    <div class="item-title">{{item.title}}</div>
                    <div class="item-time">{{item.time}}</div>
                  </div>
                </div>
              </li>
              {{/each}}
            </script>
          </li>
          <!-- 工作目前使用 -->

2020/x/schedule-notice-set.html

@@ -0,0 +1,141 @@
<!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/schedule-notice-set.js"></script>
</head>
<body class="pages-schedule-notice-set">
<div class="ipu-flex-row ipu-flex-vertical">
  <div class="ipu-flex-col ipu-fn-bd-b">
    <header class="ipu-toolbar common-bg-white">
      <h1 class="ipu-toolbar-title">提醒设置</h1>
      <a class="ipu-fn-left page-back" href="javascript:history.back();">
        <i class="ipu-icon ri-arrow-left-s-line"></i>
      </a>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto ipu-fn-p-b">
    <div class="ipu-list common-list common-list-padding common-last-clear ">
      <ul>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="notice-time-option">无</div>
            </div>
            <div class="ipu-list-item-after">
              <i class="icon-slt-flag ri-check-line"></i>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="notice-time-option">日程开始时</div>
            </div>
            <div class="ipu-list-item-after">
              <i class="icon-slt-flag ri-check-line"></i>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="notice-time-option">5分钟前</div>
            </div>
            <div class="ipu-list-item-after">
              <i class="icon-slt-flag ri-check-line"></i>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="notice-time-option">10分钟前</div>
            </div>
            <div class="ipu-list-item-after">
              <i class="icon-slt-flag ri-check-line"></i>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="notice-time-option">15分钟前</div>
            </div>
            <div class="ipu-list-item-after">
              <i class="icon-slt-flag ri-check-line"></i>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="notice-time-option">1小时前</div>
            </div>
            <div class="ipu-list-item-after">
              <i class="icon-slt-flag ri-check-line"></i>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="notice-time-option">2小时前</div>
            </div>
            <div class="ipu-list-item-after">
              <i class="icon-slt-flag ri-check-line"></i>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="notice-time-option">1天前</div>
            </div>
            <div class="ipu-list-item-after">
              <i class="icon-slt-flag ri-check-line"></i>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="notice-time-option">2天前</div>
            </div>
            <div class="ipu-list-item-after">
              <i class="icon-slt-flag ri-check-line"></i>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="notice-time-option">1周前</div>
            </div>
            <div class="ipu-list-item-after">
              <i class="icon-slt-flag ri-check-line"></i>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

2020/x/schedule-set-color.html

@@ -0,0 +1,67 @@
<!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/schedule-set-color.js"></script>
</head>
<body class="pages-schedule-notice-set">
<div class="ipu-flex-row ipu-flex-vertical">
  <div class="ipu-flex-col ipu-fn-bd-b">
    <header class="ipu-toolbar common-bg-white">
      <h1 class="ipu-toolbar-title">颜色设置</h1>
      <a class="ipu-fn-left page-back" href="javascript:history.back();">
        <i class="ipu-icon ri-arrow-left-s-line"></i>
      </a>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto ipu-fn-p-b common-bg-white">
    <div class="schedule-color-list">
      <div class="schedule-color-item schedule-color-1">
        <div class="schedule-color-bg"></div>
        <i class="icon-flag schedule-color ri-checkbox-circle-fill"></i>
      </div>
      <div class="schedule-color-item schedule-color-2">
        <div class="schedule-color-bg"></div>
        <i class="icon-flag schedule-color ri-checkbox-circle-fill"></i>
      </div>
      <div class="schedule-color-item schedule-color-3 slt">
        <div class="schedule-color-bg"></div>
        <i class="icon-flag schedule-color ri-checkbox-circle-fill"></i>
      </div>
      <div class="schedule-color-item schedule-color-4">
        <div class="schedule-color-bg"></div>
        <i class="icon-flag schedule-color ri-checkbox-circle-fill"></i>
      </div>
      <div class="schedule-color-item schedule-color-5">
        <div class="schedule-color-bg"></div>
        <i class="icon-flag schedule-color ri-checkbox-circle-fill"></i>
      </div>
      <div class="schedule-color-item schedule-color-6">
        <div class="schedule-color-bg"></div>
        <i class="icon-flag schedule-color ri-checkbox-circle-fill"></i>
      </div>
      <div class="schedule-color-item schedule-color-7">
        <div class="schedule-color-bg"></div>
        <i class="icon-flag schedule-color ri-checkbox-circle-fill"></i>
      </div>
    </div>
  </div>
</div>
</body>
</html>

2020/x/schedule-set.html

@@ -0,0 +1,143 @@
<!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/schedule-notice-set.js"></script>
</head>
<body class="pages-schedule-notice-set">
<div class="ipu-flex-row ipu-flex-vertical">
  <div class="ipu-flex-col ipu-fn-bd-b">
    <header class="ipu-toolbar common-bg-white">
      <h1 class="ipu-toolbar-title">日程设置</h1>
      <a class="ipu-fn-left page-back" href="javascript:history.back();">
        <i class="ipu-icon ri-arrow-left-s-line"></i>
      </a>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto ipu-fn-p-b">
    <div class="ipu-list common-list common-list-padding common-last-clear schedule-color-set-list">
      <div class="set-list-title">
        来自个人
      </div>
      <ul>
        <li class="ipu-list-item schedule-color-1">
          <div class="ipu-flex-grow-0">
            <i class="icon-flag schedule-color ri-checkbox-circle-fill"></i>
          </div>
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="schedule-type-item">我的日历</div>
            </div>
          </div>
        </li>
        <li class="ipu-list-item schedule-color-2">
          <div class="ipu-flex-grow-0">
            <i class="icon-flag schedule-color ri-checkbox-circle-fill"></i>
          </div>
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="schedule-type-item">我的任务</div>
            </div>
          </div>
        </li>
        <li class="ipu-list-item schedule-color-3">
          <div class="ipu-flex-grow-0">
            <i class="icon-flag schedule-color ri-checkbox-circle-fill"></i>
          </div>
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="schedule-type-item">手机日历</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="ipu-list common-list common-list-padding common-last-clear schedule-color-set-list">
      <div class="set-list-title">
        来自他人
      </div>
      <ul>
        <li class="ipu-list-item ipu-list-item-link schedule-color-4">
          <div class="ipu-flex-grow-0">
            <i class="icon-flag schedule-color ri-checkbox-circle-fill"></i>
          </div>
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="schedule-type-item">孙欢欢</div>
            </div>
            <div class="ipu-list-item-after">
              <div class="color-flag schedule-color-bg"></div>
            </div>
          </div>
        </li>
        <li class="ipu-list-item  ipu-list-item-link schedule-color-5">
          <div class="ipu-flex-grow-0">
            <i class="icon-flag schedule-color ri-checkbox-circle-fill"></i>
          </div>
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="schedule-type-item">王海波</div>
            </div>
            <div class="ipu-list-item-after">
              <div class="color-flag schedule-color-bg"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="ipu-list common-list common-list-padding common-last-clear schedule-color-set-list">
      <div class="set-list-title">
        来自群组
      </div>
      <ul>
        <li class="ipu-list-item ipu-list-item-link schedule-color-6">
          <div class="ipu-flex-grow-0">
            <i class="icon-flag schedule-color ri-checkbox-circle-fill"></i>
          </div>
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="schedule-type-item">X部落项目组</div>
            </div>
            <div class="ipu-list-item-after">
              <div class="color-flag schedule-color-bg"></div>
            </div>
          </div>
        </li>
        <li class="ipu-list-item ipu-list-item-link schedule-color-7">
          <div class="ipu-flex-grow-0">
            <i class="icon-flag schedule-color ri-checkbox-circle-fill"></i>
          </div>
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title">
              <div class="schedule-type-item">物联网部落项目组</div>
            </div>
            <div class="ipu-list-item-after">
              <div class="color-flag schedule-color-bg"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>