Connect MySQL to Fullcalendar - mysql

Question

Good day everyone.
I try to feed resources from MySQL db to FullCalendar app. The example in its official docs uses PHP script and effectively all examples I found here also utilize PHP. I just started learning web development and haven't touched PHP and wonder if it's possible to tell the calendar to fetch data from db using node.js and EJS. Here's what I've accomplished so far (please be empathic and forbearing with my mistakes):
In app.js file I put a connection to MySQL, then in GET route it queries data from db and converts it to JSON object (resources).
app.js renders scheduler.ejs and I assume that JSON data is stored in resourcesFeed.
app.js
var express = require('express'),
app = express(),
PORT = process.env.PORT || 3000,
bodyParser = require('body-parser'),
mysql = require('mysql');
app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/node_modules'));
app.use(bodyParser.urlencoded({extended: true}));
app.set('view engine', 'ejs');
// create connector to DB
var con = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root',
database: 'gdp_scheduler'
});
// connect to DB
con.connect(function(err) {
if (err) throw err;
console.log('Connection to DB established')
});
app.get('/scheduler', function(req,res){
// query the DB
con.query('SELECT id, given_name, level, color FROM resources',
function (err, getResources) {
if (err) throw err;
// convert to JSON
resources = JSON.parse(JSON.stringify(getResources));
console.log(resources);
return resources;
});
// render scheduler page
res.render('scheduler', {resourcesFeed: resources});
});
app.listen(PORT, () => {
console.log('Server is up on port:' ,PORT);
});
scheduler.ejs
<%- include("partials/header") %>
<div class="container-fluid">
<!-- Header -->
<div>
<h1>GDP Projects Timeline</h1>
</div>
<div>
<div id='calendar'></div>
</div>
</div>
<%- include("partials/footer") %>
The scheduler.ejs header has a link to scheduleSetup.js file.
In scheduleSetup.js file, I try to make the calendar to fetch resources from resourcesFeed. And it doesn't work.
scheduleSetup.js
document.addEventListener('DOMContentLoaded', function() {
//Initialize calendar
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source', //hide lices=nc=se warning
plugins: [ 'resourceTimeline', 'bootstrap', 'interaction' ], //connect plugins to page
defaultView: 'resourceTimelineMonth', //define timeline view
editable: true, //enable draggable events
droppable: true, //it allows things to be dropped onto the container
resourceGroupField: 'level', //grouping
resources:
'resourcesFeed',
// [
// { id: 2, title: 'John', level: 'Personnel', color: null },
// { id: 3, title: 'TEST', level: 'Projects', color: 'red' }
// ],
resourcesInitiallyExpanded: true, //the way how resources show up
events: {
url: '/sources/events.json',
}, //link to event json file
defaultTimedEventDuration: '24:00', //deafult event duration
weekNumberCalculation: 'ISO', //first day of week Monday
resourceAreaWidth: '10%', //resource column width
resourceLabelText: 'Projects/Personnel', //resource label
//header layout
header: {
left: 'promptProject today prev,next',
center: 'title',
right: 'resourceTimelineMonth, resourceTimelineYear,'
},
//footer
footer: true,
footer: {
left: 'promptPersonnel'
},
height: 'auto', //calendar window size (including header and ffoter)
//text on standard buttons
buttonText: {
today: 'Today',
month: 'Month',
year: 'Year'
},
//create custom buttns
customButtons: {
promptProject: {
text: 'Add project',
click: function() {
var title = prompt('Project name');
if (title) {
calendar.addResource({
title: title,
level: "Projects"
});
}
}
},
promptPersonnel: {
text: 'Add personnel',
click: function() {
var name = prompt('Name');
if (name) {
calendar.addResource({
title: name,
level: "Personnel"
});
}
}
}
}
});
calendar.render();
});
I try to comprehend the general sequence of how data is transmitted back and forth between backend and client-side, and what methods are used for this, however apparently have no clear picture yet. Any suggestions, tips, and help would be very much appreciated.
Thank you