Kendo datepicker日历弹出自定义css

Question

我的项目中有多个Kendo日期选择器，并希望以不同的方式为几个日期选择器设置日历样式。我知道我们可以覆盖datepicker弹出窗口的样式，但这会改变项目中每个日期选择器的样式。

有没有办法只将自定义样式添加到 k-calendar div

<div class="k-animation-container" style="width: 304px; height: 340.95px; overflow: hidden; position: absolute; top: 303.8px; z-index: 10002; left: 969.25px;">
  <div aria-hidden="true" class="k-calendar-container k-popup k-group k-reset" data-role="popup" style="position: absolute; font-size: 16px; font-family: &quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif; font-stretch: normal; font-style: normal; font-weight: 500; line-height: 19px;">
    <div id="9a7ee06c-cbc1-426b-8259-425ba6430b0b" data-role="calendar" class="k-widget k-calendar">
      <div class="k-header"><a href="#" role="button" class="k-link k-nav-prev" aria-label="Previous" aria-disabled="false"><span class="k-icon k-i-arrow-60-left"></span></a><a href="#" role="button" aria-live="assertive" aria-atomic="true" class="k-link k-nav-fast" aria-disabled="false">2017</a>
        <a
          href="#" role="button" class="k-link k-nav-next" aria-label="Next" aria-disabled="false"><span class="k-icon k-i-arrow-60-right"></span></a>
      </div>
      <table tabindex="0" role="grid" class="k-content k-meta-view k-year" aria-activedescendant="9a7ee06c-cbc1-426b-8259-425ba6430b0b_cell_selected" cellspacing="0">
        <tbody>
          <tr role="row">
            <td role="gridcell"><a tabindex="-1" class="k-link" href="#" data-value="2017/0/1">jan</a></td>
            <td role="gridcell" class=""><a tabindex="-1" class="k-link" href="#" data-value="2017/1/1">feb</a></td>
            <td role="gridcell" class=""><a tabindex="-1" class="k-link" href="#" data-value="2017/2/1">mar</a></td>
            <td role="gridcell" class=""><a tabindex="-1" class="k-link" href="#" data-value="2017/3/1">apr</a></td>
          </tr>
          <tr role="row">
            <td role="gridcell" class=""><a tabindex="-1" class="k-link" href="#" data-value="2017/4/1">maj</a></td>
            <td role="gridcell" class=""><a tabindex="-1" class="k-link" href="#" data-value="2017/5/1">jun</a></td>
            <td role="gridcell" class="k-state-selected k-state-focused" aria-selected="true" id="9a7ee06c-cbc1-426b-8259-425ba6430b0b_cell_selected" aria-label="Current focused date is Saturday, July 01, 2017"><a tabindex="-1" class="k-link" href="#" data-value="2017/6/1">jul</a></td>
            <td role="gridcell" class=""><a tabindex="-1" class="k-link" href="#" data-value="2017/7/1">aug</a></td>
          </tr>
          <tr role="row">
            <td role="gridcell" class=""><a tabindex="-1" class="k-link" href="#" data-value="2017/8/1">sep</a></td>
            <td role="gridcell" class=""><a tabindex="-1" class="k-link" href="#" data-value="2017/9/1">okt</a></td>
            <td role="gridcell"><a tabindex="-1" class="k-link" href="#" data-value="2017/10/1">nov</a></td>
            <td role="gridcell"><a tabindex="-1" class="k-link" href="#" data-value="2017/11/1">dec</a></td>
          </tr>
        </tbody>
      </table>
      <div class="k-footer"><a href="#" class="k-link k-nav-today" title="den 1 september 2017">den 1 september 2017</a></div>
    </div>
  </div>
</div>