how do you use Draggable events with read start and end dates from the event and fix them but choose resource?
my code full calender
`
document.addEventListener(‘DOMContentLoaded’, function () {
var date = new Date()
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear()
var Calendar = FullCalendar.Calendar;
//var Draggable = FullCalendar.Draggable;
var containerEl = document.getElementById('external-events');
var checkbox = document.getElementById('drop-remove');
var Draggable = FullCalendarInteraction.Draggable;
new Draggable(containerEl, {
itemSelector: '.external-event',
eventData: function (eventEl) {
return {
id: eventEl.getAttribute('data-id'),
title: eventEl.getAttribute('data-title'),
start: eventEl.getAttribute('data-start'),
end: eventEl.getAttribute('data-end'),
resourceId: eventEl.getAttribute('data-resource-id'),
description: eventEl.getAttribute('data-description'),
backgroundColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
borderColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
textColor: window.getComputedStyle(eventEl, null).getPropertyValue('color')
};
}
});
let calendarEl = document.getElementById('calendar');
let calendar;
let start = '2024-05-01';
let end = '2024-06-31';
let resourcesurl = '/resources';//alert(resourcesurl);
let zone = '{{$zone}}';
let available = '{{$available}}';
let resourcesIndex = 0;
if (zone === '1') {
resourcesIndex += 1;
if (resourcesIndex === 1) {
resourcesurl += '?zone=on';
} else {
resourcesurl += '&zone=on';
}
}
if (available === '1') {
resourcesIndex += 1;
if (resourcesIndex === 1) {
resourcesurl += '?available=on';
} else {
resourcesurl += '&available=on';
}
}
@foreach ($Branches as $key => $branch)
@isset($data['BranchChoose'.$key])
resourcesIndex += 1;
if (resourcesIndex === 1) {
resourcesurl += '?BranchID' + {{$key}} + '=' + {{$data['BranchID'.$key]}} + '';
} else {
resourcesurl += '&BranchID' + {{$key}} + '=' + {{$data['BranchID'.$key]}} + '';
}
@endisset
@endforeach
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'resourceTimeline'],
timeZone: 'UTC',
defaultView: 'resourceTimelineDay',
aspectRatio: 1.5,
header: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay'//,resourceTimelineWeek,resourceTimelineMonth
},
views: {
resourceTimelineDay: {
duration: {days: 10},
// type: 'timeline',
slotDuration: '{{$plus}}'
}
},
now: '{{$start_str_now}}',
editable: true,
droppable: true,
resourceLabelText: '@lang("Car Plate Number")',
resources: resourcesurl,//resourcesurl,//'/resources?zone=on&available=on',//resourcesurl,//'/resources',
events: '/events?days=10&date={{$start_str_now}}',//?start=${start}&end=${end}
eventRender: function (info) {
var eventObj = info.event;
var start = eventObj.start;
var end = eventObj.end;
var title = eventObj.title;
console.log('Event: ' + title + 'nStart: ' + start + 'nEnd: ' + end);
// // Fix the start and end dates here
// info.event.setStart('2024-06-23T00:00:00'); // Example fixed start date
// info.event.setEnd('2024-06-30T00:00:00'); // Example fixed end date
// Clear any existing icons
info.el.querySelectorAll('.custom-icon').forEach(function (icon) {
icon.remove();
});
let titleEl = '';
// Add custom icons before the title
if (info.event.extendedProps.icons) {
titleEl = info.el.querySelector('.fc-title');
info.event.extendedProps.icons.forEach(function (iconData) {
var icon = document.createElement('span');
icon.classList.add('custom-icon');
icon.innerHTML = iconData.html;
icon.setAttribute('title', iconData.tooltip); // Set tooltip for icon
// Insert icon before the title element
titleEl.parentNode.insertBefore(icon, titleEl);
});
}
// Set tooltip for the title
if (info.event.extendedProps.tooltip) {
info.el.querySelector('.fc-title').setAttribute('title', info.event.extendedProps.tooltip);
}
// info.event.start = 'Sun Jun 23 2024 03:00:00 GMT+0300 (GMT+03:00)';
// info.event.end = 'Sun Jun 30 2024 03:00:00 GMT+0300 (GMT+03:00)';
{{--console.log('Event id:',info.event.id);--}}
{{--$.ajax({--}}
{{-- url: '/calendar/ID',--}}
{{-- method: 'POST',--}}
{{-- data: {--}}
{{-- id: info.event.id,--}}
{{-- resourceId: info.event.id,--}}
{{-- // start: startDate,--}}
{{-- // end: endDate,--}}
{{-- _token: '{{ csrf_token() }}'--}}
{{-- },--}}
{{-- success: function(response) {--}}
{{-- // Assuming the response contains new start and end dates--}}
{{-- var newStart = response.start;--}}
{{-- var newEnd = response.end;--}}
{{-- info.event.setStart(newStart);--}}
{{-- info.event.setEnd(newEnd);--}}
{{-- console.log('Event newstart:',newStart);--}}
{{-- console.log('Event newend:',newEnd);--}}
{{-- },--}}
{{-- error: function (xhr) {--}}
{{-- info.revert();--}}
{{-- }--}}
{{--});--}}
// Calculate and display the duration
if (info.event.start && info.event.end) {
console.log('Event start:',info.event.start);
console.log('Event end:',info.event.end);
var duration = moment(info.event.end).diff(moment(info.event.start), 'hours');
var durationEl = document.createElement('span');
durationEl.classList.add('event-duration');
durationEl.innerText = `(${duration} hrs)`;
titleEl = info.el.querySelector('.fc-title');
if (titleEl) {
titleEl.appendChild(durationEl);
} else {
var timeEl = document.createElement('div');
timeEl.classList.add('fc-title');
timeEl.appendChild(durationEl);
info.el.appendChild(timeEl);
}
}
console.log('Event ID:', info.event.id);
console.log('Event ID:', 222222);
},
dateClick: function (info) {
var selectedDate = info.dateStr;
var elements = document.querySelectorAll('.fc-daygrid-day[data-date="' + selectedDate + '"]');
elements.forEach(function (element) {
element.style.backgroundColor = 'lightgreen';
});
console.log('Event ID:', 111111);
},
eventDidMount: function (info) {
// Change background on hover
// console.log('Event ID:', element.style.backgroundColor);
let element = info.el;
let originalBackground = element.style.backgroundColor;
// console.log('Event ID:', element.style.backgroundColor);
element.addEventListener('mouseover', function () {
// console.log('Event ID:', element.style.backgroundColor);
element.style.backgroundColor = 'lightgreen';
});
element.addEventListener('mouseout', function () {
// console.log('Event ID:', element.style.backgroundColor);
element.style.backgroundColor = originalBackground;
});
},
drop: function (info) {
if ($('#drop-remove').is(':checked')) {
info.draggedEl.parentNode.removeChild(info.draggedEl);
}
},
eventReceive: function(info) {
var event = info.event;
// Get start and end dates
// var startDate = event.start.toISOString();
// var endDate = event.end ? event.end.toISOString() : startDate;
console.log('Event ID:', event.id);
//console.log('Resource ID:', event.getResources()[0].id);
// console.log('Start Date:', startDate);
// console.log('End Date:', endDate);
$.ajax({
url: '/calendar/update',
method: 'POST',
data: {
id: event.id,
resourceId: event.getResources()[0].id,
// start: startDate,
// end: endDate,
_token: '{{ csrf_token() }}'
},
success: function (response) {
alert(response.success);
calendar.refetchEvents();
},
error: function (xhr) {
info.revert();
}
});
},
eventDrop: function (event, delta, revertFunc) {
//console.log('Event ID:', event.event.id);
//console.log('Event ID:', event.event._def.resourceIds[0]);
$.ajax({
url: '/calendar/update',
method: 'POST',
data: {
id: event.event.id,
resourceId: event.event._def.resourceIds[0],
_token: '{{ csrf_token() }}'
},
success: function (response) {
alert(response.success);
},
error: function (xhr) {
revertFunc();
}
});
},
});
calendar.render();
$('.fc-event').mouseenter(function () {
$(this).addClass('fc-event-hover');
});
$('.fc-event').mouseleave(function () {
$(this).removeClass('fc-event-hover');
});
// // Initialize the external events
// $('#external-events .external-event').each(function () {
// // Store data so the calendar knows to render an event upon drop
// $(this).data('event', {
// title: $.trim($(this).text()), // Use the element's text as the event title
// stick: true // Maintain the event on the calendar after it is dropped
// });
//
// // Make the event draggable using jQuery UI
// $(this).draggable({
// zIndex: 999,
// revert: true, // Will cause the event to go back to its original position after the drag
// revertDuration: 0 // 0 means no animation
// });
//
// });
// Initialize the external events
$('#external-events .external-event').each(function () {
// Make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // Will cause the event to go back to its original position after the drag
revertDuration: 0, // 0 means no animation
// Use the helper function to create a clone that represents the event
helper: function () {
var title = $(this).text().trim();
return $('<div class="fc-event">').text(title);
},
// Pass the event data to FullCalendar on drag start
start: function (event, ui) {
var eventData = {
id: $(this).attr('data-id'),
title: $(this).text().trim(),
start: $(this).attr('data-start'),
end: $(this).attr('data-end'),
resourceId: $(this).attr('data-resource-id'),
description: $(this).attr('data-description'),
backgroundColor: window.getComputedStyle(this, null).getPropertyValue('background-color'),
borderColor: window.getComputedStyle(this, null).getPropertyValue('background-color'),
textColor: window.getComputedStyle(this, null).getPropertyValue('color')
};
// Store the event data on the dragged element
$(this).data('eventData', eventData);
}
});
});
});
//# sourceURL=pen.js
</script>`
my events data-start and data-end need read it in fullcaledar with fix thim but choose resource
`
Draggable Events
@foreach ($events as $event)
id }}”
data-id=”{{ $event->id }}”
data-title=”{{ $event->title }}”
data-start=”{{ $event->start }}”
data-end=”{{ $event->end }}”
data-resource-id=”{{ $event->resourceId }}”
data-description=”{{ $event->description }}”
style=”background-color: {{ $event->color }}; color: white;”>
{{ $event->title }}
@endforeach
remove after drop
</div>
</div>`
with thanks.