143 lines
4.1 KiB
JavaScript
143 lines
4.1 KiB
JavaScript
import {Controller} from "@hotwired/stimulus"
|
|
// Connects to data-controller="main-calendar"
|
|
|
|
export default class extends Controller {
|
|
static targets = ["dateDisplay", "navigation"]
|
|
|
|
connect() {
|
|
// Set height to full viewport
|
|
document.getElementById('main-calendar').style.height = '100vh';
|
|
document.getElementById('main-calendar').style.width = '100vw';
|
|
|
|
const calendar = new tui.Calendar(document.getElementById('main-calendar'), {
|
|
defaultView: 'week',
|
|
usageStatistics: false,
|
|
week: {
|
|
taskView: false,
|
|
scheduleView: false,
|
|
eventView: ['time'],
|
|
startDayOfWeek: 1, // Start week on Monday
|
|
hourStart: 4,
|
|
hourEnd: 21,
|
|
},
|
|
// This is important - set the height to 100%
|
|
height: '100%',
|
|
// Make sure it takes full width
|
|
width: '100%',
|
|
template: {
|
|
timegridDisplayPrimaryTime({time}) {
|
|
return `${time.getHours()} sati`;
|
|
},
|
|
popupDetailLocation(eventObj) {
|
|
return ''; // Empty location as requested
|
|
},
|
|
popupDetailAttendees(eventObj) {
|
|
return eventObj.attendees[0]; // Show team name
|
|
},
|
|
popupDetailState(eventObj) {
|
|
return '';
|
|
},
|
|
popupDetailBody(eventObj) {
|
|
return '';
|
|
}
|
|
},
|
|
calendars: [
|
|
{
|
|
id: 'cal1',
|
|
name: 'Work',
|
|
backgroundColor: '#00a9ff',
|
|
},
|
|
],
|
|
// Enable the built-in popup
|
|
useDetailPopup: true,
|
|
});
|
|
|
|
window.calendar = calendar;
|
|
this.getCalendardata();
|
|
|
|
calendar.render();
|
|
|
|
// Update the date display after rendering
|
|
this.updateDateDisplay();
|
|
}
|
|
|
|
getCalendardata() {
|
|
var reservations = JSON.parse(document.querySelector("#main-calendar").dataset.reservations);
|
|
window.reservations = reservations;
|
|
reservations.forEach(reservation => {
|
|
window.calendar.createEvents([
|
|
{
|
|
id: reservation.id,
|
|
calendarId: 'cal1',
|
|
title: reservation.customer.first_name + ' ' + reservation.customer.surname + ' (' + reservation.customer.phone + ')',
|
|
category: 'time',
|
|
dueDateClass: reservation.dueDateClass,
|
|
location: '', // Empty location as requested
|
|
attendees: [reservation.team.name], // Team name as attendee
|
|
start: reservation.start_time,
|
|
end: reservation.end_time
|
|
}
|
|
])
|
|
});
|
|
}
|
|
|
|
// Navigation methods - using the global window.calendar
|
|
prev() {
|
|
window.calendar.prev();
|
|
this.updateDateDisplay();
|
|
}
|
|
|
|
next() {
|
|
window.calendar.next();
|
|
this.updateDateDisplay();
|
|
}
|
|
|
|
today() {
|
|
window.calendar.today();
|
|
this.updateDateDisplay();
|
|
}
|
|
|
|
// Helper for updating the date display
|
|
updateDateDisplay() {
|
|
if (this.hasDateDisplayTarget) {
|
|
const calendar = window.calendar;
|
|
const currentDate = calendar.getDate();
|
|
|
|
// Format the date range based on the current view
|
|
const view = calendar.getViewName();
|
|
|
|
if (view === 'day') {
|
|
this.dateDisplayTarget.textContent = this.formatDate(currentDate);
|
|
} else if (view === 'week') {
|
|
// For week view, show range (e.g., "Aug 1 - 7, 2023")
|
|
const weekStart = new Date(currentDate);
|
|
weekStart.setDate(weekStart.getDate() - weekStart.getDay() + (weekStart.getDay() === 0 ? -6 : 1));
|
|
|
|
const weekEnd = new Date(weekStart);
|
|
weekEnd.setDate(weekStart.getDate() + 6);
|
|
|
|
this.dateDisplayTarget.textContent = `${this.formatDateShort(weekStart)} - ${this.formatDateShort(weekEnd)}`;
|
|
} else if (view === 'month') {
|
|
// For month view, show month and year (e.g., "August 2023")
|
|
this.dateDisplayTarget.textContent = currentDate.toLocaleString('default', { month: 'long', year: 'numeric' });
|
|
}
|
|
}
|
|
}
|
|
|
|
// Helper for formatting dates
|
|
formatDate(date) {
|
|
return date.toLocaleDateString('default', {
|
|
weekday: 'short',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
});
|
|
}
|
|
|
|
formatDateShort(date) {
|
|
return date.toLocaleDateString('default', {
|
|
month: 'short',
|
|
day: 'numeric'
|
|
});
|
|
}
|
|
} |