FullCalendar - Display users work schedule from database data - fullcalendar

Question

I have a Ruby on Rails project that i'm currently working on that will schedule assigned work tickets for Technicians based on their availability and daily schedule using Full Calendar. I currently have several technicians schedules (start/stop times) saved in my Postgres database ready to be pulled and hopefully displayed into FullCalendar. The plan is for the Calendar to render the imported schedule and for the available times that a technician is working will be where I would like an event to only be placed and for the other areas in which they're not available to work I would like them to be greyed/darkened out.
So Far I have setup in an initial basic calendar and have been playing around with the eventConstraint option but that does not give the user any visual feedback on where events are allowed to be placed. This is what my current set up and technician schedules table looks like.
create_table "technician_schedules", force: :cascade do |t|
t.datetime "start_time"
t.datetime "end_time"
t.string "work_type"
t.integer "technician_id"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
end
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction', 'bootstrap' ],
themeSystem: 'bootstrap',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultView: 'timeGridWeek',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
businessHours: true,
eventConstraint: {
startTime: '2019-09-04T10:00:00',
endTime: '2019-09-05T20:00:00'
},
events: [
{
id: 999,
title: 'event',
start: new Date(2019, 9, 1)
},
],
windowResize: function(view) {
var current_view = view['name'];
var expected_view = $(window).width() > 576 ? 'timeGridWeek' : 'timeGridDay';
if (current_view !== expected_view) {
calendar.changeView(expected_view);
}
}
});
calendar.render();
});
I am still very new to FullCalendar and learning and I am not sure if eventConstraint would be the best option, nor am I familiar with how best to render pre planned schedules from my database. How do I best display a an imported work schedule with unavailable technician times greyed/darkened out with the other times being available for event assignment? Any help would be greatly appreciated. Thanks