ng-ytl-zorro-antd/src/showcase/nz-demo-calendar/nz-demo-calendar.html

An enterprise-class UI components based on Ant Design and Angular

<article>
  <section class="markdown"><h1>Calendar 日历</h1>
    <section class="markdown"><p>按照日历形式展示数据的容器。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <a  class="anchor">#</a>
      </h2>
      <p>当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。</p>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="24">
      <nz-code-box [nzTitle]="'基本'" id="components-calendar-demo-basic" [nzCode]="NzDemoCalendarBasicCode">
        <nz-demo-calendar-basic demo></nz-demo-calendar-basic>
        <div intro>
          <p>一个通用的日历面板，支持年/月切换。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'国际化'" id="components-calendar-demo-locale" [nzCode]="NzDemoCalendarLocaleCode">
        <nz-demo-calendar-locale demo></nz-demo-calendar-locale>
        <div intro>
          <p>通过 <code>nzLocale</code> 配置时区、语言等, 默认支持 en, zh-cn</p></div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'卡片模式'" id="components-calendar-demo-card" [nzCode]="NzDemoCalendarCardCode">
        <nz-demo-calendar-card demo></nz-demo-calendar-card>
        <div intro>
          <p>用于嵌套在空间有限的容器中。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'渲染数据'" id="components-calendar-demo-content" [nzCode]="NzDemoCalendarContentCode">
        <nz-demo-calendar-content demo></nz-demo-calendar-content>
        <div intro>
          <p>一个复杂的应用示例，用 dateCell 和 monthCell 模板来自定义需要渲染的数据。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzValue</td>
          <td>展示日期</td>
          <td>Date</td>
          <td>当前日期</td>
        </tr>
        <tr>
          <td>nzMode</td>
          <td>初始模式，<code>month/year</code></td>
          <td>String</td>
          <td>month</td>
        </tr>
        <tr>
          <td>nzFullscreen</td>
          <td>是否全屏显示</td>
          <td>Boolean</td>
          <td>true</td>
        </tr>
        <tr>
          <td>nzLocale</td>
          <td>国际化配置</td>
          <td>String</td>
          <td>zh-cn</td>
        </tr>
        <tr>
          <td>dateCell</td>
          <td>天模板</td>
          <td>ng-template</td>
          <td>
            说明：通过let-day获取day对象
            <pre>
{{'{'}}
  number: number;
  isLastMonth: boolean;
  isNextMonth: boolean;
  isCurrentDay: boolean;
  isSelectedDay: boolean;
  title: string;
  date: Moment;
  disabled: boolean;
  firstDisabled: boolean;
  lastDisabled: boolean;
{{'}'}}</pre>
          </td>
        </tr>
        <tr>
          <td>monthCell</td>
          <td>月模板</td>
          <td>ng-template</td>
          <td>
            说明：通过let-month获取month对象
            <pre>
{{'{'}}
  index: number;
  name: string;
  year: number;
  isCurrentMonth: boolean;
  isSelectedMonth: boolean;
{{'}'}}</pre>
          </td>
        </tr>
      </tbody>
    </table>
  </section>
</article>