I am currently engaged in a small project aimed at:
- Reading data from a CSV file (such as employee names and shifts)
- Displaying this data on FullCalendar.
How can I incorporate the CSV result into this line of code: { id: 'a', title: 'Auditorium A' },
For example, is it possible to achieve this with: { id: data[0], title: data[1] }
Below is the script for reading the CSV file:
<script>
//Read CSV
$(document).ready(function() {
$.ajax({
type: "GET",
url: "data.txt",
dataType: "text",
success: function(data) {processData(data);}
});
});
function processData(allText) {
var allTextLines = allText.split(/\r\n|\n/);
var headers = allTextLines[0].split(',');
var lines = [];
for (var i=1; i<allTextLines.length; i++) {
var data = allTextLines[i].split(',');
if (data.length == headers.length) {
var tarr = [];
for (var j=0; j<headers.length; j++) {
tarr.push(headers[j]+":"+data[j]);
}
lines.push(tarr);
}
console.log(allText);
return allText[0];
}
}
Here is the code snippet related to FullCalendar that needs modification:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
height: '100%',
aspectRatio: 1.8,
editable: false, // enable draggable events
now: '2020-09-07',
scrollTime: '00:00', // undo default 6am scrollTime
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineThreeDays,timeGridWeek,dayGridMonth,listWeek'
},
initialView: 'resourceTimelineDay',
views: {
resourceTimelineThreeDays: {
type: 'resourceTimeline',
duration: { days: 3 },
buttonText: '3 days'
}
},
expandRows: true,
resourceAreaHeaderContent: 'Employees',
resources: [
{ id: 'a', title: 'Auditorium A' },
{ id: 'b', title: 'Auditorium B', eventColor: 'green' },
{ id: 'z', title: 'Auditorium Z' }
],
events: [
{ id: '1', resourceId: 'b', start: '2020-09-07T02:00:00', end: '2020-09-07T07:00:00', title: 'event 1' },
{ id: '2', resourceId: 'c', start: '2020-09-07T05:00:00', end: '2020-09-07T22:00:00', title: 'event 2' },
{ id: '3', resourceId: 'f', start: '2020-09-07T00:30:00', end: '2020-09-07T02:30:00', title: 'event 3' }
]
});
calendar.render();
});