так что это так. проект 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
