Мобильная версияЕсли есть событие с 2 января 2025 года, с 05:00 до 3 января 2025 года, в 03:00, его следует отображать следующим образом: < /p>
, когда я ищу 2 января, 2025. 23:00.
Когда я ищу 3 января 2025 года, событие должно быть выделено с 00:00 до 03:00. Ячейка временной таблицы составляет 60 %. Я так долго застрял < /p>
Schedule
Add Event
{{ allEvents }}
Tail Number
Type
{{ String(hour - 1).padStart(2, '0') }}:00
{{ row.id }}
{{ row.tailNumber || row.name }}
{{ row.model }}
v-if="shouldHighlight(row, hour - 1)"
class="position-absolute rounded p-1 small event-text"
:style="getEventStyle(row, hour - 1)"
>
{{ getEventName(row) }}
import CustomSelect from "@/components/Common/CustomSelect.vue";
import dayjs from "dayjs";
export default {
components: { CustomSelect },
props: {
currentUser: Object,
aircraft: Array,
instructors: Array,
rooms: Array,
eventTypes: Array,
selectedCalendarDate: Object,
userCanCreateReservations: Boolean,
userCanAccessSettings: Boolean,
standbyFlightsExist: Boolean,
events: Array,
filteredAircraft: Array,
allEvents: Array
},
data() {
return {
selectedDate: dayjs().format("YYYY-MM-DD"),
hourWidth: 60,
selectedType: null,
filter: {
selectedEventType: "all",
selectedScheduleType: "all"
},
scheduleTypes: []
};
},
watch: {
selectedDate(newDate) {
this.emitDateChange();
}
},
computed: {
tableData() {
return [...this.filteredAircraft, ...this.instructors, ...this.rooms];
},
filteredEvents() {
const selectedDate = new Date(this.selectedDate);
return this.events.filter(event => {
const eventStartDate = new Date(event.startDateTime);
const eventEndDate = new Date(event.endDateTime);
return (
eventStartDate.toDateString() === selectedDate.toDateString() ||
eventEndDate.toDateString() === selectedDate.toDateString() ||
(eventStartDate = selectedDate)
);
});
}
},
methods: {
openReservationModal() {
this.$emit("show-reservation-modal");
},
resetShortcutButtons() {
this.filter = {
selectedEventType: null,
selectedScheduleType: null
};
},
resetFilters() {
this.resetShortcutButtons();
this.$emit("reset-schedule-filters");
},
emitDateChange() {
this.$emit("update-date", this.selectedDate);
},
shouldHighlight(row, hour) {
const matchingEvents = this.filteredEvents.filter(event =>
event.aircraftId === row.id ||
event.instructorId === row.id ||
event.roomId === row.id
);
for (const event of matchingEvents) {
const eventStartDate = new Date(event.startDateTime);
const eventEndDate = new Date(event.endDateTime);
const selectedDate = new Date(this.selectedDate);
if (
eventStartDate.toDateString() === selectedDate.toDateString() ||
eventEndDate.toDateString() === selectedDate.toDateString() ||
(eventStartDate = selectedDate)
) {
if (eventStartDate.toDateString() !== eventEndDate.toDateString()) {
if (selectedDate.toDateString() === eventStartDate.toDateString()) {
const startHour = eventStartDate.getHours();
if (hour >= startHour) {
return true;
}
}
else if (selectedDate.toDateString() === eventEndDate.toDateString()) {
const endHour = eventEndDate.getHours();
if (hour < endHour) {
return true;
}
}
else {
return true;
}
} else {
const startHour = eventStartDate.getHours();
const endHour = eventEndDate.getHours();
if (hour >= startHour && hour < endHour) {
return true;
}
}
}
}
return false;
},
getEventStyle(row, hour) {
const matchingEvents = this.filteredEvents.filter(event =>
event.aircraftId === row.id ||
event.instructorId === row.id ||
event.roomId === row.id
);
for (const event of matchingEvents) {
const eventStartDate = new Date(event.startDateTime);
const eventEndDate = new Date(event.endDateTime);
const selectedDate = new Date(this.selectedDate);
if (
eventStartDate.toDateString() === selectedDate.toDateString() ||
eventEndDate.toDateString() === selectedDate.toDateString() ||
(eventStartDate = selectedDate)
) {
if (eventStartDate.toDateString() !== eventEndDate.toDateString()) {
if (selectedDate.toDateString() === eventStartDate.toDateString()) {
const startHour = eventStartDate.getHours();
if (hour >= startHour) {
const remainingHours = 24 - startHour;
return {
width: `${remainingHours * this.hourWidth}px`,
backgroundColor: event.eventType.scheduledColor,
color: event.eventType.textColor,
minHeight: '26px',
padding: '2px 5px',
textAlign: 'center'
};
}
}
else if (selectedDate.toDateString() === eventEndDate.toDateString()) {
const endHour = eventEndDate.getHours();
if (hour < endHour) {
return {
width: `${endHour * this.hourWidth}px`,
backgroundColor: event.eventType.scheduledColor,
color: event.eventType.textColor,
minHeight: '26px',
padding: '2px 5px',
textAlign: 'center'
};
}
}
else {
return {
width: `${24 * this.hourWidth}px`,
backgroundColor: event.eventType.scheduledColor,
color: event.eventType.textColor,
minHeight: '26px',
padding: '2px 5px',
textAlign: 'center'
};
}
} else {
const startHour = eventStartDate.getHours();
const endHour = eventEndDate.getHours();
if (hour >= startHour && hour < endHour) {
const duration = endHour - startHour;
return {
width: `${duration * this.hourWidth}px`,
backgroundColor: event.eventType.scheduledColor,
color: event.eventType.textColor,
minHeight: '26px',
padding: '2px 5px',
textAlign: 'center'
};
}
}
}
}
return {};
},
getEventName(row) {
const matchingEvent = this.filteredEvents.find(event =>
event.aircraftId === row.id ||
event.instructorId === row.id ||
event.roomId === row.id
);
return matchingEvent ? matchingEvent.displayName : "";
}
},
mounted() {
}
};
.schedule-container {
display: flex;
flex-direction: column;
}
.schedule-header {
display: grid;
align-items: center;
gap: 15px;
grid-template-columns: repeat(4, 1fr);
box-sizing: border-box;
}
.button-primary {
background-color: #3C78FF;
color: #fff;
border-radius: 5px;
padding: 3px 10px;
display: flex;
align-items: center;
gap: 10px;
font-weight: normal;
box-sizing: border-box;
height: fit-content;
font-size: 16px;
}
.schedule-header-title {
display: flex;
justify-content: space-between;
align-items: center;
}
.schedule-header-title h1 {
font-weight: 600;
color: #404040;
}
.table-responsive {
overflow-x: auto;
white-space: nowrap;
overflow-y: hidden;
}
.table-bordered {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 3px !important;
text-align: center;
}
th {
background: #3C78FF;
color: white !important;
text-transform: lowercase !important;
text-transform: capitalize !important;
}
.position-absolute {
top: 0;
left: 0;
border-radius: 30px !important;
text-overflow: ellipsis;
}
.schedule-header-filter {
display: grid;
}
td:first-child div {
width: 10px;
height: 10px;
border-radius: 50%;
background: gray;
}
.event-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
font-size: 12px;
}
input[type="date"] {
background: #fff;
border: 1px solid #ccc;
height: 33px;
}
Подробнее здесь: https://stackoverflow.com/questions/795 ... m-calendar
