页面的head部分，需远程调用font-awesome图标字体库，并引入页面所需的样式文件，代码如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">

页面的body部分，设置好日历日期的容器列表和日期事件的内容列表，代码如下：

<div class="route" id="index"></div>
<div class="route" id="oct-week-3"></div>
<div class="route" id="oct-week-4"></div>
<div class="route" id="nov-week-1"></div>
<div class="route" id="schedule"></div>
<main class="cal-device">
  <header class="cal-header">
    <div class="cal-subheader"></div>
    <div class="cal-bar">
      <div class="cal-button -left">
        <i class="fa fa-bars -calendar"></i>
        <a href="#index" class="fa fa-chevron-left -schedule"></a>
      </div>
      <div class="cal-title">
        <div class="cal-heading -calendar">Calendar</div>
        <div class="cal-heading -schedule">Wednesday, November 10</div>
      </div>
      <div class="cal-button -right">
        <i class="fa fa-search"></i>
      </div>
    </div>
  </header>
  <section class="cal-app">
    <header class="cal-week">
      <div class="cal-weekday">周日</div>
      <div class="cal-weekday">周一</div>
      <div class="cal-weekday">周二</div>
      <div class="cal-weekday">周三</div>
      <div class="cal-weekday">周四</div>
      <div class="cal-weekday">周五</div>
      <div class="cal-weekday">周六</div>
    </header>
    <div class="cal-scene -calendar">
<!-- 省略部分演示代码 -->
    </div>
    <div class="cal-scene -schedule">
      <div class="cal-item">
        <div class="cal-time"><span>08:00</span></div>
        <div class="cal-task">
          <p>wake up</p>
        </div>
      </div>
      <div class="cal-item -long">
        <div class="cal-time"><span>12:15</span></div>
        <div class="cal-task">
          <p>meeting with the team, discussing the project requirements</p>
        </div>
      </div>
      <div class="cal-item">
        <div class="cal-time"><span>13:00</span></div>
        <div class="cal-task">
          <p>lunch with Peter</p>
          <a><i class="fa fa-map-marker"></i>cafe <q>Petit brasserie</q></a>
        </div>
      </div>
      <div class="cal-item">
        <div class="cal-time"><span>14:30</span></div>
        <div class="cal-task">
          <p>call with Johnathan and Stevie</p>
        </div>
      </div>
      <div class="cal-item -long">
        <div class="cal-time"><span>16:45</span></div>
        <div class="cal-task">
          <p>project presentation</p>
          <a><i class="fa fa-map-marker"></i>Head Office</a>
        </div>
      </div>
      <div class="cal-item">
        <div class="cal-time"><span>18:00</span></div>
        <div class="cal-task">
          <p>call with Johnathan and Stevie</p>
        </div>
      </div>
      <div class="cal-item -long">
        <div class="cal-time"><span>19:00</span></div>
        <div class="cal-task">
          <p>David's birthday party</p>
          <a><i class="fa fa-map-marker"></i>bar <q>Tailor's John</q></a>
        </div>
      </div>
      <div class="cal-item">
        <div class="cal-time"></div>
        <div class="cal-task"></div>
      </div>
    </div>
  </section>
</main>
<div class="meta">
  <h1>CSS-only Colorful <br>Calendar Concept</h1>
  <p>
    Dribbble Rework<br />
    Original Shot by <a href="https://jy.tp.yuanmeng.life/" target="_blank">智慧小屋</a>
  </p>
  <p>
    Click on the arrows (when enabled) and the highlighted date to see the effect.<br>
    You can also go <strong>back</strong> in your browser to navigate between scenes, or click the left arrow in the schedule view.
  </p>
  <p>
    Works in all modern browsers.
  </p>
</div>