SOURCE

<div class="page-group">
  <div class="page finance" id="page_finance">
    <header class="bar bar-nav">
      <a class="icon icon-menu pull-left close-panel" data-panel='#panel-left-demo'></a>
      <h1 class="title">日程表</h1>
    </header>
    <nav class="bar bar-tab">
      <a class="tab-item external active" href="/pages/product-selclass">
        <span class="btn-menu-new"></span>
        <span class="tab-label">新增</span>
      </a>
      <a class="tab-item external" href="http://sellerdemo.carwor.com/foodig
">
        <span class="btn-menu-food"></span>
        <span class="tab-label">吃货团</span>
      </a>
      <a class="tab-item external" href="/pages/Orderpage">
        <span class="btn-menu-date"></span>
        <span class="tab-label">当日</span>
      </a>
      <a class="tab-item external" href="/pages/Setup">
        <span class="btn-menu-order"></span>
        <span class="tab-label">订单</span>
      </a>
    </nav>

    <div class="content">
      <div class="calendar">

        <div class="year-month">
          <span>2016年7月</span>
          <a class="btn-prev icon icon-left" href="#"></a>
          <a class="btn-next icon icon-right" href="#"></a>
        </div>
        <div class="week row">
          <div class="col-13">日</div>
          <div class="col-13">一</div>
          <div class="col-13">二</div>
          <div class="col-13">三</div>
          <div class="col-13">四</div>
          <div class="col-13">五</div>
          <div class="col-13">六</div>
        </div>
        <div class="day row">
          <div class="col-13 prev-month">26</div>
          <div class="col-13 prev-month">27</div>
          <div class="col-13 prev-month">28</div>
          <div class="col-13 prev-month">29</div>
          <div class="col-13 prev-month">30</div>
          <div class="col-13">1</div>
          <div class="col-13">2</div>
        </div>
        <div class="day row">
          <div class="col-13">3</div>
          <div class="col-13">4</div>
          <div class="col-13">5</div>
          <div class="col-13">6</div>
          <div class="col-13 close">7</div>
          <div class="col-13 close">8</div>
          <div class="col-13 close">9</div>
        </div>
        <div class="day row">
          <div class="col-13">10</div>
          <div class="col-13 close">11</div>
          <div class="col-13">12</div>
          <div class="col-13 close">13</div>
          <div class="col-13">14</div>
          <div class="col-13 close">15</div>
          <div class="col-13">16</div>
        </div>
        <div class="day row">
          <div class="col-13 close">17</div>
          <div class="col-13 close">18</div>
          <div class="col-13">19</div>
          <div class="col-13">20</div>
          <div class="col-13">21</div>
          <div class="col-13 close">22</div>
          <div class="col-13 close">23</div>
        </div>
        <div class="day row">
          <div class="col-13">24</div>
          <div class="col-13 close">25</div>
          <div class="col-13 close">26</div>
          <div class="col-13">27</div>
          <div class="col-13">28</div>
          <div class="col-13">29</div>
          <div class="col-13">30</div>
        </div>
        <div class="day row">
          <div class="col-13">31</div>
          <div class="col-13 next-month">1</div>
          <div class="col-13 next-month">2</div>
          <div class="col-13 next-month">3</div>
          <div class="col-13 next-month">4</div>
          <div class="col-13 next-month">5</div>
          <div class="col-13 next-month">6</div>
        </div>
        <div class="mark">
          <div class="row no-gutter">
            <div class="item-left col-66">
              点击日期调整当日店铺状态和库品库存
            </div>
            <div class="open-mark item-right col-33">
              灰色为开店日
            </div>
          </div>
          <div class="row no-gutter">
            <div class="block-hidden item-left col-66">mark</div>
            <div class="close-mark item-right col-33">
              红色为关店日
            </div>
          </div>
        </div>
      </div>
      <!-- end calendar -->
    </div>
  </div>
</div>
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal theme-dark" id='panel-left-demo'>
  <div class="content-block">
    <div class="profile-header">
      <div class="profile-imgbox-box">
        <img src="http://d.3987.com/dmlf_140505/005.jpg" alt="Profile Image" />
      </div>
      <div class="profile-info-box">
        <div class="item-title">蒙厅·D·路飞</div>
        <div class="item-title">
          <a class="button-logout button-round  close-panel">退出登陆</a>
        </div>
      </div>
    </div>
    <div class="panel-menu">
      <div class="menu-item">
        <div class="menu-title menu-multi">
          <div class="btn-order">
          </div>
          <a class="menu-button" href="#order_sub_menu">
            <div class="menu-inner">订单</div>
          </a>
        </div>
        <div class="menu-dropdown hide" id="order_sub_menu">
          <a class="menu-button" href="/pages/Orderpage-history">
              过往订单
            </a>
        </div>
      </div>
      <div class="menu-item">
        <div class="menu-title menu-multi">
          <div class="btn-pro">
          </div>
          <a class="menu-button" href="#product_manager">
            <div class="menu-inner">商品管理</div>
          </a>
        </div>
        <div class="menu-dropdown hide" id="product_manager">
          <a class="menu-button" href="/pages/product-selclass">
              新增商品
            </a>
          <a class="menu-button" href="http://sellerdemo.carwor.com/foodig">
              我的吃货团
            </a>
          <a class="menu-button" href="/pages/Invite">
              发起吃货团
            </a>
          <a class="menu-button" href="/pages/product-down">
              下架商品
            </a>
        </div>
      </div>
      <div class="menu-item">
        <div class="menu-title">
          <div class="btn-message">
          </div>
          <a class="menu-button" href="/pages/Message">
              消息
            </a>
        </div>
      </div>
      <div class="menu-item">
        <div class="menu-title">
          <div class="btn-setting">
          </div>
          <a class="menu-button" href="/pages/setup ">
              设置
            </a>
        </div>
      </div>
    </div>
  </div>
</div>

.page-group {
  max-width: 412px;
}

.row .col-13 {
  width: 13%;
  margin-left: 1%;
}

.week {
  font-size: 0.6rem;
  text-align: center;
  font-weight: 400;
  margin: auto;
  height: 1rem;
  line-height: 1rem;
}

.day {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 300;
  margin: auto;
  height: 2.2rem;
  line-height: 2.2rem;
  border-bottom: 0.01rem solid #ccc;
}

.day .col-13:after {
  background: #ccc;
  border-radius: 50%;
  bottom: .5em;
  display: block;
  content: '';
  height: 0.3rem;
  width: 0.3rem;
  left: 50%;
  margin: -.25em 0 0 -.25em;
  position: relative;
}

.day .close:after {
  background: #a50002;
}

.mark {
  font-size: 0.5rem;
  margin: 0.5rem 0;
}

.mark .item-left {
  text-align: left;
  padding-left: 1rem;
}

.mark .item-right {
  text-align: right;
  padding-right: 1rem;
}

.mark .open-mark:before {
  background: #ccc;
  border-radius: 50%;
  bottom: -0.6rem;
  display: block;
  content: '';
  height: 0.45rem;
  width: 0.45rem;
  left: 18%;
  margin: -.25em 0 0 -.25em;
  position: relative;
}

.mark .item-right {
  text-align: right;
  padding-right: 1rem;
}

.mark .row {
  margin: -0.3rem 0 !important;
}

.mark .item-left {
   padding-top: 0.4rem;
}

.mark .close-mark:before {
  background: #a50002;
  border-radius: 50%;
  bottom: -0.6rem;
  display: block;
  content: '';
  height: 0.45rem;
  width: 0.45rem;
  left: 18%;
  margin: -.25em 0 0 -.25em;
  position: relative;
}

.mark .block-hidden {
  visibility:hidden;
}

.day .prev-month,
.day .next-month {
  color: #ccc;
}

.calendar {
  text-align: center;
}

.calendar .year-month {
  position: relative;
  margin: 0.25rem 0;
}

.year-month .btn-prev,
.year-month .btn-next {
  background: #cbd1d2;
  color: #f9f9f9;
  border-radius: 50%;
  height: 2em;
  font-size: .55em;
  line-height: 2em;
  margin: -1em;
  position: absolute;
  top: 50%;
  width: 2em;
}

.year-month .btn-prev:hover,
.year-month .btn-next:hover {
  background: #cbd1d2;
  color: #f9f9f9;
}

.year-month .btn-prev {
  left: 5em;
}

.year-month .btn-next {
  right: 5em;
}