Reputation: 51
I have a problem with updating an event in FullCalendar v5 with a modal.
I have tried my best to find a solution, but unfortunately I have failed.
The first part is for opening and closing the modal, then there is some data for default event.
and reading event from array then when you click on a day or select more than one day an modal will open and after you click on submit data of event will add to calendar in this part i want to add a part when i click on an event a modal open and i can to edit an event
$(document).ready(function() {
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
$("#open").click(function() {
modal.style.display = "block";
});
// When the user clicks on <span> (x), close the modal
$("span").click(function() {
modal.style.display = "none";
$('#EventT').val('');
});
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
const myEvents = {
title: "event5",
start: '2022-08-21',
end: '2022-08-29'
}
var myEvent = [{
id: 'eve',
title: 'event1',
start: '2022-08-21'
},
{
title: 'event2',
start: '2010-01-05',
end: '2010-01-07'
},
{
title: 'event3',
start: '2010-01-09T12:30:00',
},
{
title: myEvents.title,
start: myEvents.start,
end: myEvents.end,
}
];
var localeSelectorEl = document.getElementById('locale-selector');
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
selectable: true,
nowIndicator: true,
selectMirror: true,
select: function(info) {
var modal = document.getElementById("myModal");
document.getElementById("StartD").value = info.startStr;
document.getElementById("EndD").value = info.endStr;
modal.style.display = "block";
calendar.unselect()
},
dateClick: function(info) {
var modal = document.getElementById("myModal");
modal.style.display = "block";
document.getElementById("StartD").value = info.dateStr;
document.getElementById("EndD").value = info.dateStr;
},
eventClick: function(info) {
var modal = document.getElementById("myModal");
modal.style.display = "block";
document.getElementById("EventT").value = info.event.title;
document.getElementById("StartD").value = info.event.startStr;
// document.getElementById("EndD").value = info.event.endStr;
var ddd = info.event.endStr;
if (ddd.length === 0) {
document.getElementById("EndD").value = info.event.startStr;
} else {
document.getElementById("EndD").value = info.event.endStr;
}
},
editable: true,
dayMaxEvents: true,
eventSources: [{
events: myEvent,
}
]
});
calendar.render();
$("#submit").on("click", function(event) {
var title = $("#EventT").val();
var start = $("#StartD").val();
var end = $("#EndD").val();
modal.style.display = "none";
if (title) {
calendar.addEvent({
title: title,
start: start,
end: end,
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Upvotes: 1
Views: 2401
Reputation: 114
You can update event using setProp and/or setExtendedProp options when "save" button clicked on your "edit modal".
forexample:
calendar1 = new FullCalendar.Calendar(calendar-element, {
height: 650,
initialView: 'timeGridDay',
slotMinTime: '08:00:00',
eventClick: function(eventInfo){
eventInfo.event.setProp('title', 'This is a title');
eventInfo.event.setStart('2022-12-01 15:00:00');
eventInfo.event.setEnd('2022-12-01 16:00:00');
}
}
Upvotes: 2