FullCalendar-显示数据库数据中的用户工作计划

我有一个RubyonRails项目，我目前正在进行该项目，该项目将根据技术人员的可用性和使用完整日历的每日日程安排分配给他们的工作票。我目前有几个技师的时间表（开始/停止时间）保存在我的Postgres数据库中，随时可以拉出来，希望能显示在FullCalendar中。该计划用于日历，以呈现导入的时间表，对于技师正在工作的可用时间，我只希望将事件放置在其中，对于他们无法工作的其他区域，我希望将其灰显/暗显

到目前为止，我已经在一个初始的基本日历中进行了设置，并一直在使用eventConstraint选项，但这并没有给用户任何关于允许放置事件的位置的视觉反馈。这就是我当前的设置和技师计划表

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

---

我对FullCalendar和learning还很陌生，我不确定eventConstraint是否是最好的选择，也不知道如何最好地从数据库中呈现预先计划的时间表。如何最好地显示导入的工作计划，使不可用的技师时间变灰/变暗，而其他时间可用于事件分配？任何帮助都将不胜感激。谢谢

如果希望视觉表示与事件约束匹配，请参见。如果你每周都有固定的工作时间，那就行了。如果您不是这样，那么您可能会发现后台事件更有用（特别是反向版本）：根据您的要求，validRange/visibleRange设置也可能是替代方法。

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();
});