JandL_gitea/jandl-taskmanager-app
1
0 Fork 0
mirror of https://bitbucket.org/studiotem/jandl-taskmanager-app.git synced 2026-10-21 14:29:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(calendar): removed condition to show "create task modal" only when clicking to working hours

Browse Source
This commit is contained in:
Matej Glasnák committed 2025-10-31 13:54:42 +01:00
1 parent 1e97ec472c
commit 128d53788e
1 file changed
+277 -172
Download Patch File Download Diff File Expand all files Collapse all files
app/src/plugins/app@vendor/vue-cal/cell.vue
+277 -172
View File
@@ -62,10 +62,10 @@ transition-group.vuecal__cell(
</template>
<script>
import Event from './event.vue'
import tmUtils from '@/plugins/tm@_utils/tm.utils'
import moment from 'moment'
import { mapGetters } from 'vuex'
import Event from './event.vue';
import tmUtils from '@/plugins/tm@_utils/tm.utils';
import moment from 'moment';
import { mapGetters } from 'vuex';
export default {
inject: ['vuecal', 'utils', 'modules', 'view', 'domEvents'],
@@ -79,7 +79,7 @@ export default {
minTimestamp: { type: [Number, null], default: null },
maxTimestamp: { type: [Number, null], default: null },
cellWidth: { type: [Number, Boolean], default: false },
allDay: { type: Boolean, default: false }
allDay: { type: Boolean, default: false },
},
data: () => ({
@@ -90,20 +90,23 @@ export default {
// where there is no cursor coords.
timeAtCursor: null,
highlighted: false, // On event drag over.
highlightedSplit: null
highlightedSplit: null,
}),
methods: {
getSplitAtCursor({ target }) {
const targetIsSplit = target.classList.contains('vuecal__cell-split')
let split = targetIsSplit ? target : this.vuecal.findAncestor(target, 'vuecal__cell-split')
const targetIsSplit = target.classList.contains('vuecal__cell-split');
let split = targetIsSplit
? target
: this.vuecal.findAncestor(target, 'vuecal__cell-split');
if (split) {
split = split.attributes['data-split'].value
split = split.attributes['data-split'].value;
// Convert to a numeric value if split id is a number.
if (parseInt(split).toString() === split.toString()) split = parseInt(split)
if (parseInt(split).toString() === split.toString())
split = parseInt(split);
}
return split || null
return split || null;
},
splitClasses(split) {
@@ -111,24 +114,29 @@ export default {
'vuecal__cell-split': true,
'vuecal__cell-split--highlighted': this.highlightedSplit === split.id,
'vuecal__cell-split--weekend': split.isWeekend,
[split.class]: !!split.class
}
[split.class]: !!split.class,
};
},
checkCellOverlappingEvents() {
// If splits, checkCellOverlappingEvents() is called from within computed splits.
if (this.options.time && this.eventsCount && !this.splitsCount) {
if (this.eventsCount === 1) {
this.cellOverlaps = []
this.cellOverlapsStreak = 1
this.cellOverlaps = [];
this.cellOverlapsStreak = 1;
}
// If only 1 event remains re-init the overlaps.
else [this.cellOverlaps, this.cellOverlapsStreak] = this.utils.event.checkCellOverlappingEvents(this.events, this.options)
else
[this.cellOverlaps, this.cellOverlapsStreak] =
this.utils.event.checkCellOverlappingEvents(
this.events,
this.options,
);
}
},
isDOMElementAnEvent(el) {
return this.vuecal.isDOMElementAnEvent(el)
return this.vuecal.isDOMElementAnEvent(el);
},
/**
@@ -136,20 +144,20 @@ export default {
*/
selectCell(DOMEvent, force = false) {
// If splitting days, also return the clicked split on cell click when emitting event.
const split = this.splitsCount ? this.getSplitAtCursor(DOMEvent) : null
const split = this.splitsCount ? this.getSplitAtCursor(DOMEvent) : null;
this.utils.cell.selectCell(force, this.timeAtCursor, split)
this.timeAtCursor = null
this.utils.cell.selectCell(force, this.timeAtCursor, split);
this.timeAtCursor = null;
},
onCellkeyPressEnter(DOMEvent) {
if (!this.isSelected) this.onCellFocus(DOMEvent)
if (!this.isSelected) this.onCellFocus(DOMEvent);
// If splitting days, also return the clicked split on cell keypress when emitting event.
const split = this.splitsCount ? this.getSplitAtCursor(DOMEvent) : null
const split = this.splitsCount ? this.getSplitAtCursor(DOMEvent) : null;
this.utils.cell.keyPressEnterCell(this.timeAtCursor, split)
this.timeAtCursor = null
this.utils.cell.keyPressEnterCell(this.timeAtCursor, split);
this.timeAtCursor = null;
},
/**
@@ -159,284 +167,346 @@ export default {
*/
onCellFocus(DOMEvent) {
if (!this.isSelected && !this.isDisabled) {
this.isSelected = this.data.startDate // Highlight the cell.
this.isSelected = this.data.startDate; // Highlight the cell.
// If splitting days, also return the clicked split on cell focus when emitting event.
const split = this.splitsCount ? this.getSplitAtCursor(DOMEvent) : null
const split = this.splitsCount ? this.getSplitAtCursor(DOMEvent) : null;
// Cell-focus event returns the cell start date (at midnight) if triggered from tab key,
// or cursor coords time if clicked.
const date = this.timeAtCursor || this.data.startDate
this.vuecal.$emit('cell-focus', split ? { date, split } : date)
const date = this.timeAtCursor || this.data.startDate;
this.vuecal.$emit('cell-focus', split ? { date, split } : date);
}
},
onCellMouseDown(DOMEvent, split = null, touch = false) {
// Prevent a double mouse down on touch devices.
if ('ontouchstart' in window && !touch) return false
if ('ontouchstart' in window && !touch) return false;
if (!this.isSelected) this.onCellFocus(DOMEvent)
if (!this.isSelected) this.onCellFocus(DOMEvent);
const { clickHoldACell, focusAnEvent } = this.domEvents
const { clickHoldACell, focusAnEvent } = this.domEvents;
// Reinit the click trigger on each mousedown.
// In some cases we explicitly set this flag to prevent the click event to trigger,
// and cancel event creation.
this.domEvents.cancelClickEventCreation = false
this.domEvents.cancelClickEventCreation = false;
// Also reinit this var on each mousedown.
clickHoldACell.eventCreated = false
clickHoldACell.eventCreated = false;
this.timeAtCursor = new Date(this.data.startDate)
const { minutes, cursorCoords: { y } } = this.vuecal.minutesAtCursor(DOMEvent)
this.timeAtCursor.setMinutes(minutes)
this.timeAtCursor = new Date(this.data.startDate);
const {
minutes,
cursorCoords: { y },
} = this.vuecal.minutesAtCursor(DOMEvent);
this.timeAtCursor.setMinutes(minutes);
const mouseDownOnEvent = this.isDOMElementAnEvent(DOMEvent.target)
const mouseDownOnEvent = this.isDOMElementAnEvent(DOMEvent.target);
// Unfocus an event if any is focused and clicking on cell outside of an event.
if (!mouseDownOnEvent && focusAnEvent._eid) {
(this.view.events.find(e => e._eid === focusAnEvent._eid) || {}).focused = false
(
this.view.events.find((e) => e._eid === focusAnEvent._eid) || {}
).focused = false;
}
// Only if event creation is allowed and mousedown is on a cell (not on event).
if (this.editEvents.create && !mouseDownOnEvent) this.setUpEventCreation(DOMEvent, y)
if (this.editEvents.create && !mouseDownOnEvent)
this.setUpEventCreation(DOMEvent, y);
},
setUpEventCreation(DOMEvent, startCursorY) {
// If dragToCreateEvent is true, start the event creation from dragging
// only on week and day views (doesn't make sense on month view).
if (this.options.dragToCreateEvent && ['week', 'day'].includes(this.view.id)) {
const { dragCreateAnEvent } = this.domEvents
dragCreateAnEvent.startCursorY = startCursorY
if (
this.options.dragToCreateEvent &&
['week', 'day'].includes(this.view.id)
) {
const { dragCreateAnEvent } = this.domEvents;
dragCreateAnEvent.startCursorY = startCursorY;
// If splitting days, store the clicked split to create an event in it from the global
// mousemove handler in index.vue.
dragCreateAnEvent.split = this.splitsCount ? this.getSplitAtCursor(DOMEvent) : null
dragCreateAnEvent.split = this.splitsCount
? this.getSplitAtCursor(DOMEvent)
: null;
// Save the time at cursor on initial mousedown.
dragCreateAnEvent.start = this.timeAtCursor
dragCreateAnEvent.start = this.timeAtCursor;
// If snapToTime, set the start to the closest intervaled number.
if (this.options.snapToTime) {
let timeMinutes = this.timeAtCursor.getHours() * 60 + this.timeAtCursor.getMinutes()
const plusHalfSnapTime = timeMinutes + this.options.snapToTime / 2
timeMinutes = plusHalfSnapTime - (plusHalfSnapTime % this.options.snapToTime)
let timeMinutes =
this.timeAtCursor.getHours() * 60 + this.timeAtCursor.getMinutes();
const plusHalfSnapTime = timeMinutes + this.options.snapToTime / 2;
timeMinutes =
plusHalfSnapTime - (plusHalfSnapTime % this.options.snapToTime);
dragCreateAnEvent.start.setHours(0, timeMinutes, 0, 0)
dragCreateAnEvent.start.setHours(0, timeMinutes, 0, 0);
}
}
// If the cellClickHold option is true and not mousedown on an event, click & hold to create an event.
else if (this.options.cellClickHold && ['month', 'week', 'day'].includes(this.view.id)) {
this.setUpCellHoldTimer(DOMEvent)
else if (
this.options.cellClickHold &&
['month', 'week', 'day'].includes(this.view.id)
) {
this.setUpCellHoldTimer(DOMEvent);
}
},
// When click & holding a cell, and if allowed, set a timeout to create an event (can be cancelled).
setUpCellHoldTimer(DOMEvent) {
const { clickHoldACell } = this.domEvents
clickHoldACell.cellId = `${this.vuecal._.uid}_${this.data.formattedDate}`
const { clickHoldACell } = this.domEvents;
clickHoldACell.cellId = `${this.vuecal._.uid}_${this.data.formattedDate}`;
// If splitting days, store the clicked split to create an event in it from the global
// mousemove handler in index.vue.
clickHoldACell.split = this.splitsCount ? this.getSplitAtCursor(DOMEvent) : null
clickHoldACell.split = this.splitsCount
? this.getSplitAtCursor(DOMEvent)
: null;
clickHoldACell.timeoutId = setTimeout(() => {
if (clickHoldACell.cellId && !this.domEvents.cancelClickEventCreation) {
const { _eid } = this.utils.event.createAnEvent(
this.timeAtCursor,
null,
clickHoldACell.split ? { split: clickHoldACell.split } : {}
)
clickHoldACell.split ? { split: clickHoldACell.split } : {},
);
clickHoldACell.eventCreated = _eid
clickHoldACell.eventCreated = _eid;
}
}, clickHoldACell.timeout)
}, clickHoldACell.timeout);
},
onCellTouchStart(DOMEvent, split = null) {
// If not mousedown on an event.
this.onCellMouseDown(DOMEvent, split, true)
this.onCellMouseDown(DOMEvent, split, true);
},
onCellClick(DOMEvent, split) {
if (DOMEvent.offsetY > 950 && DOMEvent.offsetY < 1700) {
const dateFrom = split.date
dateFrom.setHours(Math.floor(DOMEvent.offsetY / 100), 0, 0, 0)
const dateTo = new Date(dateFrom)
dateTo.setHours(dateFrom.getHours() + 1)
const dateFrom = split.date;
dateFrom.setHours(Math.floor(DOMEvent.offsetY / 100), 0, 0, 0);
const dateTo = new Date(dateFrom);
dateTo.setHours(dateFrom.getHours() + 1);
const time = moment(dateFrom).format('HH:mm')
const time = moment(dateFrom).format('HH:mm');
const isTeamCalendar = this.$route.name === 'Dashboard - Teams'
const employee = isTeamCalendar ? split.employee_id : Number(localStorage.getItem('selectedEmployee') || this.user.id)
const isTeamCalendar = this.$route.name === 'Dashboard - Teams';
const employee = isTeamCalendar
? split.employee_id
: Number(localStorage.getItem('selectedEmployee') || this.user.id);
this.$events.emit('show-menu-modal', {
time,
date: tmUtils.formatDateTimeForBackend(dateFrom),
employee
})
employee,
});
setTimeout(() => {
this.$events.emit('add-timeblock', {
id: null,
start: tmUtils.formatDateTimeForBackend(dateFrom),
end: tmUtils.formatDateTimeForBackend(dateTo)
})
}, 150)
}
end: tmUtils.formatDateTimeForBackend(dateTo),
});
}, 150);
if (!this.isDOMElementAnEvent(DOMEvent.target)) this.selectCell(DOMEvent)
if (!this.isDOMElementAnEvent(DOMEvent.target)) this.selectCell(DOMEvent);
},
onCellDblClick(DOMEvent) {
const date = new Date(this.data.startDate)
date.setMinutes(this.vuecal.minutesAtCursor(DOMEvent).minutes)
const date = new Date(this.data.startDate);
date.setMinutes(this.vuecal.minutesAtCursor(DOMEvent).minutes);
// If splitting days, also return the clicked split on cell dblclick when emitting event.
const split = this.splitsCount ? this.getSplitAtCursor(DOMEvent) : null
const split = this.splitsCount ? this.getSplitAtCursor(DOMEvent) : null;
this.vuecal.$emit('cell-dblclick', split ? { date, split } : date)
this.vuecal.$emit('cell-dblclick', split ? { date, split } : date);
if (this.options.dblclickToNavigate) this.vuecal.switchToNarrowerView()
if (this.options.dblclickToNavigate) this.vuecal.switchToNarrowerView();
},
onCellContextMenu(DOMEvent) {
DOMEvent.stopPropagation()
DOMEvent.preventDefault()
DOMEvent.stopPropagation();
DOMEvent.preventDefault();
const date = new Date(this.data.startDate)
const { cursorCoords, minutes } = this.vuecal.minutesAtCursor(DOMEvent)
date.setMinutes(minutes)
const date = new Date(this.data.startDate);
const { cursorCoords, minutes } = this.vuecal.minutesAtCursor(DOMEvent);
date.setMinutes(minutes);
// If splitting days, also return the clicked split on cell contextmenu when emitting event.
const split = this.splitsCount ? this.getSplitAtCursor(DOMEvent) : null
const split = this.splitsCount ? this.getSplitAtCursor(DOMEvent) : null;
this.vuecal.$emit('cell-contextmenu', { date, ...cursorCoords, ...(split || {}), e: DOMEvent })
}
this.vuecal.$emit('cell-contextmenu', {
date,
...cursorCoords,
...(split || {}),
e: DOMEvent,
});
},
},
computed: {
...mapGetters("auth", ["user"]),
...mapGetters('auth', ['user']),
// Drag & drop module.
dnd() {
return this.modules.dnd
return this.modules.dnd;
},
nowInMinutes() {
return this.utils.date.dateToMinutes(this.vuecal.now)
return this.utils.date.dateToMinutes(this.vuecal.now);
},
isBeforeMinDate() {
return this.minTimestamp !== null && this.minTimestamp > this.data.endDate.getTime()
return (
this.minTimestamp !== null &&
this.minTimestamp > this.data.endDate.getTime()
);
},
isAfterMaxDate() {
return this.maxTimestamp && this.maxTimestamp < this.data.startDate.getTime()
return (
this.maxTimestamp && this.maxTimestamp < this.data.startDate.getTime()
);
},
// Is the current cell disabled or not.
isDisabled() {
const { disableDays } = this.options
const { isYearsOrYearView } = this.vuecal
if (disableDays.length && disableDays.includes(this.data.formattedDate) && !isYearsOrYearView) return true
return this.isBeforeMinDate || this.isAfterMaxDate
const { disableDays } = this.options;
const { isYearsOrYearView } = this.vuecal;
if (
disableDays.length &&
disableDays.includes(this.data.formattedDate) &&
!isYearsOrYearView
)
return true;
return this.isBeforeMinDate || this.isAfterMaxDate;
},
// Is the current cell selected or not.
isSelected: {
get() {
let selected = false
const { selectedDate } = this.view
let selected = false;
const { selectedDate } = this.view;
if (this.view.id === 'years') {
selected = selectedDate.getFullYear() === this.data.startDate.getFullYear()
}
else if (this.view.id === 'year') {
selected = (selectedDate.getFullYear() === this.data.startDate.getFullYear() &&
selectedDate.getMonth() === this.data.startDate.getMonth())
}
else selected = selectedDate.getTime() === this.data.startDate.getTime()
selected =
selectedDate.getFullYear() === this.data.startDate.getFullYear();
} else if (this.view.id === 'year') {
selected =
selectedDate.getFullYear() === this.data.startDate.getFullYear() &&
selectedDate.getMonth() === this.data.startDate.getMonth();
} else
selected = selectedDate.getTime() === this.data.startDate.getTime();
return selected
return selected;
},
set(date) {
this.view.selectedDate = date
this.vuecal.$emit('update:selected-date', this.view.selectedDate)
}
this.view.selectedDate = date;
this.vuecal.$emit('update:selected-date', this.view.selectedDate);
},
},
// Cache result for performance.
isWeekOrDayView() {
return ['week', 'day'].includes(this.view.id)
return ['week', 'day'].includes(this.view.id);
},
transitionDirection() {
return this.vuecal.transitionDirection
return this.vuecal.transitionDirection;
},
specialHours() {
// this.data.specialHours is always an array, but may be empty.
return this.data.specialHours.map(block => {
let { from, to } = block
from = Math.max(from, this.options.timeFrom)
to = Math.min(to, this.options.timeTo)
return this.data.specialHours.map((block) => {
let { from, to } = block;
from = Math.max(from, this.options.timeFrom);
to = Math.min(to, this.options.timeTo);
return {
...block,
height: (to - from) * this.timeScale,
top: (from - this.options.timeFrom) * this.timeScale
}
})
top: (from - this.options.timeFrom) * this.timeScale,
};
});
},
events() {
const { startDate: cellStart, endDate: cellEnd } = this.data
let events = []
const { startDate: cellStart, endDate: cellEnd } = this.data;
let events = [];
// Calculate events on month/week/day views or years/year if eventsCountOnYearView.
if (!(['years', 'year'].includes(this.view.id) && !this.options.eventsCountOnYearView)) {
if (
!(
['years', 'year'].includes(this.view.id) &&
!this.options.eventsCountOnYearView
)
) {
// Means that when vuecal.view.events changes all the cells will be looking up new value. :/
// Also clone array to prevent modifying original.
events = this.view.events.slice(0)
events = this.view.events.slice(0);
if (this.view.id === 'month') {
events.push(...this.view.outOfScopeEvents)
events.push(...this.view.outOfScopeEvents);
}
// Only keep events in cell time range.
events = events.filter(e => this.utils.event.eventInRange(e, cellStart, cellEnd))
events = events.filter((e) =>
this.utils.event.eventInRange(e, cellStart, cellEnd),
);
if (this.options.showAllDayEvents && this.view.id !== 'month') events = events.filter(e => !!e.allDay === this.allDay)
if (this.options.showAllDayEvents && this.view.id !== 'month')
events = events.filter((e) => !!e.allDay === this.allDay);
// From events in view, filter the ones that are out of `time-from`-`time-to` range in this cell.
if (this.options.time && this.isWeekOrDayView && !this.allDay) {
const { timeFrom, timeTo } = this.options
const { timeFrom, timeTo } = this.options;
events = events.filter(e => {
const segment = (e.daysCount > 1 && e.segments[this.data.formattedDate]) || {}
const singleDayInRange = e.daysCount === 1 && e.startTimeMinutes < timeTo && e.endTimeMinutes > timeFrom
const multipleDayInRange = e.daysCount > 1 && (segment.startTimeMinutes < timeTo && segment.endTimeMinutes > timeFrom)
const recurrMultDayInRange = false // e.daysCount > 1 && e.repeat && recurringEventInRange(e, cellStart, cellEnd)
return (e.allDay || singleDayInRange || multipleDayInRange || recurrMultDayInRange)
})
events = events.filter((e) => {
const segment =
(e.daysCount > 1 && e.segments[this.data.formattedDate]) || {};
const singleDayInRange =
e.daysCount === 1 &&
e.startTimeMinutes < timeTo &&
e.endTimeMinutes > timeFrom;
const multipleDayInRange =
e.daysCount > 1 &&
segment.startTimeMinutes < timeTo &&
segment.endTimeMinutes > timeFrom;
const recurrMultDayInRange = false; // e.daysCount > 1 && e.repeat && recurringEventInRange(e, cellStart, cellEnd)
return (
e.allDay ||
singleDayInRange ||
multipleDayInRange ||
recurrMultDayInRange
);
});
}
// Position events with time in the timeline when there is a timeline and not in allDay slot.
if (this.options.time && this.isWeekOrDayView && !(this.options.showAllDayEvents && this.allDay)) {
if (
this.options.time &&
this.isWeekOrDayView &&
!(this.options.showAllDayEvents && this.allDay)
) {
// Sort events in chronological order.
events.sort((a, b) => a.start < b.start ? -1 : 1)
events.sort((a, b) => (a.start < b.start ? -1 : 1));
}
// If splits, checkCellOverlappingEvents() is called from within computed splits.
if (!this.cellSplits.length) this.$nextTick(this.checkCellOverlappingEvents)
if (!this.cellSplits.length)
this.$nextTick(this.checkCellOverlappingEvents);
}
return events
return events;
},
eventsCount() {
return this.events.length
return this.events.length;
},
splits() {
return this.cellSplits.map((item, i) => {
const events = this.events.filter(e => e.split === item.id)
const [overlaps, streak] = this.utils.event.checkCellOverlappingEvents(events.filter(e => !e.background && !e.allDay), this.options)
const events = this.events.filter((e) => e.split === item.id);
const [overlaps, streak] = this.utils.event.checkCellOverlappingEvents(
events.filter((e) => !e.background && !e.allDay),
this.options,
);
return {
...item,
overlaps,
overlapsStreak: streak,
events
}
})
events,
};
});
},
splitsCount() {
return this.splits.length
return this.splits.length;
},
cellClasses() {
return {
@@ -450,31 +520,37 @@ export default {
'vuecal__cell--selected': this.isSelected,
'vuecal__cell--highlighted': this.highlighted,
'vuecal__cell--has-splits': this.splitsCount,
'vuecal__cell--has-events': this.eventsCount
}
'vuecal__cell--has-events': this.eventsCount,
};
},
cellStyles() {
return {
// cellWidth is only applied when hiding weekdays on month and week views.
...(this.cellWidth ? { width: `${this.cellWidth}%` } : {})
}
...(this.cellWidth ? { width: `${this.cellWidth}%` } : {}),
};
},
timelineVisible() {
const { time, timeTo } = this.options
return this.data.today && this.isWeekOrDayView && time && !this.allDay && this.nowInMinutes <= timeTo
const { time, timeTo } = this.options;
return (
this.data.today &&
this.isWeekOrDayView &&
time &&
!this.allDay &&
this.nowInMinutes <= timeTo
);
},
todaysTimePosition() {
// Skip the Maths if not relevant.
if (!this.data.today || !this.options.time) return
if (!this.data.today || !this.options.time) return;
const minutesFromTop = this.nowInMinutes - this.options.timeFrom
return Math.round(minutesFromTop * this.timeScale)
const minutesFromTop = this.nowInMinutes - this.options.timeFrom;
return Math.round(minutesFromTop * this.timeScale);
},
timeScale() {
return this.options.timeCellHeight / this.options.timeStep
}
}
}
return this.options.timeCellHeight / this.options.timeStep;
},
},
};
</script>
<style lang="scss">
@@ -499,15 +575,27 @@ export default {
width: 20%;
}
.vuecal__cells.years-view & {width: 20%;}
.vuecal__cells.year-view & {width: 33.33%;}
.vuecal__cells.day-view & {flex: 1;}
.vuecal--overflow-x.vuecal--day-view & {width: auto;}
.vuecal__cells.years-view & {
width: 20%;
}
.vuecal__cells.year-view & {
width: 33.33%;
}
.vuecal__cells.day-view & {
flex: 1;
}
.vuecal--overflow-x.vuecal--day-view & {
width: auto;
}
.vuecal--click-to-navigate &:not(&--disabled) {cursor: pointer;}
.vuecal--click-to-navigate &:not(&--disabled) {
cursor: pointer;
}
.vuecal--view-with-time &,
.vuecal--week-view.vuecal--no-time &:not(.vuecal__cell--has-splits),
.vuecal--day-view.vuecal--no-time &:not(.vuecal__cell--has-splits) {display: block;}
.vuecal--day-view.vuecal--no-time &:not(.vuecal__cell--has-splits) {
display: block;
}
&.vuecal__cell--has-splits {
flex-direction: row;
@@ -524,7 +612,9 @@ export default {
bottom: -1px;
border: 1px solid rgba(196, 196, 196, 0.25);
}
.vuecal--overflow-x.vuecal--day-view &:before {bottom: 0;}
.vuecal--overflow-x.vuecal--day-view &:before {
bottom: 0;
}
&--today,
&--current {
@@ -536,14 +626,22 @@ export default {
background-color: rgba(235, 255, 245, 0.4);
z-index: 2;
.vuecal--day-view & {background: none;}
.vuecal--day-view & {
background: none;
}
}
&--out-of-scope {color: rgba(0, 0, 0, 0.25);}
&--disabled {color: rgba(0, 0, 0, 0.25);cursor: not-allowed;}
&--out-of-scope {
color: rgba(0, 0, 0, 0.25);
}
&--disabled {
color: rgba(0, 0, 0, 0.25);
cursor: not-allowed;
}
// Cells/splits get highlighted when dragging an event over it.
&--highlighted:not(.vuecal__cell--has-splits), &-split.vuecal__cell-split--highlighted {
&--highlighted:not(.vuecal__cell--has-splits),
&-split.vuecal__cell-split--highlighted {
background-color: rgba(0, 0, 0, 0.04);
// Drag over feedback must be fast. Then it can fade away with longer duration.
transition-duration: 5ms;
@@ -558,7 +656,9 @@ export default {
.vuecal--years-view &,
.vuecal--year-view &,
.vuecal--month-view & {justify-content: center;}
.vuecal--month-view & {
justify-content: center;
}
}
.cell-time-labels {
@@ -587,7 +687,9 @@ export default {
transition: 0.15s ease-in-out background-color;
}
&-events {width: 100%;}
&-events {
width: 100%;
}
&-events-count {
position: absolute;
@@ -613,7 +715,8 @@ export default {
}
}
.vuecal--overflow-x.vuecal--week-view .vuecal__cell, .vuecal__cell-split {
.vuecal--overflow-x.vuecal--week-view .vuecal__cell,
.vuecal__cell-split {
overflow: hidden;
}
@@ -624,7 +727,9 @@ export default {
margin-bottom: auto; // Vertical align top within flex column and align center.
}
.vuecal__all-day .vuecal__no-event {display: none;}
.vuecal__all-day .vuecal__no-event {
display: none;
}
.vuecal__now-line {
position: absolute;
@@ -637,7 +742,7 @@ export default {
z-index: 1;
&:before {
content: "";
content: '';
position: absolute;
top: -6px;
left: 0;