@collab-ui/core/scss/components/date-picker/examples/default.html

Cisco Collab UI CSS Framework

  <div class="cui-event-overlay__children cui-date-picker">
    <div class="cui-datepicker__month-container">
      <div class="cui-datepicker__header">
        <div class="cui-datepicker__navigation">
          <div class="cui-datepicker__navigation--current-month">November 2018</div>
          <div class="cui-datepicker__navigation--buttons">
            <button class="cui-button cui-button--36 cui-button--icon" alt="previous" type="button" aria-label="previous">
              <span class="cui-button__children"> <i class="cui-icon icon icon-arrow-left_16"></i> </span>
            </button>
            <button class="cui-button cui-button--36 cui-button--icon" alt="next" type="button" aria-label="next">
              <span class="cui-button__children"> <i class="cui-icon icon icon-arrow-right_16"></i> </span>
            </button>
          </div>
        </div>
        <div class="cui-datepicker__day--names">
          <div class="cui-datepicker__day--name">S</div>
          <div class="cui-datepicker__day--name">M</div>
          <div class="cui-datepicker__day--name">T</div>
          <div class="cui-datepicker__day--name">W</div>
          <div class="cui-datepicker__day--name">T</div>
          <div class="cui-datepicker__day--name">F</div>
          <div class="cui-datepicker__day--name">S</div>
        </div>
      </div>
      <div class="cui-datepicker__month">
        <div class="cui-datepicker__week">
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day cui-datepicker__day--outside-month" alt="28" type="button" aria-label="28" aria-selected="false">
            <span class="cui-button__children">28</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day cui-datepicker__day--outside-month" alt="29" type="button" aria-label="29" aria-selected="false">
            <span class="cui-button__children">29</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day cui-datepicker__day--outside-month" alt="30" type="button" aria-label="30" aria-selected="false">
            <span class="cui-button__children">30</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day cui-datepicker__day--outside-month" alt="31" type="button" aria-label="31" aria-selected="false">
            <span class="cui-button__children">31</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="1" type="button" aria-label="1" aria-selected="false">
            <span class="cui-button__children">1</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="2" type="button" aria-label="2" aria-selected="false">
            <span class="cui-button__children">2</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="3" type="button" aria-label="3" aria-selected="false">
            <span class="cui-button__children">3</span>
          </button>
        </div>
        <div class="cui-datepicker__week">
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="4" type="button" aria-label="4" aria-selected="false">
            <span class="cui-button__children">4</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="5" type="button" aria-label="5" aria-selected="false">
            <span class="cui-button__children">5</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="6" type="button" aria-label="6" aria-selected="false">
            <span class="cui-button__children">6</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="7" type="button" aria-label="7" aria-selected="false">
            <span class="cui-button__children">7</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="8" type="button" aria-label="8" aria-selected="false">
            <span class="cui-button__children">8</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="9" type="button" aria-label="9" aria-selected="false">
            <span class="cui-button__children">9</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="10" type="button" aria-label="10" aria-selected="false">
            <span class="cui-button__children">10</span>
          </button>
        </div>
        <div class="cui-datepicker__week">
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="11" type="button" aria-label="11" aria-selected="false">
            <span class="cui-button__children">11</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="12" type="button" aria-label="12" aria-selected="false">
            <span class="cui-button__children">12</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="13" type="button" aria-label="13" aria-selected="false">
            <span class="cui-button__children">13</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="14" type="button" aria-label="14" aria-selected="false">
            <span class="cui-button__children">14</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="15" type="button" aria-label="15" aria-selected="false">
            <span class="cui-button__children">15</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="16" type="button" aria-label="16" aria-selected="false">
            <span class="cui-button__children">16</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="17" type="button" aria-label="17" aria-selected="false">
            <span class="cui-button__children">17</span>
          </button>
        </div>
        <div class="cui-datepicker__week">
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="18" type="button" aria-label="18" aria-selected="false">
            <span class="cui-button__children">18</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="19" type="button" aria-label="19" aria-selected="false">
            <span class="cui-button__children">19</span>
          </button>
          <button
            class="cui-button cui-button--circle cui-button--28 cui-datepicker__day cui-datepicker__day--selected cui-datepicker__day--focus"
            alt="20"
            type="button"
            aria-label="20"
            aria-selected="true"
          >
            <span class="cui-button__children">20</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day cui-datepicker__day--today" alt="21" type="button" aria-label="21" aria-selected="false">
            <span class="cui-button__children">21</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="22" type="button" aria-label="22" aria-selected="false">
            <span class="cui-button__children">22</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="23" type="button" aria-label="23" aria-selected="false">
            <span class="cui-button__children">23</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="24" type="button" aria-label="24" aria-selected="false">
            <span class="cui-button__children">24</span>
          </button>
        </div>
        <div class="cui-datepicker__week">
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="25" type="button" aria-label="25" aria-selected="false">
            <span class="cui-button__children">25</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="26" type="button" aria-label="26" aria-selected="false">
            <span class="cui-button__children">26</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="27" type="button" aria-label="27" aria-selected="false">
            <span class="cui-button__children">27</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="28" type="button" aria-label="28" aria-selected="false">
            <span class="cui-button__children">28</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="29" type="button" aria-label="29" aria-selected="false">
            <span class="cui-button__children">29</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day" alt="30" type="button" aria-label="30" aria-selected="false">
            <span class="cui-button__children">30</span>
          </button>
          <button class="cui-button cui-button--circle cui-button--28 cui-datepicker__day cui-datepicker__day--outside-month" alt="1" type="button" aria-label="1" aria-selected="false">
            <span class="cui-button__children">1</span>
          </button>
        </div>
      </div>
    </div>
  </div>