<div class="layui-fluid nepadmin-pad0 nepadmin-mar0" id="VIEW-detail-plan" lay-title="工作计划">
  <div class="layui-card" style="margin-bottom: 0;">
    <div class="layui-card-body nepadmin-pad30">
      <h2 class="nepadmin-pad-b10">日历平铺展示内容</h2>
      <p class="nepadmin-c-gray">可以展示一些工作计划、日程等内容。</p>
    </div>
  </div>
  <div class="layui-row layui-col-space10 nepadmin-pad20">
    <div class="layui-col-md12 layui-bg-white">
      <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin:0;">
        <ul class="layui-tab-title">
          <li class="layui-this">普通展示</li>
          <li>自定义日期内容</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <div class="normal-full-date nepadmin-laydate-full"></div>
          </div>
          <div class="layui-tab-item">
            <div class="custom-full-date nepadmin-laydate-full"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  #VIEW-detail-plan .custom-full-date td.layui-this .customdate-content {
    color: #5a8bff;
  }

  #VIEW-detail-plan .customdate-content {
    line-height: 18px;
    font-size: 12px;
    color: #f25657;
  }

  #VIEW-detail-plan .customdate-content h2 {
    font-size: 24px;
    margin-bottom: 8px;
  }
</style>
<script>
  layui.use(['laydate', 'jquery'], function (laydate) {
    var $ = layui.jquery;
    var viewCls = '#VIEW-detail-plan';

    laydate.render({
      elem: viewCls + ' .normal-full-date',
      position: 'static',
      showBottom: false,
      calendar: true
    });

    function customContent() {
      var markList = {
        '9': [
          '发布推广信息',
          '上传最新文章',
          '审核商品'
        ],
        '21': [
          '发工资'
        ],
        '3': [
          '该干嘛干嘛'
        ]
      };

      $(this.elem).find('[lay-ymd]').each(function () {
        var ymd = $(this).attr('lay-ymd');
        var day = ymd.split('-')[2];
        var mark = markList[day];
        if (mark) {
          var p = $('<div class="customdate-content"><h2>' + day + '</h2>' + mark.join('<br/>') + '</div>');
          $(this).html(p);
        }
      })
    }

    laydate.render({
      elem: viewCls + ' .custom-full-date',
      position: 'static',
      showBottom: false,
      ready: customContent,
      change: customContent
    });

  })
</script>