<div class="iq-widget-container">
    <div class="iq-widget-header">
        <div class="iq-icon" data-ui="icon"></div>
        <div class="iq-label" data-ui="label"></div>
    </div>
    <!-- display selected date -->
    <div class="iq-widget-content">
        <div class="iq-selected-date" data-ui="selected-date">
            <div class="iq-value" data-ui="value"></div>
            <div class="iq-popup-icon" data-ui="icon"></div>
        </div>
    </div>

    <div class="iq-calendar" data-ui="calendar">
        <div class="iq-calendar-background">
            <div class="iq-calendar-content">
                <div class="iq-selector"></div>
                <div class="iq-selectors" data-ui="selectors">
                    <!-- month selector -->
                    <ul class="iq-month-select" data-ui="month-select">
                        <li class="iq-previous" data-ui="previous">
                            <svg width="100%" height="100%" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
                                <g>
                                    <line x1="12" y1="0" x2="2" y2="7" />
                                    <line x1="2" y1="7" x2="12" y2="14" />
                                </g>
                            </svg>
                        </li>
                        <li class="iq-current" data-ui="current">September</li>
                        <li class="iq-next" data-ui="next">
                            <svg width="100%" height="100%" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
                                <g>
                                    <line x1="2" y1="0" x2="12" y2="7" />
                                    <line x1="12" y1="7" x2="2" y2="14" />
                                </g>
                            </svg>
                        </li>
                    </ul>
                    <!-- year selector -->
                    <ul class="iq-year-select" data-ui="year-select">
                        <li class="iq-previous" data-ui="previous">
                            <svg width="100%" height="100%" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
                                <g>
                                    <line x1="12" y1="0" x2="2" y2="7" />
                                    <line x1="2" y1="7" x2="12" y2="14" />
                                </g>
                            </svg>
                        </li>
                        <li class="iq-current" data-ui="current">2014</li>
                        <li class="iq-next" data-ui="next">
                            <svg width="100%" height="100%" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
                                <g>
                                    <line x1="2" y1="0" x2="12" y2="7" />
                                    <line x1="12" y1="7" x2="2" y2="14" />
                                </g>
                            </svg>
                        </li>
                    </ul>
                </div>
                <div class="iq-day-select" data-ui="day-select">
                    <!-- day-name headers -->
                    <ul class="iq-day-header" data-ui="day-header">
                        <li class="iq-day-name" data-ui="day-name">Mo</li>
                        <li class="iq-day-name" data-ui="day-name">Di</li>
                        <li class="iq-day-name" data-ui="day-name">Mi</li>
                        <li class="iq-day-name" data-ui="day-name">Do</li>
                        <li class="iq-day-name" data-ui="day-name">Fr</li>
                        <li class="iq-day-name" data-ui="day-name">Sa</li>
                        <li class="iq-day-name" data-ui="day-name">So</li>
                    </ul>
                    <!-- six week rows -->
                    <ul class="iq-week" data-ui="week">
                        <li class="iq-day" data-ui="day">1</li>
                        <li class="iq-day" data-ui="day">2</li>
                        <li class="iq-day" data-ui="day">3</li>
                        <li class="iq-day" data-ui="day">4</li>
                        <li class="iq-day" data-ui="day">5</li>
                        <li class="iq-day" data-ui="day">6</li>
                        <li class="iq-day" data-ui="day">7</li>
                    </ul>
                    <ul class="iq-week" data-ui="week">
                        <li class="iq-day" data-ui="day">1</li>
                        <li class="iq-day" data-ui="day">2</li>
                        <li class="iq-day" data-ui="day">3</li>
                        <li class="iq-day" data-ui="day">4</li>
                        <li class="iq-day" data-ui="day">5</li>
                        <li class="iq-day" data-ui="day">6</li>
                        <li class="iq-day" data-ui="day">7</li>
                    </ul>
                    <ul class="iq-week" data-ui="week">
                        <li class="iq-day" data-ui="day">1</li>
                        <li class="iq-day" data-ui="day">2</li>
                        <li class="iq-day" data-ui="day">3</li>
                        <li class="iq-day" data-ui="day">4</li>
                        <li class="iq-day" data-ui="day">5</li>
                        <li class="iq-day" data-ui="day">6</li>
                        <li class="iq-day" data-ui="day">7</li>
                    </ul>
                    <ul class="iq-week" data-ui="week">
                        <li class="iq-day" data-ui="day">1</li>
                        <li class="iq-day" data-ui="day">2</li>
                        <li class="iq-day" data-ui="day">3</li>
                        <li class="iq-day" data-ui="day">4</li>
                        <li class="iq-day" data-ui="day">5</li>
                        <li class="iq-day" data-ui="day">6</li>
                        <li class="iq-day" data-ui="day">7</li>
                    </ul>
                    <ul class="iq-week" data-ui="week">
                        <li class="iq-day" data-ui="day">1</li>
                        <li class="iq-day" data-ui="day">2</li>
                        <li class="iq-day" data-ui="day">3</li>
                        <li class="iq-day" data-ui="day">4</li>
                        <li class="iq-day" data-ui="day">5</li>
                        <li class="iq-day" data-ui="day">6</li>
                        <li class="iq-day" data-ui="day">7</li>
                    </ul>
                    <ul class="iq-week" data-ui="week">
                        <li class="iq-day" data-ui="day">1</li>
                        <li class="iq-day" data-ui="day">2</li>
                        <li class="iq-day" data-ui="day">3</li>
                        <li class="iq-day" data-ui="day">4</li>
                        <li class="iq-day" data-ui="day">5</li>
                        <li class="iq-day" data-ui="day">6</li>
                        <li class="iq-day" data-ui="day">7</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
