transition-group.vuecal__cell(
:class="cellClasses"
:name="`slide-fade--${transitionDirection}`"
tag="div"
:appear="options.transitions"
:style="cellStyles")
.vuecal__flex.vuecal__cell-content(
v-for="(split, i) in (splitsCount ? splits : 1)"
:key="options.transitions ? `${view.id}-${data.content}-${i}` : i"
:class="splitsCount && splitClasses(split)"
:data-split="splitsCount ? split.id : false"
column
tabindex="0"
:aria-label="data.content"
@focus="onCellFocus($event)"
@keypress.enter="onCellkeyPressEnter($event)"
@touchstart="!isDisabled && onCellTouchStart($event, splitsCount ? split.id : null)"
@mousedown="!isDisabled && onCellMouseDown($event, splitsCount ? split.id : null)"
@click="!isDisabled && onCellClick($event, split)"
@dblclick="!isDisabled && onCellDblClick($event)"
@contextmenu="!isDisabled && options.cellContextmenu && onCellContextMenu($event)"
@dragenter="!isDisabled && editEvents.drag && dnd && dnd.cellDragEnter($event, $data, data.startDate)"
@dragover="!isDisabled && editEvents.drag && dnd && dnd.cellDragOver($event, $data, data.startDate, splitsCount ? split.id : null)"
@dragleave="!isDisabled && editEvents.drag && dnd && dnd.cellDragLeave($event, $data, data.startDate)"
@drop="!isDisabled && editEvents.drag && dnd && dnd.cellDragDrop($event, $data, data.startDate, splitsCount ? split.id : null)")
.cell-time-labels(v-if="options.showTimeInCells && options.time && isWeekOrDayView && !allDay")
span.cell-time-label(v-for="(cell, i) in vuecal.timeCells" :key="i").
{{ cell.label }}
template(v-if="isWeekOrDayView && !allDay && specialHours.length")
.vuecal__special-hours(
v-for="(block, i) in specialHours"
:class="`vuecal__special-hours--day${block.day} ${block.class}`"
:style="`height: ${block.height}px;top: ${block.top}px`")
.special-hours-label(v-if="block.label" v-html="block.label")
slot(
name="cell-content"
:events="events"
:select-cell="$event => selectCell($event, true)"
:split="splitsCount ? split : false")
.vuecal__cell-events(
v-if="eventsCount && (isWeekOrDayView || (view.id === 'month' && options.eventsOnMonthView))")
event(
v-for="(event, j) in (splitsCount ? split.events : events)" :key="j"
:cell-formatted-date="data.formattedDate"
:event="event"
:all-day="allDay"
:cell-events="splitsCount ? split.events : events"
:cellOverlaps="((splitsCount ? split.overlaps[event._eid] : cellOverlaps[event._eid]) || [])"
:allOverlaps="((splitsCount ? split.overlaps : cellOverlaps) || [])"
:event-position="((splitsCount ? split.overlaps[event._eid] : cellOverlaps[event._eid]) || []).position"
:overlaps-streak="splitsCount ? split.overlapsStreak : cellOverlapsStreak")
template(#event="{ event, view }")
slot(name="event" :view="view" :event="event")
.vuecal__now-line(
v-if="timelineVisible"
:style="`top: ${todaysTimePosition}px`"
:key="options.transitions ? `${view.id}-now-line` : 'now-line'"
:title="utils.date.formatTime(vuecal.now)")