I am working on an appointment system where you can select multiple dates in a month and then submit it as data base as an array. When you click on a date in fullcalender,
You will see on a eg 20-03, 24-03, 25-03 depending on the number of dates selected
On posting it, to database, it will be date=[20-03, 24-03, 25-03]
The problem is that when i click on date, it is not organized into array and it is not formatted.
` <div id='calendar'></div>
<label for="dates">Dates</label>
<input name="date" value= readonly>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.4/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
start: 'title',
center: '',
end: ''
},
initialView: 'dayGridMonth',
selectable: true,
dateClick: function(info) {
if(selected.includes(info.dateStr)){
selected.pop(info.dateStr);
}
else{
selected.push(info.dateStr);
}
document.getElementById("dates").value =selected;
},
}
});
document.getElementById('month').addEventListener('change', function() {
var date = document.getElementById('month').value;
console.log(date);
calendar.gotoDate( date );
});
calendar.render();
});
</script>`
i have tried to use fullcalender ->formate() to formate selected date, but it doesnt work. I tried to use moment().formate(), it doesnt work. I have added selected to fullcalender but i cant select or deselect multiple dates
