.calendar-wrapper.bg-white
.header.px-6.pt-5.pb-18px.flex.items-center.justify-between
.text-smm.font-semibold {{ internalMonth }}
.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-7.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") }}