.w-full
.header.pl-3.pr-6.pt-14px.pb-10px.flex.items-center.justify-between
q-btn(
size="14px"
color="dark"
flat,
:label="internalMonth"
no-caps,
padding="10px 12px"
@click="nextForm"
)
.arrows.flex.items-center.justify-center.gap-x-6
q-btn(
flat,
size="10px",
dense,
icon="arrow_back_ios_new",
text-color="black",
round,
@click="previousMonth"
)
q-btn(
flat,
icon="arrow_forward_ios",
size="10px",
text-color="black",
dense,
round,
@click="nextMonth"
)
.week.py-4.px-5.grid.grid-rows-1.grid-cols-7
.flex.items-center.justify-center.week-item.text-xsx.py-1(v-for="day of week", :key="day") {{ day }}
.body.pb-3.px-5
.flex.items-center.justify-center.cursor-pointer.w-full.h-full(
v-for="date of internalDatesList",
@click="selectDate(date)",
:key="date",
:style="calculateRangeStyle(date)",
)
.flex.items-center.justify-center.rounded-full.w-full.h-full(
:class="calculateCellClasses(date)",
) {{ date.format("D") }}