disneyland.disney.go.com
Open in
urlscan Pro
104.70.58.26
Public Scan
Submitted URL: http://disneylanddiningoffer.com/
Effective URL: https://disneyland.disney.go.com/
Submission: On September 28 via api from US — Scanned from US
Effective URL: https://disneyland.disney.go.com/
Submission: On September 28 via api from US — Scanned from US
Form analysis 2 forms found in the DOM
Name: qqVm.qqForm —
<form class="qqForm ng-valid ng-valid-date-max ng-valid-date-min ng-valid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength ng-valid-min ng-valid-max ng-dirty ng-valid-parse" name="qqVm.qqForm" novalidate="">
<!-- ngInclude: undefined --><ng-include src="'/wdpr-quickquote/partials/qq-tickets-panel.html'"
class="ng-scope"><a id="purchaseTickets" ng-show="qqVm.form.purchaseTickets.href" ng-class="qqVm.form.purchaseTickets.attribs.class" href="" name="&lid=ticketsButton" data-link-id="DLR_PurchaseTickets_Button" wdpr-analytics-track-link="{"interactionName":"PurchaseTickets_Click"}" target="_self" class="ng-scope ng-hide" aria-hidden="true"> <div class="panel-group"> <div class="panel panel-primary" ng-class="{fiftyAnniversaryTicketsButton: qqVm.brand == 'wdw'}"> <div class="panel-heading"> <div class="panel-title"> <wdpr-icon class="pull-left hide ng-isolate-scope" icon="" size="l" title="qqVm.form.purchaseTickets.label"><!-- ngIf: iconVm.showFallbackIcon --> <!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep" ng-bind-html="iconVm.icon" ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style="" aria-label="qqVm.form.purchaseTickets.label"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon> <span class="ng-binding"></span> </div> </div> </div> </div> </a>
<div id="qqPanelTicketsAccordian" class="panel-group hide ng-scope" role="tablist" aria-multiselectable="true">
<div class="panel panel-primary">
<div id="qqTicketsHeading" class="panel-heading" role="tab" data-toggle="collapse" data-parent="#qqPanelTicketsAccordian" href="#mobileTicketsQQ" aria-expanded="false" aria-controls="mobileTicketsQQ">
<div class="panel-title collapsed" role="button"> <wdpr-icon class="pull-left ng-isolate-scope" icon="" size="l" rotate="qqVm.isOpen ? 90 : 0" title="qqVm.form.purchaseTickets.label"><!-- ngIf: iconVm.showFallbackIcon -->
<!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep" ng-bind-html="iconVm.icon" ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon"
ng-style="" aria-label="qqVm.form.purchaseTickets.label"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon> <span class="ng-binding"></span> </div>
</div>
<div id="mobileTicketsQQ" class="panel-collapse collapse" role="tabpanel" aria-labelledby="qqTicketsHeading">
<div class="panel-body"> tickets quick quote </div>
</div>
</div>
</div>
</ng-include> <!-- ngInclude: undefined --><ng-include src="'/wdpr-quickquote/partials/qq-panel.html'" class="ng-scope">
<style>
#dpo-heading,
#dpo-cta-heading {
display: none;
}
div.purchaseTicketsContainer {
display: none;
}
@media screen and (max-width: 569px) {
.headerPanel .toggle {
padding: 20px 10px 32px 10px !important;
}
#dpo-heading,
#dpo-cta-heading {
display: block;
}
div.purchaseTicketsContainer {
display: block;
position: relative;
padding: 0 16px;
-webkit-flex: 1 auto;
-ms-flex: 1 auto;
flex: 1 auto;
}
button#purchaseTicketsButton {
background-color: #409 !important;
color: #fff !important;
display: inline-block;
border: none;
border-radius: 24px !important;
font-size: 16px;
font-weight: 700;
height: 44px;
line-height: 20px;
text-align: center;
padding: 8px 10px;
white-space: nowrap;
vertical-align: middle;
text-decoration: none;
width: 100%;
}
div.fieldsContainer>div#findPricesContainer button {
border-radius: 24px;
}
wdpr-quick-quote section#quickQuote #qqPanel .panel-body {
border-top-color: transparent;
}
#pageContainer.homepage #mobileContainer .panel:last-child {
border-top: 1px solid transparent;
}
#qqPanelAccordian div.panel div.panel-heading {
display: none;
}
#dpo-heading,
#dpo-cta-heading {
padding: 20px 16px;
}
body.homepage .quickquote-container section#quickQuote {
max-width: 430px !important;
}
wdpr-quick-quote section#quickQuote #dpo-cta-heading h3,
wdpr-quick-quote section#quickQuote div#dpo-heading h3 {
margin: 0;
font-weight: 300;
font-family: Avenir;
line-height: 36px;
}
#qqPanel {
padding: 0 16px 20px 16px;
}
wdpr-quick-quote section#quickQuote form.qqForm div.fieldsContainer {
border-radius: 8px;
}
wdpr-quick-quote section#quickQuote .panel .panel-body .panel-group {
background-color: #F0E6FC;
margin-bottom: 32px;
}
}
</style>
<div id="dpo-cta-heading">
<h3>Tickets and Park Hours</h3>
</div>
<div class="purchaseTicketsContainer">
<button wdpr-pillbutton-v2="" theme="action" id="purchaseTicketsButton" name="&lid=DLR_FindTickets_button" data-link-id="DLR_FindARoom_button" wdpr-analytics-track-link="{"interactionName":"QQ_FindPrices"}" tabindex="0"
aria-disabled="false">Purchase Tickets</button>
</div>
<div id="mobileContainer" class="ng-scope"> <park-hours class="panel headerPanel parkHours ng-isolate-scope" ng-class="{fiftyAnniversaryParkHours: siteId == 'wdw'}">
<ul class="headerPanel unavailable hide" ng-class="!parkHoursVm.parksAvailable ? 'show' : 'hide'">
<li class="toggle">
<div class="toggleContainer park-hours-not-available"> <svg class="toggle-container-icon" viewBox="0 0 100 100">
<path d="M25 10L75 50L25 90z"></path>
</svg> <a target="_self" href="calendars/day/" class="ng-binding">Today's Park Hours</a> </div>
</li>
</ul>
<ul class="headerPanel available closed show" ng-class="[parkHoursVm.parksAvailable ? 'show' : 'hide', parkHoursVm.isMobileExpanded ? 'open' : 'closed']">
<li class="toggle" ng-click="parkHoursVm.mobileToggle()" wdpr-analytics-track-link="{"interactionName":"parkHoursToggle.analytics"}" data-link-id="_HPCTA_ParkHours_Expand" role="button" tabindex="0">
<div class="toggleContainer ng-binding"> <svg class="toggle-container-icon" viewBox="0 0 100 100">
<path d="M25 10L75 50L25 90z"></path>
</svg> Today's Park Hours </div>
</li>
<li class="container">
<div class="park-hours-container">
<a target="_self" ng-href="calendars/day/" class="park-hours-title" href="calendars/day/"> <div class="park-hours-content-left"> <wdpr-icon class="park-hours-icon ng-isolate-scope" icon="" size="s"><!-- ngIf: iconVm.showFallbackIcon --> <!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep" ng-bind-html="iconVm.icon" ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style="" aria-label="Icon"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon> </div> <div class="park-hours-content-right"> <h2 class="park-hours-head-title ng-binding"> Park Hours for </h2> <span class="park-hours-date ng-binding">Thursday, September 28, 2023</span> </div> </a>
<!-- ngRepeat: park in parkHoursVm.parks --><a ng-repeat="park in parkHoursVm.parks" href="calendars/day/#/disneyland/" target="_self" class="park-hours-park ng-scope"> <img class="park-hours-park_icon" ng-src="https://cdn1.parksmedia.wdprapps.disney.com/media/layout/assets/icons/pep/disney-park-generic-castle.svg" src="https://cdn1.parksmedia.wdprapps.disney.com/media/layout/assets/icons/pep/disney-park-generic-castle.svg"> <div class="park-hours-park_wrapper"> <div class="park-hours-park_title ng-binding">Disneyland Park</div> <div class="park-hours-park_schedule"> <div itemprop="validFrom" content="8:00 AM"></div> <div itemprop="validThrough" content="12:00 AM"></div> <!-- ngIf: !park.operating --> <!-- ngIf: park.operating --><span ng-if="park.operating" itemprop="opens" content="8:00 AM" class="ng-binding ng-scope"> 8:00 AM </span><!-- end ngIf: park.operating --> <!-- ngIf: park.operating --><span ng-if="park.operating" class="ng-binding ng-scope"> to </span><!-- end ngIf: park.operating --> <!-- ngIf: park.operating --><span ng-if="park.operating" itemprop="closes" content="12:00 AM" class="ng-binding ng-scope"> 12:00 AM </span><!-- end ngIf: park.operating --> </div> </div> </a><!-- end ngRepeat: park in parkHoursVm.parks --><a ng-repeat="park in parkHoursVm.parks" href="calendars/day/#/disney-california-adventure/" target="_self" class="park-hours-park ng-scope"> <img class="park-hours-park_icon" ng-src="https://cdn1.parksmedia.wdprapps.disney.com/media/layout/assets/icons/pep/california-adventure.svg" src="https://cdn1.parksmedia.wdprapps.disney.com/media/layout/assets/icons/pep/california-adventure.svg"> <div class="park-hours-park_wrapper"> <div class="park-hours-park_title ng-binding">Disney California Adventure Park</div> <div class="park-hours-park_schedule"> <div itemprop="validFrom" content="8:00 AM"></div> <div itemprop="validThrough" content="6:00 PM"></div> <!-- ngIf: !park.operating --> <!-- ngIf: park.operating --><span ng-if="park.operating" itemprop="opens" content="8:00 AM" class="ng-binding ng-scope"> 8:00 AM </span><!-- end ngIf: park.operating --> <!-- ngIf: park.operating --><span ng-if="park.operating" class="ng-binding ng-scope"> to </span><!-- end ngIf: park.operating --> <!-- ngIf: park.operating --><span ng-if="park.operating" itemprop="closes" content="6:00 PM" class="ng-binding ng-scope"> 6:00 PM </span><!-- end ngIf: park.operating --> </div> </div> </a><!-- end ngRepeat: park in parkHoursVm.parks --> <!-- <div class="park-hours-entertainment">
<a target="_self" ng-if="parkHoursVm.temporaryClosuresEmpty" ng-href="{{::parkHoursVm.temporaryClosures.uri}}">
{{::parkHoursVm.temporaryClosures.title}}
</a>
</div> --> <!-- <div class="park-hours-more-hours-link">
<a target="_self" ng-href="{{::parkHoursVm.parkHours.moreHoursLink}}">
{{::parkHoursVm.moreHoursText}}
</a>
</div> --> </div>
</li>
</ul>
</park-hours> </div>
<div id="qqPanelAccordian" class="panel-group ng-scope" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div id="qqHeading" class="panel-heading" role="tab" aria-label="" href="#qqPanel" aria-expanded="true" aria-controls="qqPanel" ng-class="{fiftyAnniversaryPriceButton: qqVm.brand == 'wdw'}">
<div class="panel-title" ng-click="qqVm.mobilePriceButtonClick()" role="button" data-link-id="DLR_PriceYourVaction_Button" wdpr-analytics-track-link="{"interactionName":"PriceVacation_Click"}" tabindex="0"> <wdpr-icon
class="pull-left ng-isolate-scope" icon="" size="sm" rotate="qqVm.isOpen ? 90 : 0" title=""><!-- ngIf: iconVm.showFallbackIcon --> <!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep"
ng-bind-html="iconVm.icon" ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style=""
aria-label=""></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon>
<div ng-bind-html="qqVm.form.title.label" class="ng-binding">Price Your Vacation</div>
</div>
</div>
<div id="dpo-heading">
<h3>Price Your Vacation</h3>
</div>
<div id="qqPanel" class="panel-collapse collapse in" role="tabpanel" collapse="!qqVm.isOpen" aria-labelledby="qqHeading" style="height: auto;">
<div class="panel-body"> <!-- ngInclude: undefined --><ng-include src="'/wdpr-quickquote/partials/form-fields.html'" class="ng-scope">
<div class="fieldsContainer collapse ng-scope expand" ng-class="{expand: !qqVm.qqCollapsed, fiftyAnniversaryContainer: qqVm.brand == 'wdw'}"> <!-- ngIf: !qqVm.form.shopFor -->
<div id="titleContainer" ng-if="!qqVm.form.shopFor" ng-class="{fiftyAnniversaryTitle: qqVm.brand == 'wdw'}" class="ng-scope"> <span ng-bind-html="qqVm.form.title.label" class="ng-binding">Price Your Vacation</span> </div>
<!-- end ngIf: !qqVm.form.shopFor --> <!-- ngIf: qqVm.form.shopFor --> <!-- ngIf: qqVm.form.tickets && qqVm.shouldDisplay(qqVm.form.tickets) --> <!-- ngIf: qqVm.shouldDisplay(qqVm.form.checkInDate) -->
<div id="tripDatesContainer" ng-if="qqVm.shouldDisplay(qqVm.form.checkInDate)" ng-click="qqVm.qqCollapsed = false" class="ng-scope" role="button" tabindex="0">
<div class="container-fluid"> <wdpr-date-range-picker append-content-to="#qqCalendar" calendar-config="quickquote" model="qqVm.form.dateRangeConfig.options.model" name="dateRange" options="qqVm.form.dateRangeConfig.options"
ng-class="{fiftyAnniversaryDates: qqVm.brand == 'wdw'}" watch-width-broadcast="#qqCalendar .calendar-root" class="ng-isolate-scope">
<div class="form-group wdprDatePicker ng-pristine ng-valid ng-valid-date-max ng-valid-date-min ng-valid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength" ng-class="{'opened': dateRangePickerVm.opened}"
ng-form="dateRange" ng-mouseenter="dateRangePickerVm.setMouseEnter(true, 'component')" ng-mouseleave="dateRangePickerVm.setMouseEnter(false, 'component')"> <input aria-hidden="true"
class="form-control ng-pristine ng-untouched ng-valid ng-valid-date-max ng-valid-date-min ng-valid-required" id="checkInDate" name="checkInDate" date-max="" date-min="" ng-attr-max="{{dateRangePickerVm.start.max}}"
ng-attr-min="{{dateRangePickerVm.start.min}}" ng-disabled="dateRangePickerVm.options.calendarOptions.start.disabled" ng-model="dateRangePickerVm.model.start"
ng-required="dateRangePickerVm.options.calendarOptions.start.required" type="hidden" tabindex="0" aria-required="false" aria-invalid="false"> <input aria-hidden="true"
class="form-control ng-pristine ng-untouched ng-valid ng-valid-date-max ng-valid-date-min ng-valid-required" id="checkOutDate" name="checkOutDate" date-max="" date-min="" ng-attr-max="{{dateRangePickerVm.end.max}}"
ng-attr-min="{{dateRangePickerVm.end.min}}" ng-disabled="dateRangePickerVm.options.calendarOptions.end.disabled" ng-model="dateRangePickerVm.model.end" ng-required="dateRangePickerVm.options.calendarOptions.end.required"
type="hidden" tabindex="0" aria-required="false" aria-invalid="false">
<div class="input-group-relative row enabled" ng-class="{enabled: !dateRangePickerVm.options.disabled}">
<div class="date-input" ng-class="{'active' : dateRangePickerVm.options.calendarOptions.active === 'start'}"> <!-- ngIf: dateRangePickerVm.options.calendarOptions.start.label --><label aria-hidden="true"
for="checkInDate_display" ng-if="dateRangePickerVm.options.calendarOptions.start.label" class="ng-binding ng-scope">Dates </label><!-- end ngIf: dateRangePickerVm.options.calendarOptions.start.label -->
<div> <input aria-label="Check In MM/DD/YYYY Press shift + enter to navigate within the calendar."
class="form-control start guestSensitiveNot ng-valid ng-valid-pattern ng-valid-minlength ng-valid-maxlength ng-valid-required" id="checkInDate_display" maxlength="10" minlength="10" name="checkInDate_display"
ng-attr-placeholder="{{dateRangePickerVm.options.calendarOptions.start.placeholder}}" ng-class="{'active' : dateRangePickerVm.options.calendarOptions.active === 'start'}"
ng-disabled="dateRangePickerVm.options.disabled" ng-focus="dateRangePickerVm.popoverOpen($event, 'start');" ng-blur="dateRangePickerVm.formatDateOption($event, 'start')"
ng-keydown="dateRangePickerVm.onInputKeyDown($event)" ng-keypress="dateRangePickerVm.onInputKeyPress($event)" ng-maxlength="10" ng-minlength="10" ng-model="dateRangePickerVm.model.startText"
ng-model-options="{updateOn: 'blur'}" ng-pattern="/[0-9][0-9]\/[0-9][0-9]\/[0-9][0-9][0-9][0-9]/"
ng-readonly="dateRangePickerVm.options.calendarOptions.start.readOnly || dateRangePickerVm.isMobile || dateRangePickerVm.isMobileOS" ng-required="dateRangePickerVm.options.calendarOptions.start.required" tabindex="0"
type="text" placeholder="Check In" aria-required="false" aria-invalid="false"> </div>
</div>
<div class="spacer" ng-hide="dateRangePickerVm.isCheckInOnly" aria-hidden="false">–</div>
<div class="date-input" ng-class="{'active' : dateRangePickerVm.options.calendarOptions.active === 'end'}" ng-hide="dateRangePickerVm.isCheckInOnly" aria-hidden="false">
<!-- ngIf: dateRangePickerVm.options.calendarOptions.end.label -->
<div> <input aria-label="Check Out MM/DD/YYYY Press shift + enter to navigate within the calendar."
class="form-control end guestSensitiveNot ng-valid ng-valid-pattern ng-valid-minlength ng-valid-maxlength ng-valid-required" id="checkOutDate_display" maxlength="10" minlength="10" name="checkOutDate_display"
ng-attr-placeholder="{{dateRangePickerVm.options.calendarOptions.end.placeholder}}" ng-class="{'active' : dateRangePickerVm.options.calendarOptions.active === 'end'}" ng-disabled="dateRangePickerVm.options.disabled"
ng-focus="dateRangePickerVm.popoverOpen($event, 'end');" ng-blur="dateRangePickerVm.formatDateOption($event, 'end')" ng-keydown="dateRangePickerVm.onInputKeyDown($event)"
ng-keypress="dateRangePickerVm.onInputKeyPress($event)" ng-maxlength="10" ng-minlength="10" ng-model="dateRangePickerVm.model.endText" ng-model-options="{updateOn: 'blur'}"
ng-pattern="/[0-9][0-9]\/[0-9][0-9]\/[0-9][0-9][0-9][0-9]/" ng-readonly="dateRangePickerVm.options.calendarOptions.end.readOnly || dateRangePickerVm.isMobile || dateRangePickerVm.isMobileOS"
ng-required="dateRangePickerVm.options.calendarOptions.end.required" tabindex="0" type="text" placeholder="Check Out" aria-required="false" aria-invalid="false"> </div>
</div>
<div class="calendarButton"> <button class="btn btn-default selectable"
ng-class="{'selectable': (dateRangePickerVm.model.startText && dateRangePickerVm.model.endText) || (!dateRangePickerVm.model.startText && !dateRangePickerVm.model.endText)}" aria-hidden="true"
ng-click="dateRangePickerVm.prepareCalendar()" ng-disabled="dateRangePickerVm.options.disabled" tabindex="-1" type="button"> <wdpr-icon icon="" size="s" aria-hidden="true"
class="ng-isolate-scope"><!-- ngIf: iconVm.showFallbackIcon --> <!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep" ng-bind-html="iconVm.icon"
ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style=""></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon> </button>
</div>
</div>
</div>
</wdpr-date-range-picker> </div>
</div><!-- end ngIf: qqVm.shouldDisplay(qqVm.form.checkInDate) --> <!-- ngIf: qqVm.shouldDisplay(qqVm.form.checkInDate) -->
<div id="qqCalendar" class="calendarPickerContainer ng-scope" ng-if="qqVm.shouldDisplay(qqVm.form.checkInDate)" ng-class="{fiftyAnniversaryCalendar: qqVm.brand == 'wdw'}">
<div move-content="#qqCalendar">
<div class="calendarPickerPosition" ng-mouseenter="dateRangePickerVm.setMouseEnter(true, 'calendar')" ng-mouseleave="dateRangePickerVm.setMouseEnter(false, 'calendar')">
<div class="calendarPickerWrapper ng-hide" ng-show="dateRangePickerVm.opened" aria-hidden="true"> <wdpr-calendar-range-picker calendar-config="dateRangePickerVm.calendarConfig" data="dateRangePickerVm.calendarData"
max="dateRangePickerVm.maxCalendar" min="dateRangePickerVm.minCalendar" model="dateRangePickerVm.model" num-months="dateRangePickerVm.numMonths" options="dateRangePickerVm.options.calendarOptions"
watch-element="dateRangePickerVm.options.watchElement" class="ng-isolate-scope">
<div class="calendar-root " get-element-attributes="calendarVm.watchElement">
<div class="sticky-header-weekdays desktop-device" ng-class="{'desktop-device' : !calendarVm.isMobile}"> <!-- ngIf: !calendarVm.options.weekdayHide -->
<div class="weekday-row cell-row ng-scope" ng-if="!calendarVm.options.weekdayHide"> <button class="btnNextPrev prev-btn" ng-click="calendarVm.adjustMonthAndFocus(-1);" ng-disabled="!calendarVm.monthAvailablePrev"
tabindex="-1" aria-disabled="true" disabled="disabled"> <wdpr-icon icon="" class="ng-isolate-scope"><!-- ngIf: iconVm.showFallbackIcon --> <!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span
class="icon ng-binding ng-scope pep" ng-bind-html="iconVm.icon" ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style=""
aria-label="Icon"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon> </button> <!-- ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Sunday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">S</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Monday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">M</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Tuesday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">T</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Wednesday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">W</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Thursday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">T</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Friday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">F</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Saturday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">S</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<button class="btnNextPrev next-btn" ng-click="calendarVm.adjustMonthAndFocus(1);" ng-disabled="!calendarVm.monthAvailableNext" tabindex="-1" aria-disabled="false"> <wdpr-icon icon=""
class="ng-isolate-scope"><!-- ngIf: iconVm.showFallbackIcon --> <!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep" ng-bind-html="iconVm.icon"
ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style=""
aria-label="Icon"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon> </button>
</div><!-- end ngIf: !calendarVm.options.weekdayHide -->
</div>
<div class="btnNextPrevContainer prev"> <button class="btnNextPrev prev-btn focusable" ng-click="calendarVm.adjustMonthAndFocus(-1);" ng-disabled="!calendarVm.monthAvailablePrev"
ng-keydown="calendarVm.onKeyDownPrev($event);" role="application" aria-label="Previous months" tabindex="0" aria-disabled="true" disabled="disabled"> <wdpr-icon icon="" tabindex="-1"
class="ng-isolate-scope"><!-- ngIf: iconVm.showFallbackIcon --> <!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep" ng-bind-html="iconVm.icon"
ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style=""
aria-label="Icon"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon> </button> </div> <!-- ngRepeat: month in calendarVm.months track by $index -->
<div aria-label="September 2023 Press tab/shift + tab to navigate through months, or press shift + enter to select a day." class="month-calendar focusable ng-scope first" ng-class="{first: $first, last: $last}"
tabindex="-1" ng-repeat="month in calendarVm.months track by $index" hm-swipe="calendarVm.mobileGestures($event);" ng-keydown="calendarVm.onKeyDownMonth($event, $index)" ng-mousedown="calendarVm.onMousedownMonth($event)"
style="user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: pan-y;">
<div class="month-head">
<div class="calendar-title-row">
<div class=""> <span class="title-month ng-binding">September </span> <span class="title-year ng-binding">2023</span> </div>
</div> <!-- ngIf: !calendarVm.options.weekdayHide -->
<div class="in-table-weekdays cell-row ng-scope" ng-if="!calendarVm.options.weekdayHide"> <!-- ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Sunday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">S</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Monday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">M</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Tuesday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">T</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Wednesday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">W</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Thursday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">T</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Friday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">F</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Saturday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">S</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
</div><!-- end ngIf: !calendarVm.options.weekdayHide -->
</div>
<div class="month-body" role="application"> <!-- ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-0" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_1_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Friday September 1st, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 1 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_2_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Saturday September 2nd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 2 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-1" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_3_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Sunday September 3rd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 3 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_4_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Monday September 4th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 4 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_5_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Tuesday September 5th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 5 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_6_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Wednesday September 6th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 6 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_7_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Thursday September 7th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 7 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_8_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Friday September 8th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 8 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_9_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Saturday September 9th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 9 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-2" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_10_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Sunday September 10th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 10 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_11_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Monday September 11th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 11 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_12_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Tuesday September 12th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 12 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_13_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Wednesday September 13th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 13 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_14_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Thursday September 14th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 14 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_15_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Friday September 15th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 15 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_16_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Saturday September 16th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 16 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-3" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_17_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Sunday September 17th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 17 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_18_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Monday September 18th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 18 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_19_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Tuesday September 19th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 19 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_20_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Wednesday September 20th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 20 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_21_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Thursday September 21st, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 21 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_22_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Friday September 22nd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 22 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_23_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Saturday September 23rd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 23 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-4" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_24_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Sunday September 24th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 24 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_25_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Monday September 25th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 25 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_26_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Tuesday September 26th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 26 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_27_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="true" disabled="disabled">
<div> <span aria-label="Wednesday September 27th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 27 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_28_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Thursday September 28th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 28 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_29_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Friday September 29th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 29 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="9_30_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Saturday September 30th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 30 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
</div>
</div><!-- end ngRepeat: month in calendarVm.months track by $index -->
<div aria-label="October 2023 Press tab/shift + tab to navigate through months, or press shift + enter to select a day." class="month-calendar focusable ng-scope" ng-class="{first: $first, last: $last}" tabindex="-1"
ng-repeat="month in calendarVm.months track by $index" hm-swipe="calendarVm.mobileGestures($event);" ng-keydown="calendarVm.onKeyDownMonth($event, $index)" ng-mousedown="calendarVm.onMousedownMonth($event)"
style="user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: pan-y;">
<div class="month-head">
<div class="calendar-title-row">
<div class=""> <span class="title-month ng-binding">October </span> <span class="title-year ng-binding">2023</span> </div>
</div> <!-- ngIf: !calendarVm.options.weekdayHide -->
<div class="in-table-weekdays cell-row ng-scope" ng-if="!calendarVm.options.weekdayHide"> <!-- ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Sunday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">S</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Monday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">M</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Tuesday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">T</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Wednesday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">W</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Thursday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">T</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Friday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">F</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Saturday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">S</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
</div><!-- end ngIf: !calendarVm.options.weekdayHide -->
</div>
<div class="month-body" role="application"> <!-- ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-0" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_1_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Sunday October 1st, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 1 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_2_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Monday October 2nd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 2 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_3_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Tuesday October 3rd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 3 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_4_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Wednesday October 4th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 4 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_5_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Thursday October 5th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 5 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_6_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Friday October 6th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 6 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_7_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Saturday October 7th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 7 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-1" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_8_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Sunday October 8th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 8 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_9_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Monday October 9th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 9 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_10_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Tuesday October 10th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 10 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_11_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Wednesday October 11th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 11 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_12_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Thursday October 12th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 12 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_13_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Friday October 13th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 13 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_14_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Saturday October 14th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 14 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-2" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_15_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Sunday October 15th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 15 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_16_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Monday October 16th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 16 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_17_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Tuesday October 17th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 17 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_18_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Wednesday October 18th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 18 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_19_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Thursday October 19th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 19 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_20_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Friday October 20th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 20 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_21_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Saturday October 21st, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 21 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-3" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_22_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Sunday October 22nd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 22 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_23_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Monday October 23rd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 23 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_24_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Tuesday October 24th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 24 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_25_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Wednesday October 25th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 25 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_26_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Thursday October 26th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 26 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_27_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Friday October 27th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 27 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_28_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Saturday October 28th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 28 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-4" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_29_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Sunday October 29th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 29 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_30_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Monday October 30th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 30 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="10_31_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Tuesday October 31st, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 31 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
</div>
</div><!-- end ngRepeat: month in calendarVm.months track by $index -->
<div aria-label="November 2023 Press tab/shift + tab to navigate through months, or press shift + enter to select a day." class="month-calendar focusable ng-scope" ng-class="{first: $first, last: $last}" tabindex="-1"
ng-repeat="month in calendarVm.months track by $index" hm-swipe="calendarVm.mobileGestures($event);" ng-keydown="calendarVm.onKeyDownMonth($event, $index)" ng-mousedown="calendarVm.onMousedownMonth($event)"
style="user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: pan-y;">
<div class="month-head">
<div class="calendar-title-row">
<div class=""> <span class="title-month ng-binding">November </span> <span class="title-year ng-binding">2023</span> </div>
</div> <!-- ngIf: !calendarVm.options.weekdayHide -->
<div class="in-table-weekdays cell-row ng-scope" ng-if="!calendarVm.options.weekdayHide"> <!-- ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Sunday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">S</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Monday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">M</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Tuesday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">T</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Wednesday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">W</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Thursday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">T</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Friday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">F</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Saturday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">S</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
</div><!-- end ngIf: !calendarVm.options.weekdayHide -->
</div>
<div class="month-body" role="application"> <!-- ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-0" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_1_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Wednesday November 1st, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 1 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_2_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Thursday November 2nd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 2 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_3_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Friday November 3rd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 3 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_4_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Saturday November 4th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 4 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-1" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_5_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Sunday November 5th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 5 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_6_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Monday November 6th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 6 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_7_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Tuesday November 7th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 7 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_8_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Wednesday November 8th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 8 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_9_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Thursday November 9th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 9 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_10_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Friday November 10th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 10 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_11_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Saturday November 11th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 11 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-2" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_12_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Sunday November 12th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 12 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_13_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Monday November 13th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 13 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_14_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Tuesday November 14th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 14 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_15_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Wednesday November 15th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 15 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_16_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Thursday November 16th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 16 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_17_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Friday November 17th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 17 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_18_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Saturday November 18th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 18 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-3" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_19_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Sunday November 19th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 19 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_20_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Monday November 20th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 20 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_21_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Tuesday November 21st, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 21 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_22_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Wednesday November 22nd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 22 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_23_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Thursday November 23rd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 23 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_24_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Friday November 24th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 24 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_25_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Saturday November 25th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 25 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-4" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_26_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Sunday November 26th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 26 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_27_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Monday November 27th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 27 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_28_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Tuesday November 28th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 28 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_29_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Wednesday November 29th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 29 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="11_30_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Thursday November 30th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 30 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
</div>
</div><!-- end ngRepeat: month in calendarVm.months track by $index -->
<div aria-label="December 2023 Press tab/shift + tab to navigate through months, or press shift + enter to select a day." class="month-calendar focusable ng-scope last" ng-class="{first: $first, last: $last}" tabindex="-1"
ng-repeat="month in calendarVm.months track by $index" hm-swipe="calendarVm.mobileGestures($event);" ng-keydown="calendarVm.onKeyDownMonth($event, $index)" ng-mousedown="calendarVm.onMousedownMonth($event)"
style="user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: pan-y;">
<div class="month-head">
<div class="calendar-title-row">
<div class=""> <span class="title-month ng-binding">December </span> <span class="title-year ng-binding">2023</span> </div>
</div> <!-- ngIf: !calendarVm.options.weekdayHide -->
<div class="in-table-weekdays cell-row ng-scope" ng-if="!calendarVm.options.weekdayHide"> <!-- ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Sunday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">S</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Monday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">M</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Tuesday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">T</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Wednesday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">W</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Thursday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">T</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Friday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">F</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
<div class="weekday-cell cell ng-binding ng-scope" aria-label="Saturday" ng-repeat="weekday in calendarVm.daysOfWeek track by $index">S</div><!-- end ngRepeat: weekday in calendarVm.daysOfWeek track by $index -->
</div><!-- end ngIf: !calendarVm.options.weekdayHide -->
</div>
<div class="month-body" role="application"> <!-- ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-0" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_1_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Friday December 1st, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 1 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_2_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Saturday December 2nd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 2 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-1" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_3_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Sunday December 3rd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 3 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_4_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Monday December 4th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 4 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_5_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Tuesday December 5th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 5 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_6_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Wednesday December 6th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 6 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_7_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Thursday December 7th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 7 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_8_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Friday December 8th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 8 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_9_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Saturday December 9th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 9 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-2" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_10_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Sunday December 10th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 10 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_11_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Monday December 11th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 11 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_12_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Tuesday December 12th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 12 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_13_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Wednesday December 13th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 13 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_14_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Thursday December 14th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 14 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_15_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Friday December 15th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 15 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_16_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Saturday December 16th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 16 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-3" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_17_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Sunday December 17th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 17 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_18_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Monday December 18th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 18 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_19_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Tuesday December 19th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 19 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_20_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Wednesday December 20th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 20 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_21_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Thursday December 21st, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 21 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_22_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Friday December 22nd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 22 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_23_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Saturday December 23rd, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 23 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-4" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_24_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Sunday December 24th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 24 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-1 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_25_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Monday December 25th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 25 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-2 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_26_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Tuesday December 26th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 26 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-3 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_27_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Wednesday December 27th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 27 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-4 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_28_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Thursday December 28th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 28 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-5 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_29_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Friday December 29th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 29 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-6 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_30_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Saturday December 30th, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 30 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
<div class="date-row cell-row row-5" ng-repeat="rows in month.dateRows track by $index"> <!-- ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --><button class="date week-col-0 enabled" ng-class="{ active: cell.isActive, hover: calendarVm.isHovered(cell.modelValue),
value: cell.isValue, regular: cell.isRegular, peak: cell.isPeak,
enabled: !calendarVm.isDateDisabled(cell.date)}" ng-mouseenter="calendarVm.updateHoverDates(cell.modelValue)" ng-mouseleave="calendarVm.clearHoverDates()" ng-click="calendarVm.select(cell)"
ng-disabled="calendarVm.isDateDisabled(cell.date)" ng-if="cell.date" id="12_31_2023" tabindex="-1" ng-keydown="calendarVm.onKeyDownDay($event, {
month: $parent.$parent.$parent.$index,
row: $parent.$parent.$index,
col: $index,
firstRow: $parent.$parent.$first,
lastRow: $parent.$parent.$last,
firstCol: $first,
lastCol: $last,
cell: cell
})" aria-disabled="false">
<div> <span aria-label="Sunday December 31st, 2023 Press enter to select a date, or press arrow keys to navigate through days." class="ng-binding"> 31 </span> </div>
</button><!-- end ngIf: cell.date --> </div><!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
<div class="date-cell cell ng-scope outOfBounds" ng-class="{ outOfBounds: cell.outOfBounds }" ng-repeat="cell in rows track by $index"> <!-- ngIf: cell.date --> </div>
<!-- end ngRepeat: cell in rows track by $index -->
</div><!-- end ngRepeat: rows in month.dateRows track by $index -->
</div>
</div><!-- end ngRepeat: month in calendarVm.months track by $index -->
<div class="btnNextPrevContainer next"> <button class="btnNextPrev next-btn focusable" ng-click="calendarVm.adjustMonthAndFocus(1);" ng-disabled="!calendarVm.monthAvailableNext"
ng-keydown="calendarVm.onKeyDownNext($event);" role="application" aria-label="Next months" tabindex="0" aria-disabled="false"> <wdpr-icon icon="" tabindex="-1"
class="ng-isolate-scope"><!-- ngIf: iconVm.showFallbackIcon --> <!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep" ng-bind-html="iconVm.icon"
ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style=""
aria-label="Icon"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon> </button> </div> <!-- ngIf: calendarVm.options.ticketPricing.tiers -->
<!-- ngIf: calendarVm.options.ticketPricing.tiers -->
</div>
</wdpr-calendar-range-picker>
<div class="closeButtonBar"> <button class="btn btn-close btn-pill btn-secondary ng-scope" ng-click="dateRangePickerVm.popoverToggle($event)" translate="" type="button" tabindex="0">Close</button> </div>
</div>
</div>
</div>
</div><!-- end ngIf: qqVm.shouldDisplay(qqVm.form.checkInDate) --> <!-- ngIf: qqVm.shouldDisplay(qqVm.form.visitDate) --> <!-- ngIf: qqVm.form.departAirport --> <!-- ngIf: qqVm.form.returnAirport -->
<!-- ngIf: qqVm.form.travelClass --> <!-- ngIf: qqVm.form -->
<div id="partyMixContainer" ng-if="qqVm.form" ng-class="{
'has-ages': qqVm.form.partyMixConfig.room.nonAdultAges.length > 0 && !qqVm.childAgesForceHide,
'large': qqVm.form.partyMixConfig.room.nonAdultAges.length > 3,
'fiftyAnniversaryCounters': qqVm.brand == 'wdw'
}" class="ng-scope"> <!-- ngIf: qqVm.shouldDisplay(qqVm.form.partyMixConfig) --><wdpr-party-mix-select id="partyMixConfig" ng-if="qqVm.shouldDisplay(qqVm.form.partyMixConfig)"
ng-class="{'child-cnt-' + qqVm.form.partyMixConfig.room.nonAdultAges.length}" display="block below" control-prefix="qqForm_" hide-accessible-checkbox="true" room="qqVm.form.partyMixConfig.room"
disable-child-ages="qqVm.options.noChildAges" enable-seniors="qqVm.form.partyMixConfig.seniors" party-mix-select="qqVm.form.partyMixConfig"
class="ng-scope ng-isolate-scope"><!-- ngIf: partyMixSelectVm.partyMixSelect.type === 'select' --> <!-- ngIf: partyMixSelectVm.partyMixSelect.type === 'plus-minus' -->
<div class="party-mix-select plus-minus block below" ng-class="{
'has-ages': partyMixSelectVm.room.nonAdultAges.length > 0,
'has-error': !partyMixSelectVm.isMobOpt && (partyMixSelectVm.roomCapacityExceeded || partyMixSelectVm.room.infantPerAdultExceeded)
}" ng-if="partyMixSelectVm.partyMixSelect.type === 'plus-minus'">
<div class="party-selection party-selection-adult"> <label for="qqForm_adultCount" class="control-label party-selection-label ng-binding">Adults (18+)</label>
<div class="party-selection-option"> <wdpr-plus-minus id="qqForm_adultCount" name="qqForm_adultCount" dir-aria-label="Adult Count" value="partyMixSelectVm.room.adultCount" min="partyMixSelectVm.partyMixSelect.adults.min"
max="partyMixSelectVm.partyMixSelect.adults.max" class="ng-isolate-scope"><button class="button" role="button" aria-label="Adult Count Decrement with input value 2" ng-click="PlusMinusVm.minus()"
ng-disabled="PlusMinusVm.value <= PlusMinusVm.min || PlusMinusVm.ngDisabled" aria-disabled="" value="decrement" tabindex="0"> <span class="circle"> <wdpr-icon icon="" class="price-icon ng-isolate-scope"
theme="light"><!-- ngIf: iconVm.showFallbackIcon --> <!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep" ng-bind-html="iconVm.icon"
ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style=""
aria-label="Icon"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon> </span> </button> <input class="number ng-pristine ng-untouched ng-valid ng-valid-maxlength"
id="qqForm_adultCount" name="qqForm_adultCount" value="2" ng-blur="PlusMinusVm.directEdit()" ng-model="PlusMinusVm.value" maxlength="3" tabindex="-1" aria-readonly="true"
ng-readonly="PlusMinusVm.inputReadonly || PlusMinusVm.ngDisabled" ng-class="{ editable: !PlusMinusVm.inputReadonly, disabled: PlusMinusVm.ngDisabled }" readonly="readonly" aria-invalid="false"> <button class="button"
role="button" ng-click="PlusMinusVm.plus()" aria-label="Adult Count Increment with input value 2" ng-disabled="PlusMinusVm.value >= PlusMinusVm.max || PlusMinusVm.ngDisabled" aria-disabled="" aria-controls=""
aria-expanded="" aria-haspopup="" value="increment" tabindex="0"> <span class="circle"> <wdpr-icon icon="" class="price-icon ng-isolate-scope" theme="light"><!-- ngIf: iconVm.showFallbackIcon -->
<!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep" ng-bind-html="iconVm.icon" ng-class="[iconVm.fontTypeClass, rotateClass]"
ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style="" aria-label="Icon"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon> </span> </button>
<!-- ngIf: PlusMinusVm.invalidNumberMessage --></wdpr-plus-minus> </div>
</div>
<div class="party-selection party-selection-child"> <label for="qqForm_childCount" class="control-label party-selection-label ng-binding">Children</label>
<div class="party-selection-option"> <wdpr-plus-minus id="qqForm_childCount" name="qqForm_childCount" dir-aria-label="Child Count" has-pop-over="true" aria-control="childAge" value="partyMixSelectVm.room.childCount"
min="partyMixSelectVm.partyMixSelect.children.min" max="partyMixSelectVm.partyMixSelect.children.max" class="ng-isolate-scope"><button class="button" role="button" aria-label="Child Count Decrement with input value 0"
ng-click="PlusMinusVm.minus()" ng-disabled="PlusMinusVm.value <= PlusMinusVm.min || PlusMinusVm.ngDisabled" aria-disabled="true" value="decrement" tabindex="0" disabled="disabled"> <span class="circle"> <wdpr-icon
icon="" class="price-icon ng-isolate-scope" theme="light"><!-- ngIf: iconVm.showFallbackIcon --> <!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep"
ng-bind-html="iconVm.icon" ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style=""
aria-label="Icon"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon> </span> </button> <input class="number ng-pristine ng-untouched ng-valid ng-valid-maxlength"
id="qqForm_childCount" name="qqForm_childCount" value="0" ng-blur="PlusMinusVm.directEdit()" ng-model="PlusMinusVm.value" maxlength="3" tabindex="-1" aria-readonly="true"
ng-readonly="PlusMinusVm.inputReadonly || PlusMinusVm.ngDisabled" ng-class="{ editable: !PlusMinusVm.inputReadonly, disabled: PlusMinusVm.ngDisabled }" readonly="readonly" aria-invalid="false"> <button class="button"
role="button" ng-click="PlusMinusVm.plus()" aria-label="Child Count Increment with input value 0" ng-disabled="PlusMinusVm.value >= PlusMinusVm.max || PlusMinusVm.ngDisabled" aria-disabled="" aria-controls="childAge"
aria-expanded="false" aria-haspopup="false" value="increment" tabindex="0"> <span class="circle"> <wdpr-icon icon="" class="price-icon ng-isolate-scope" theme="light"><!-- ngIf: iconVm.showFallbackIcon -->
<!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep" ng-bind-html="iconVm.icon" ng-class="[iconVm.fontTypeClass, rotateClass]"
ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style="" aria-label="Icon"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon> </span> </button>
<!-- ngIf: PlusMinusVm.invalidNumberMessage --></wdpr-plus-minus> </div>
</div>
<div class="hide"> <input type="number" id="qqForm_partySize" name="qqForm_partySize" ng-init="partyMixSelectVm.partySize = partyMixSelectVm.room.adultCount + partyMixSelectVm.room.childCount + partyMixSelectVm.room.seniorCount"
ng-model="partyMixSelectVm.partySize" min="1" max="14" readonly="readonly" class="ng-pristine ng-untouched ng-valid ng-valid-min ng-valid-max" tabindex="0" aria-invalid="false">
<!-- ngRepeat: child in partyMixSelectVm.room.nonAdultAges track by $index --> </div> <!-- ngIf: partyMixSelectVm.showSubComponents() && !partyMixSelectVm.disableChildAges -->
<div class="party-selection accessible-room-container ng-hide" ng-hide="partyMixSelectVm.hideAccessibleCheckbox" aria-hidden="true"> <wdpr-checkbox dir-model="partyMixSelectVm.room._accessible" dir-id="accessibility-checkbox-1"
dir-aria-label="Room 1. Accessible Room." ng-disabled="partyMixSelectVm.isCast" required="" class="ng-isolate-scope">
<div class="form-group"> <button type="button" role="checkbox" name="" id="accessibility-checkbox-1" class="btn-checkbox needsclick ng-pristine ng-untouched ng-valid small"
ng-class="{'small': checkboxVm.sizeBox, 'disabled': ngDisabled, 'has-error': hasError}" btn-checkbox="" btn-checkbox-true="true" btn-checkbox-false="false" ng-model="ngModel" ng-disabled="ngDisabled" ng-checked="ngModel"
aria-checked="false" tabindex="" ng-attr-aria-label="{{ariaLabel}}" aria-label="Room 1. Accessible Room." aria-invalid="false"> <wdpr-icon ng-class="{'invisible': !ngModel}" icon="" theme="white"
class="ng-isolate-scope invisible"><!-- ngIf: iconVm.showFallbackIcon --> <!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep" ng-bind-html="iconVm.icon"
ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style=""
aria-label="Icon"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon> </button> <label class="btn-checkbox-label" ng-transclude=""
ng-class="{'disabled': ngDisabled, 'has-error': hasError}" for="accessibility-checkbox-1"> <span class="ng-binding ng-scope">Accessible Room</span> </label> </div>
</wdpr-checkbox> </div>
</div><!-- end ngIf: partyMixSelectVm.partyMixSelect.type === 'plus-minus' -->
</wdpr-party-mix-select><!-- end ngIf: qqVm.shouldDisplay(qqVm.form.partyMixConfig) --> <!-- ngIf: qqVm.shouldDisplay(qqVm.form.partyMixTickets) --> </div><!-- end ngIf: qqVm.form -->
<!-- ngIf: qqVm.shouldDisplay(qqVm.form.resort) -->
<div id="resortContainer" ng-if="qqVm.shouldDisplay(qqVm.form.resort)" for="selectDestination" class="ng-scope">
<div class="form-group standard has-value" ng-class="{'has-value': qqVm.form.resort.selected, 'fiftyAnniversaryResorts': qqVm.brand == 'wdw'}" show-validation-state=""> <label class="control-label ng-binding">Hotel</label>
<wdpr-uiplus-select-box id="selectDestination" model="qqVm.form.resort.selected" theme="standard" no-ellipsis="true" a11y-select="qqVm.form.resort.a11y.select" a11y-select-option="qqVm.form.resort.a11y.selectOption"
title="All Hotels" options="option.label for option in qqVm.form.resort.listClone track by option.value" class="standard">
<ol class="single-select-box nya-bs-select col-xs-12 ng-untouched ng-valid btn-group ng-dirty ng-valid-parse" ng-model="qqVm.form.resort.selected" size="5" data-title="" tabindex="-1"><button
class="btn btn-default dropdown-toggle" type="button" aria-expanded="false" aria-pressed="false" role="combobox" aria-invalid="false"><span class="pull-left filter-option">
<div class="option-wrapper no-ellipsis"><span class="option-text ng-binding" id="All Hotels" ng-class="{'dropdown-avatar-multiple-span': false}" "="" title=" All Hotels">All Hotels</span></div>
</span> <wdpr-icon class="pull-left ng-isolate-scope" icon="" size="sm"><!-- ngIf: iconVm.showFallbackIcon --> <!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep"
ng-bind-html="iconVm.icon" ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style=""
aria-label="Icon"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon></button>
<div class="dropdown-menu open">
<ul role="listbox" class="dropdown-menu inner"><!-- nyaBsOption: option in qqVm.form.resort.listClone track by option.value -->
<li nya-bs-option="option in qqVm.form.resort.listClone track by option.value" ng-class="::{ 'horizontal-separator': option._isSeparator, 'disabled': option._isDisabled, 'custom-separator': option._separatorClass}"
class="ng-scope nya-bs-option"><span
class="dropdown-header ng-binding"></span><!-- ngIf: ::!option._isSeparator --><a aria-label="All Hotels" role="option" aria-disabled="" class="option-link ng-scope" ng-if="::!option._isSeparator" tabindex="0"><div class="option-wrapper no-ellipsis"><span class="option-text ng-binding" id="All Hotels" ng-class="{'dropdown-avatar-multiple-span': false}" "="" title="All Hotels">All Hotels</span></div></a><!-- end ngIf: ::!option._isSeparator -->
</li><!-- end nyaBsOption: option in qqVm.form.resort.listClone track by option.value -->
<li nya-bs-option="option in qqVm.form.resort.listClone track by option.value" ng-class="::{ 'horizontal-separator': option._isSeparator, 'disabled': option._isDisabled, 'custom-separator': option._separatorClass}"
class="ng-scope nya-bs-option"><span
class="dropdown-header ng-binding"></span><!-- ngIf: ::!option._isSeparator --><a aria-label="Disney's Grand Californian Hotel & Spa" role="option" aria-disabled="" class="option-link ng-scope" ng-if="::!option._isSeparator" tabindex="0"><div class="option-wrapper no-ellipsis"><span class="option-text ng-binding" id="Disney's Grand Californian Hotel & Spa" ng-class="{'dropdown-avatar-multiple-span': false}" "="" title="Disney's Grand Californian Hotel & Spa">Disney's Grand Californian Hotel & Spa</span></div></a><!-- end ngIf: ::!option._isSeparator -->
</li><!-- end nyaBsOption: option in qqVm.form.resort.listClone track by option.value -->
<li nya-bs-option="option in qqVm.form.resort.listClone track by option.value" ng-class="::{ 'horizontal-separator': option._isSeparator, 'disabled': option._isDisabled, 'custom-separator': option._separatorClass}"
class="ng-scope nya-bs-option"><span
class="dropdown-header ng-binding"></span><!-- ngIf: ::!option._isSeparator --><a aria-label="Disneyland Hotel" role="option" aria-disabled="" class="option-link ng-scope" ng-if="::!option._isSeparator" tabindex="0"><div class="option-wrapper no-ellipsis"><span class="option-text ng-binding" id="Disneyland Hotel" ng-class="{'dropdown-avatar-multiple-span': false}" "="" title="Disneyland Hotel">Disneyland Hotel</span></div></a><!-- end ngIf: ::!option._isSeparator -->
</li><!-- end nyaBsOption: option in qqVm.form.resort.listClone track by option.value -->
<li nya-bs-option="option in qqVm.form.resort.listClone track by option.value" ng-class="::{ 'horizontal-separator': option._isSeparator, 'disabled': option._isDisabled, 'custom-separator': option._separatorClass}"
class="ng-scope nya-bs-option"><span
class="dropdown-header ng-binding"></span><!-- ngIf: ::!option._isSeparator --><a aria-label="Disney's Paradise Pier Hotel" role="option" aria-disabled="" class="option-link ng-scope" ng-if="::!option._isSeparator" tabindex="0"><div class="option-wrapper no-ellipsis"><span class="option-text ng-binding" id="Disney's Paradise Pier Hotel" ng-class="{'dropdown-avatar-multiple-span': false}" "="" title="Disney's Paradise Pier Hotel">Disney's Paradise Pier Hotel</span></div></a><!-- end ngIf: ::!option._isSeparator -->
</li><!-- end nyaBsOption: option in qqVm.form.resort.listClone track by option.value -->
</ul>
</div>
</ol>
</wdpr-uiplus-select-box> </div>
</div><!-- end ngIf: qqVm.shouldDisplay(qqVm.form.resort) --> <!-- ngIf: qqVm.config.options.multiRooms == 1 && qqVm.form.shopFor && qqVm.form.shopFor.selected.value == 1 --> <!-- ngIf: qqVm.form.accessible -->
<div id="accessibleContainer" ng-if="qqVm.form.accessible" ng-class="{fiftyAnniversaryA11yRooms: qqVm.brand == 'wdw'}" class="ng-scope"> <!-- ngIf: qqVm.shouldDisplay(qqVm.form.partyMixConfig) --><wdpr-checkbox
ng-if="qqVm.shouldDisplay(qqVm.form.partyMixConfig)" dir-id="accessibleRooms" dir-name="qqForm_accessibleRooms" dir-model="qqVm.form.accessible.value" dir-tabindex="0" class="ng-scope ng-isolate-scope">
<div class="form-group"> <button type="button" role="checkbox" name="qqForm_accessibleRooms" id="accessibleRooms" class="btn-checkbox needsclick ng-pristine ng-untouched ng-valid small"
ng-class="{'small': checkboxVm.sizeBox, 'disabled': ngDisabled, 'has-error': hasError}" btn-checkbox="" btn-checkbox-true="true" btn-checkbox-false="false" ng-model="ngModel" ng-disabled="ngDisabled" ng-checked="ngModel"
aria-checked="false" tabindex="0" ng-attr-aria-label="{{ariaLabel}}" aria-invalid="false"> <wdpr-icon ng-class="{'invisible': !ngModel}" icon="" theme="white"
class="ng-isolate-scope invisible"><!-- ngIf: iconVm.showFallbackIcon --> <!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep" ng-bind-html="iconVm.icon"
ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style="" aria-label="Icon"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon>
</button> <label class="btn-checkbox-label" ng-transclude="" ng-class="{'disabled': ngDisabled, 'has-error': hasError}" for="accessibleRooms"><span class="ng-binding ng-scope">Accessible Rooms </span></label> </div>
</wdpr-checkbox><!-- end ngIf: qqVm.shouldDisplay(qqVm.form.partyMixConfig) --> </div><!-- end ngIf: qqVm.form.accessible --> <!-- ngIf: qqVm.form.accessibleInfo -->
<div id="flexFiller"> </div> <!-- Old check broken: ng-disabled="{{qqVm.qqFormSubmitted}} && {{qqVm.qqFormInvalid}}" --> <!-- ngIf: qqVm.form.findRoomButton -->
<div id="findPricesContainer" ng-if="qqVm.form.findRoomButton" ng-class="{fiftyAnniversaryPillButton: qqVm.brand == 'wdw'}" class="ng-scope"> <!-- ngIf: !qqVm.externalPost --><button wdpr-pillbutton-v2="" type="submit"
ng-if="!qqVm.externalPost" theme="action" id="findPricesButton" name="findPricesButton" ng-click="qqVm.SubmitForm()" ng-disabled="qqVm.qqFormInvalid" data-link-id="DLR_FindARoom_button"
ng-class="{fiftyAnniversaryButton: qqVm.brand == 'wdw'}" wdpr-analytics-track-link="{"interactionName":"QQ_FindPrices"}" ng-bind-html="qqVm.form.findRoomButton.label"
class="ng-binding ng-scope ng-isolate-scope" tabindex="0" aria-disabled="false">Find Hotels</button><!-- end ngIf: !qqVm.externalPost --> <!-- ngIf: qqVm.externalPost --> </div><!-- end ngIf: qqVm.form.findRoomButton -->
<div id="toggleCollapseContainer" ng-class="{fiftyAnniversaryToggleCollapse: qqVm.brand == 'wdw'}">
<a id="toggleCollapse" icon="" size="xl" rotate="qqVm.qqCollapsed ? 90 : 270" ng-click="qqVm.qqCollapsed = !qqVm.qqCollapsed" wdpr-link-with-icon="" tabindex="0"><wdpr-icon icon="" size="xl" rotate="qqVm.qqCollapsed ? 90 : 270" class="ng-scope ng-isolate-scope"><!-- ngIf: iconVm.showFallbackIcon --> <!-- ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --><span class="icon ng-binding ng-scope pep" ng-bind-html="iconVm.icon" ng-class="[iconVm.fontTypeClass, rotateClass]" ng-if="iconVm.showIcon && !iconVm.showFallbackIcon" ng-style="" aria-label="Icon"></span><!-- end ngIf: iconVm.showIcon && !iconVm.showFallbackIcon --></wdpr-icon><div class="message" ng-transclude=""><span class="ng-binding ng-scope">Close</span></div></a>
</div>
</div>
</ng-include> <!-- <ng-include src="'/wdpr-quickquote/partials/form-errors.html'"></ng-include> --> <!-- ngInclude: undefined --><ng-include src="'/wdpr-quickquote/partials/form-field-errors.html'" class="ng-scope"><!--
form field errors <hr />
seems fine without this if, but holding for a while ng-if="qqVm.qqFormSubmitted && qqVm.qqFormInvalid"
-->
<div id="formFieldErrors" class="ng-scope"> <!-- ngRepeat: (fieldName, field) in qqVm.form.errorMessages -->
<div class="form-field-error ng-scope ng-inactive" ng-repeat="(fieldName, field) in qqVm.form.errorMessages" ng-messages="qqVm.qqForm[fieldName].$error" aria-live="assertive">
<!-- ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo --><!-- ngIf: qqVm.qqForm[fieldName].$error[errorType] --><!-- end ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo --><!-- ngIf: qqVm.qqForm[fieldName].$error[errorType] --><!-- end ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo --><!-- ngIf: qqVm.qqForm[fieldName].$error[errorType] --><!-- end ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo -->
</div><!-- end ngRepeat: (fieldName, field) in qqVm.form.errorMessages -->
<div class="form-field-error ng-scope ng-inactive" ng-repeat="(fieldName, field) in qqVm.form.errorMessages" ng-messages="qqVm.qqForm[fieldName].$error" aria-live="assertive">
<!-- ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo --><!-- ngIf: qqVm.qqForm[fieldName].$error[errorType] --><!-- end ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo -->
</div><!-- end ngRepeat: (fieldName, field) in qqVm.form.errorMessages -->
<div class="form-field-error ng-scope ng-inactive" ng-repeat="(fieldName, field) in qqVm.form.errorMessages" ng-messages="qqVm.qqForm[fieldName].$error" aria-live="assertive">
<!-- ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo --><!-- ngIf: qqVm.qqForm[fieldName].$error[errorType] --><!-- end ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo --><!-- ngIf: qqVm.qqForm[fieldName].$error[errorType] --><!-- end ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo -->
</div><!-- end ngRepeat: (fieldName, field) in qqVm.form.errorMessages -->
<div class="form-field-error ng-scope ng-inactive" ng-repeat="(fieldName, field) in qqVm.form.errorMessages" ng-messages="qqVm.qqForm[fieldName].$error" aria-live="assertive">
<!-- ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo --><!-- ngIf: qqVm.qqForm[fieldName].$error[errorType] --><!-- end ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo -->
</div><!-- end ngRepeat: (fieldName, field) in qqVm.form.errorMessages -->
<div class="form-field-error ng-scope ng-inactive" ng-repeat="(fieldName, field) in qqVm.form.errorMessages" ng-messages="qqVm.qqForm[fieldName].$error" aria-live="assertive">
<!-- ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo --><!-- ngIf: qqVm.qqForm[fieldName].$error[errorType] --><!-- end ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo -->
</div><!-- end ngRepeat: (fieldName, field) in qqVm.form.errorMessages -->
<div class="form-field-error ng-scope ng-inactive" ng-repeat="(fieldName, field) in qqVm.form.errorMessages" ng-messages="qqVm.qqForm[fieldName].$error" aria-live="assertive">
<!-- ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo --><!-- ngIf: qqVm.qqForm[fieldName].$error[errorType] --><!-- end ngRepeat: (errorType, errorMessage) in qqVm.form.errorMessages[fieldName].errors | limitTo: field.limitTo -->
</div><!-- end ngRepeat: (fieldName, field) in qqVm.form.errorMessages -->
</div>
</ng-include> <!-- ngInclude: undefined --><ng-include src="'/wdpr-quickquote/partials/child-age-field-errors.html'" class="ng-scope"><!--
field level errors
partyMixAgesState: {{qqVm.partyMixAgesState}} |
qqFormSubmitted: {{qqVm.qqFormSubmitted}} |
validAges: {{qqVm.validAges}}
--> <!-- ngIf: qqVm.partyMixAgesState == 'partyMixAgesShown' && qqVm.qqFormSubmitted && !qqVm.validAges --> </ng-include> <!-- ngIf: qqVm.debug --> </div>
</div>
</div>
</div>
</ng-include> </form>Name: shadowForm — POST
<form class="shadowForm ng-pristine ng-valid ng-scope hide" ng-class="{hide: !qqVm.debug}" name="shadowForm" method="POST" novalidate=""> <!-- ngIf: qqVm.config._info.csrfToken --><input ng-if="qqVm.config._info.csrfToken" type="hidden"
name="pep_csrf" ng-value="qqVm.config._info.csrfToken" class="ng-scope"
value="kD9lnVJxJMXF_bdWDDMc43BA9bFSjAgRw-pgkHbaf0LYtBGAvxy3z8wR87RUHtzSP6pf2aT5GDqEP607wtgq-ix-mwH9bxrWhjUrS6zUoCMLVU2DuBSGTCj3iMAzEHur"><!-- end ngIf: qqVm.config._info.csrfToken --> <input type="hidden" name="pageLocation" value="/hotels/">
<input type="hidden" name="offer" value=""> <!-- ngIf: !qqVm.config._info.csrfToken --> <!-- Developer Fields -->
<section> <!-- ngIf: qqVm.xDebug --> <!-- ngIf: qqVm.xDebug --> </section> <!-- Date Range Fields --> <!-- ngIf: qqVm.shouldDisplay(qqVm.form.checkInDate) -->
<section ng-if="qqVm.shouldDisplay(qqVm.form.checkInDate)" class="ng-scope"> <wdpr-form-group label-text="checkInDate" class="pull-left ng-isolate-scope">
<div for="" class="form-group" ng-class="{'disabled' : formGroupVm.disabled}" show-validation-state=""> <!-- ngIf: formGroupVm.labelText --><label ng-if="formGroupVm.labelText" for="" id="_label" ng-show="formGroupVm.labelText"
class="control-label ng-binding ng-scope" aria-hidden="false">checkInDate </label><!-- end ngIf: formGroupVm.labelText -->
<div ng-transclude=""> <input type="text" name="checkInDate" placeholder="checkInDate" ng-value="qqVm.qqForm.dateRange.checkInDate.$viewValue" class="ng-scope form-control"> </div> <!-- ngIf: formGroupVm.helpBlock --> <validation-message
for="" class="ng-isolate-scope"><ng-messages for="getErrors()" ng-show="showErrors" ng-messages-include="../validation-message/validation-message-defaults.html" ng-transclude="" aria-hidden="true"
class="ng-hide ng-inactive"><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --></ng-messages></validation-message>
</div>
</wdpr-form-group> <wdpr-form-group label-text="checkOutDate" class="pull-left ng-isolate-scope">
<div for="" class="form-group" ng-class="{'disabled' : formGroupVm.disabled}" show-validation-state=""> <!-- ngIf: formGroupVm.labelText --><label ng-if="formGroupVm.labelText" for="" id="_label" ng-show="formGroupVm.labelText"
class="control-label ng-binding ng-scope" aria-hidden="false">checkOutDate </label><!-- end ngIf: formGroupVm.labelText -->
<div ng-transclude=""> <input type="text" name="checkOutDate" placeholder="checkOutDate" ng-value="qqVm.qqForm.dateRange.checkOutDate.$viewValue" class="ng-scope form-control"> </div> <!-- ngIf: formGroupVm.helpBlock --> <validation-message
for="" class="ng-isolate-scope"><ng-messages for="getErrors()" ng-show="showErrors" ng-messages-include="../validation-message/validation-message-defaults.html" ng-transclude="" aria-hidden="true"
class="ng-hide ng-inactive"><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --></ng-messages></validation-message>
</div>
</wdpr-form-group> <!-- ngIf: qqVm.qqForm.qqForm_generalAdmission.$viewValue.value --> </section><!-- end ngIf: qqVm.shouldDisplay(qqVm.form.checkInDate) --> <!-- ngIf: qqVm.shouldDisplay(qqVm.form.Duration) -->
<hr class="clear hide" ng-class="{hide: !qqVm.debug}"> <!-- ngIf: qqVm.form.shopFor --> <!-- Travel Party Fields --> <!-- ngIf: qqVm.shouldDisplay(qqVm.form.partyMixConfig) -->
<section ng-if="qqVm.shouldDisplay(qqVm.form.partyMixConfig)" class="ng-scope"> <wdpr-form-group label-text="numberOfAdults" class="pull-left ng-isolate-scope">
<div for="" class="form-group" ng-class="{'disabled' : formGroupVm.disabled}" show-validation-state=""> <!-- ngIf: formGroupVm.labelText --><label ng-if="formGroupVm.labelText" for="" id="_label" ng-show="formGroupVm.labelText"
class="control-label ng-binding ng-scope" aria-hidden="false">numberOfAdults </label><!-- end ngIf: formGroupVm.labelText -->
<div ng-transclude=""> <input type="number" name="numberOfAdults" placeholder="numberOfAdults" ng-value="qqVm.qqForm.qqForm_adultCount.$viewValue" class="ng-scope form-control" value="2"> </div> <!-- ngIf: formGroupVm.helpBlock -->
<validation-message for="" class="ng-isolate-scope"><ng-messages for="getErrors()" ng-show="showErrors" ng-messages-include="../validation-message/validation-message-defaults.html" ng-transclude="" aria-hidden="true"
class="ng-hide ng-inactive"><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --></ng-messages></validation-message>
</div>
</wdpr-form-group> <wdpr-form-group label-text="numberOfChildren" class="pull-left ng-isolate-scope">
<div for="" class="form-group" ng-class="{'disabled' : formGroupVm.disabled}" show-validation-state=""> <!-- ngIf: formGroupVm.labelText --><label ng-if="formGroupVm.labelText" for="" id="_label" ng-show="formGroupVm.labelText"
class="control-label ng-binding ng-scope" aria-hidden="false">numberOfChildren </label><!-- end ngIf: formGroupVm.labelText -->
<div ng-transclude=""> <input type="number" name="numberOfChildren" placeholder="numberOfChildren" ng-value="qqVm.qqForm.qqForm_childCount.$viewValue" class="ng-scope form-control" value="0"> </div> <!-- ngIf: formGroupVm.helpBlock -->
<validation-message for="" class="ng-isolate-scope"><ng-messages for="getErrors()" ng-show="showErrors" ng-messages-include="../validation-message/validation-message-defaults.html" ng-transclude="" aria-hidden="true"
class="ng-hide ng-inactive"><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --><!-- ngMessage: undefined --></ng-messages></validation-message>
</div>
</wdpr-form-group> <!-- ngRepeat: child in qqVm.form.partyMixConfig.room.nonAdultAges track by $index --> <!-- ngIf: qqVm.qqForm.qqForm_seniors.$viewValue.value --> </section><!-- end ngIf: qqVm.shouldDisplay(qqVm.form.partyMixConfig) -->
<hr class="clear hide" ng-class="{hide: !qqVm.debug}"> <!-- Optional Airport Fields --> <!-- ngIf: qqVm.shouldDisplay(qqVm.form.departAirport) -->
<hr class="clear hide" ng-class="{hide: !qqVm.debug}"> <!-- Optional Resort Field --> <!-- ngIf: qqVm.form.resort.selected.value --> <!-- Optional Accessible Room Field --> <!-- name="accessible" --> <!-- ngIf: qqVm.form.accessible.value -->
<hr class="clear hide" ng-class="{hide: !qqVm.debug}"> <!-- Hidden Fields -->
<section> <!-- ngIf: qqVm.form.planType.value && qqVm.shouldDisplay(qqVm.form.planType) --> <!-- ngIf: qqVm.form.Sorting.value && qqVm.shouldDisplay(qqVm.form.Sorting) --> </section> <!-- ngIf: qqVm.form.departAirport.selected.cssClass -->
</form>Text Content
Visit Disney.com
Skip Navigation
Sign In or Create Account
United States (English)
Help
Search
Navigation Links
Parks & Tickets
THEME PARKS
* Disneyland Park
* • Star Wars: Galaxy's Edge
* Disney California Adventure Park
* • Avengers Campus
TICKETS & PASSES
* Theme Park Tickets
* Ticket and Reservation Details
* Magic Key Passes
* Special Event Tickets
* Theme Park Parking
TICKET OPTIONS
* Disney Genie+ Service
PHOTOGRAPHY
* Disney PhotoPass
* Maps & Directions
* Park Hours for
Thursday, September 28, 2023
More Hours
* Disneyland Park Hours
8:00 AM to 12:00 AM
* Disney California Adventure Park Hours
8:00 AM to 6:00 PM
* Entertainment Schedule
Places to Stay
* Disney's Grand Californian Hotel & Spa
Craftsman-style elegance with the all-new Tenaya Stone Spa
* Disneyland Hotel
Modern classic with luxurious rooms and monorail waterslides
* Disney's Paradise Pier Hotel
Seaside-themed retreat with scenic rooftop pool
* Good Neighbor Hotels
Disney-approved quality hotels close to the Disneyland Resort
RESERVATIONS
* My Hotel Reservations
* Disneyland Resort Hotel Packages
* Good Neighbor Hotel Packages
* Maps & Directions
* Why Stay at a Hotel of the Disneyland Resort?
* The Villas at the Disneyland Hotel NEW
* Tenaya Stone Spa
* Napa Rose
* Disney Princess Breakfast Adventures
* View Offers and Discounts
Things to Do
DINING
* Make Reservations
* My Dining Reservations
* Character Dining
* All Dining
ACTIVITIES
* Disney Genie Service
* MagicBand+ Experiences
* Attractions and Entertainment
* Character Experiences
* Crown Collection
* Events and Tours
* Recreation
* Spa
* What's New
* Disney PhotoPass
SHOPPING
* shopDisney
* Merchandise Mobile Checkout
* All Stores
DESTINATIONS
* Downtown Disney District
* Southern California
* Maps & Directions
* Ticket and Reservation Details
* "Magic Happens" Parade
* San Fransokyo Square – Now Open!
* Tiana’s Palace
* Pluto's Pumpkin Pursuit
* Downtown Disney District
* View Events
Magic Key
* Magic Key Pass Information
* Magic Key Discounts
* Link Magic Key Pass to My Profile
* Magic Key Calendar
Shop
MERCHANDISE
* New Arrivals
* Authentic Custom T-Shirts
* All Parks Products
* Disneyland Resort Shopping Reservation
* Disney Gift Card
LOCATIONS
* All Disneyland Shops
* Downtown Disney Shops
* Gear Up for Your Visit
*
* Browse ear hats, customized T-shirts and more Disney Parks merchandise.
* shopDisney
Cart
YOUR CART
Your Cart is empty.
* Find a Hotel
* Add Tickets
Total$0.00USD
My Disneyland
* My Hotel Reservations
* My Plans
Hotel, Dining and Activities
* My Photos
* Ticket and Reservation Details
* Link Tickets
* Sign In or Create Account
tickets quick quote
TICKETS AND PARK HOURS
Purchase Tickets
* Today's Park Hours
* Today's Park Hours
*
PARK HOURS FOR
Thursday, September 28, 2023
Disneyland Park
8:00 AM to 12:00 AM
Disney California Adventure Park
8:00 AM to 6:00 PM
Price Your Vacation
PRICE YOUR VACATION
Price Your Vacation
Dates
–
S
M
T
W
T
F
S
September 2023
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
October 2023
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
November 2023
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
December 2023
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Close
Adults (18+)
Children
Accessible Room
Hotel
All Hotels
* All Hotels
* Disney's Grand Californian Hotel & Spa
* Disneyland Hotel
* Disney's Paradise Pier Hotel
Accessible Rooms
Find Hotels
Close
FOR OFFICE USE ONLY - DLR EN_US
--------------------------------------------------------------------------------
checkInDate
checkOutDate
--------------------------------------------------------------------------------
numberOfAdults
numberOfChildren
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Loading
*
ReplayBuy
Closed captioning is not available for this video.
Loading
Previous
Next
Photo 1 of 1
Play Video
0:05 / 0:07
Mute
Closed Captioning
Descriptive transcript is not available for this video.
Full ScreenSHARE
Beginning of Dialog Content
SHARE
PINTERESTTWITTERFACEBOOKEMAILEnd of Dialog Content
undefined
undefined currently selected.
1. undefined
undefined
undefined currently selected.
1. undefined
Show All
Previous
Next
Play Slideshow
* Photos
* Videos
* 360° Views
* Interactive
* Floor Plans
HALLOWEEN TIME AT THE DISNEYLAND RESORT
HALLOWEEN TIME AT THE DISNEYLAND RESORT
Play Video Learn More
Learn More
TIME TO CELEBRATE
100 YEARS OF DISNEY
THE CELEBRATION OF A LIFETIME IS WAITING FOR YOU!
Learn More
:
:
| OFFICIAL TIMEKEEPER
Return to a land of magic. Your guide to important information and updated
experiences. Here's what to know before you go.
RESERVATIONS AND PLANNING GUIDE
TICKET & RESERVATIONS
Each member in your party is required to have both a valid ticket and park
reservation for the same park on the same date.
Ticket & Reservation Details
Theme Park Details
KNOW BEFORE YOU GO
View a comprehensive guide to important information and updated experiences at
the Disneyland Resort.
Learn More
Disney® Premier Visa® Card
New Disney® Premier Visa® Cardmembers can earn a
New Cardmembers can earn a
$300
statement credit
+
0
%
PROMO
APR
on select Disney vacations
Restrictions apply. Member FDIC
Learn More
OFFERS AND BENEFITS
CREATE COUNTLESS MAGICAL MEMORIES!
Experience the magic of 2 parks with Park Hopper or multi-day tickets.
Get Tickets
ENJOY SPECIAL BENEFITS WHEN YOU STAY AT A DISNEYLAND RESORT HOTEL!
Gain early theme park entry and receive magical perks—available to our hotel
Guests only.
Get Details
CAN'T MISS EXPERIENCES
Halloween time is Back!
at the Disneyland Resort
Plaza de la Familia
at Disney California Adventure Park
Haunted Mansion Holiday
at Disneyland Park
NEW! World of Color – ONE
at Disney California Adventure Park
SHOP, PLAN AND PLAY
Take Your Day to the Next Level!
Experience the Magic with MagicBand+
Discover Disney at Home with Books, Crafts, Movies and More...
Have Questions?
Connect with a planDisney panelist
Show More Links
Footer Links
Parks & Tickets
* Disneyland Park
* Disney California Adventure Park
* Park Hours
* Entertainment Schedule
* Maps
* Disney PhotoPass
* Driving Directions
* Theme Park Tickets
* Ticket and Reservation Details
* Magic Key Passes
* Special Event Tickets
* Theme Park Parking
Magic Key
* Magic Key Pass Information
* Purchase Magic Key Passes
* Magic Key Discounts
* Link Magic Key Pass to My Profile
* Magic Key Access Calendar
Places to Stay
* Disney's Grand Californian Hotel & Spa
* Disneyland Hotel
* Disney's Paradise Pier Hotel
* Good Neighbor Hotels
* Offers and Discounts
Rooms Reservations
* My Hotel Reservations
* Vacation Packages
Destinations
* Downtown Disney District
* Southern California
Things to Do
* Make Dining Reservations
* My Dining Reservations
* Character Dining
* All Dining
* Attractions and Entertainment
* Character Experiences
* Events and Tours
* Recreation
* MagicBand+ Experiences
* Play Disney Parks Mobile App
* Shops
* Buy Merchandise
* Buy Disney Gift Cards
* Spa
* What's New
* Celebrations & Special Occasions
Help
* Help Center
* Pre-Arrival Tips
* Mobile App
* Guest Safety
* Guest Services
* Property Rules
* Getting to the Disneyland Resort
* Guests with Disabilities
* Frequently Asked Questions
* planDisney
* Website Help
* Terms and Conditions
Contact Us
* Phone Directory
* Email
* Stay Connected
Facebook
Twitter
Instagram
TikTok
* Disney Parks
YouTube Channel
Blog
* Create Disney Account
Register to receive the latest Disney Parks news and special offers!Create
Account
* Related Disney Sites
* * Disney Parks
* Disney Cruise Line
* Disney Vacation Club
* * Adventures by Disney
* Disney Gift Card
* planDisney
* * Disney Meetings & Events
* Disney's Fairy Tale Weddings & Honeymoons
* Disney Imagination Campus
* * Disney Floral & Gifts
* Disney® Premier Visa® Card
* Disney Careers
* Help & Guest Services
* Site Map
* Terms of Use
* Legal Notices
* Privacy Policy
* Do Not Sell or Share My Personal Information
* Children's Online Privacy Policy
* Your US State Privacy Rights
* Interest-Based Ads
© Disney, All Rights Reserved
Application Override Active - Acting As production | Service Override Active -
Acting As undefined