Я борюсь со всплывающим окном в своем laravel и полном календаре. ⇐ Javascript

[Anonymous]

Я объединил несколько кодов и сделал правильный поворот. У меня этот скрипт работал, но bootstrap.js приводил к поломке остальной части сайта. поэтому я удалил загрузочную загрузку и попытался выполнить рефакторинг в Alpine и Tailwind, но это просто не сработало, что бы я ни делал, и чат gpt тоже не смог с этим справиться.
так что это так. проект laravel, использующий ветер, а также альпийский и попутный ветер.
это полный код:

Код: Выделить всё

@extends('layouts.app')

@push('styles')


/* Make dropdowns wider */
.modal .form-group select {
width: 100%;
}

/* Consolidate buttons in the modal footer */
.modal-footer {
display: flex;
justify-content: space-between;
}

/* Adjust the width of the calendar container */
#calendar {
max-width: 1200px; /* Increased width */
margin: 0 auto;
}

/* Additional Styles for iCal Buttons and User Dropdown */
.ical-buttons {
margin-bottom: 20px;
text-align: center;
}

.ical-buttons .btn {
margin: 0 5px;
}

.user-selection {
margin-bottom: 20px;
text-align: center;
}

/* Optional: simple icons via emojis for the iCal buttons */
.btn-ics-download::before {
content: "\1F4BE "; /* Floppy Disk Emoji as a simple icon */
}
.btn-ics-subscribe::before {
content: "\1F517 "; /* Link Emoji */
}
.btn-ics-import::before {
content: "\1F4E5 "; /* Inbox Tray Emoji */
}

/* Ensure option texts are visible (for dark themes, etc.) */
.modal .form-group select option {
color: #000;
background-color: #fff;
}

@endpush

@section('content')



Select User:

All Users
@foreach($users as $user)
{{ $user->name }}
@endforeach












Create/Edit Event

×





Title *


Description


Start *


End


Calendar *

-- Select Calendar --
@foreach($calendars as $calendar)

{{ $calendar->name }} @if($calendar->is_global) (Global) @endif

@endforeach


Category *

-- Select Category --
Milestone
Task
Time
All Day
Holiday


Task

-- Select Task --
@foreach($tasks as $task)
{{ $task->name }}
@endforeach


Color




Delete
Cancel
Save Event





@endsection

@push('scripts')










document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');

// Initialize FullCalendar
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listDay'
},
selectable: true,
editable: true,
eventStartEditable: true,
eventDurationEditable: true,

// Use a function to fetch events with the correct parameters
events: function(fetchInfo, successCallback, failureCallback) {
axios.get('{{ route("calendar.events.fetch") }}', {
params: {
userId: $('#userSelect').val(),
start: fetchInfo.startStr,
end: fetchInfo.endStr
}
})
.then(function(response) {
successCallback(response.data);
})
.catch(function(error) {
console.error('Error fetching events:', error);
failureCallback(error);
});
},
eventDidMount: function(info) {
var color = info.event.backgroundColor || '#3788d8'; // Default color if not set
info.el.style.backgroundColor = color;
info.el.style.borderColor = color;
},
select: function (info) {
openEventModal({
start: info.startStr,
end: info.endStr,
allDay: info.allDay
}, false); // create mode
},
eventClick: function (info) {
openEventModal(info.event, true);  // edit mode
},
eventDrop: function (info) {
updateEventDate(info.event);
},
eventResize: function (info) {
updateEventDate(info.event);
},
});

calendar.render();

function openEventModal(eventData, isEdit) {
if (isEdit) {
$('#eventModalLabel').text('Edit Event');
$('#eventId').val(eventData.id);
$('#eventTitle').val(eventData.title);
$('#eventDescription').val(eventData.extendedProps.description || '');
$('#eventStart').val(moment(eventData.start).format('YYYY-MM-DDTHH:mm'));
$('#eventEnd').val(eventData.end ? moment(eventData.end).format('YYYY-MM-DDTHH:mm') : '');
$('#eventCalendar').val(eventData.extendedProps.calendar_id || '');
$('#eventCategory').val(eventData.extendedProps.category || '');
$('#eventTask').val(eventData.extendedProps.task_id || '');
toggleTaskField(eventData.extendedProps.category || '');
toggleTimeFields(eventData.extendedProps.category || '');
setColorBasedOnCalendar(eventData.extendedProps.calendar_id || '');
$('#deleteEventButton').show();
} else {
// create
$('#eventModalLabel').text('Create Event');
$('#eventId').val('');
$('#eventTitle').val('');
$('#eventDescription').val('');
$('#eventStart').val(moment(eventData.start).format('YYYY-MM-DDTHH:mm'));
$('#eventEnd').val(moment(eventData.end).format('YYYY-MM-DDTHH:mm'));
$('#eventCalendar').val('');
$('#eventCategory').val('');
$('#eventTask').val('');
toggleTaskField('');
toggleTimeFields('');
$('#eventColor').val('#3788d8');
$('#deleteEventButton').hide();
}
$('#eventModal').modal('show');
}

function toggleTaskField(category) {
if (category === 'task') {
$('#taskField').show();
} else {
$('#taskField').hide();
$('#eventTask').val('');
}
}

function toggleTimeFields(category) {
if (category === 'allday') {
$('#timeFields').hide();
// Remove 'required' attribute from end time
$('#eventEnd').removeAttr('required');
// Optionally, set end time to start time or leave it null
$('#eventEnd').val('');
} else {
$('#timeFields').show();
}
}

function setColorBasedOnCalendar(calendarId) {
if (!calendarId) {
$('#eventColor').val('#3788d8');  // default color
return;
}
var selectedOption = $('#eventCalendar option[value="' + calendarId + '"]');
var color = selectedOption.data('color') || '#3788d8';
$('#eventColor').val(color);
}

// When a calendar is selected, set the color automatically
$('#eventCalendar').on('change', function() {
var calendarId = $(this).val();
setColorBasedOnCalendar(calendarId);
});

// When the category changes, toggle task field and time fields
$('#eventCategory').on('change', function() {
var category = $(this).val();
toggleTaskField(category);
toggleTimeFields(category);
});

// Create/Update
$('#eventForm').on('submit', function (e) {
e.preventDefault();

var eventId     = $('#eventId').val();
var title       = $('#eventTitle').val();
var description = $('#eventDescription').val();
var start       = $('#eventStart').val();
var end         = $('#eventEnd').val();
var color       = $('#eventColor').val();
var calendarId  = $('#eventCalendar').val();
var category    = $('#eventCategory').val();
var taskId      = $('#eventTask').val();

if (!title || !start || !calendarId || !category) {
alert('Please fill all required fields');
return;
}

var payload = {
title: title,
description: description,
start: start,
end: end,
color: color,
calendarId: calendarId,
category: category,
};

// Only include taskId if category is 'task'
if (category === 'task') {
payload.taskId = taskId;
} else {
payload.taskId = null;
}

if (eventId) {
// update
axios.put('/calendar/events/' + eventId, payload)
.then(response => {
$('#eventModal').modal('hide');
calendar.refetchEvents();
if (response.data.conflict) {
alert('Warning: Overlapping event.');
} else {
alert(response.data.message);
}
})
.catch(error => {
handleError(error, 'Update error');
});
} else {
// store
axios.post('/calendar/events', payload)
.then(response => {
$('#eventModal').modal('hide');
calendar.refetchEvents();
if (response.data.conflict) {
alert('Warning: Overlapping event.');
} else {
alert(response.data.message);
}
})
.catch(error => {
handleError(error, 'Create error');
});
}
});

// Drag/Resize => update start/end
function updateEventDate(fcEvent) {
var category = fcEvent.extendedProps.category;
var calendarId = fcEvent.extendedProps.calendar_id;
var taskId = fcEvent.extendedProps.task_id;

var payload = {
start: fcEvent.start.toISOString(),
end: fcEvent.end ? fcEvent.end.toISOString() : fcEvent.start.toISOString(),
category: category,
calendarId: calendarId,
};

if (category === 'task') {
payload.taskId = taskId;
}

axios.put('/calendar/events/' + fcEvent.id, payload)
.then(response =>  {
if (response.data.conflict) {
alert('Warning: Overlapping event.');
}
alert(response.data.message);
})
.catch(error => {
fcEvent.revert();
handleError(error, 'Drag/Resize error');
});
}

// Delete
$('#deleteEventButton').on('click', function () {
var eventId = $('#eventId').val();
if (!eventId) return;
if (confirm('Are you sure you want to delete this event?')) {
axios.delete('/calendar/events/' + eventId)
.then(response => {
$('#eventModal').modal('hide');
calendar.refetchEvents();
alert(response.data.message);
})
.catch(error => {
handleError(error, 'Delete error');
});
}
});

function handleError(error, defaultMsg) {
console.error(error);
if (error.response) {
if (error.response.status === 401) {
alert('Unauthorized. Please log in.');
} else if (error.response.status === 403) {
alert('Forbidden.  No permission.');
} else if (error.response.data && error.response.data.errors) {
// Laravel validation error messages
alert(Object.values(error.response.data.errors).flat().join('\n'));
} else if (error.response.data && error.response.data.message) {
alert(error.response.data.message);
} else {
alert(defaultMsg);
}
} else {
alert(defaultMsg);
}
}

// Re-fetch events when user selection changes
$('#userSelect').on('change', function() {
calendar.refetchEvents();
});

// Ensure CSRF token is included in Axios headers
axios.defaults.headers.common['X-CSRF-TOKEN'] =
document.querySelector('meta[name="csrf-token"]').getAttribute('content');
});


@endpush

на этой странице все сделано, это наш рабочий календарь, который на самом деле работает очень хорошо, просто нужно вернуть работоспособность всплывающему окну.
У меня есть столько раз пытался это переделать и я потерял все душевные силы

Код: Выделить всё

Create/Edit Event

×





Title *


Description


Start *


End


Calendar *

-- Select Calendar --
@foreach($calendars as $calendar)

{{ $calendar->name }} @if($calendar->is_global) (Global) @endif

@endforeach


Category *

-- Select Category --
Milestone
Task
Time
All Day
Holiday


Task

-- Select Task --
@foreach($tasks as $task)
{{ $task->name }}
@endforeach


Color




Delete
Cancel
Save Event

любая помощь будет замечательной. или точку в правильном направлении.
спасибо
Мик
Я пытался настроить это так, чтобы оно работало с горным и попутным ветром, но в итоге все ломаю.

Подробнее здесь: https://stackoverflow.com/questions/793 ... ndar-blade