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

时间:2019-09-10 01:17:37

标签: fullcalendar fullcalendar-scheduler

我有一个正在进行的Ruby on Rails项目,该项目将根据技术人员的可用性和使用“完整日历”的每日计划来安排分配给他们的工作票。我目前在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

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

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

0 个答案:

没有答案