Как использовать FullCalendar resourceTimeGridDay в версии 4.3.1? - PullRequest
Новая
       17

Как использовать FullCalendar resourceTimeGridDay в версии 4.3.1?

1 голос
/ 05 февраля 2020

используя плагин resourcetimegrid, но работает только тогда, когда я использую defaultView: 'resourceDayGridDay' и точно показывает только день без часов. И я хочу, чтобы пользователь resourceTimeGridDay мог видеть часы.

Этот код работает для resourceDayGridDay, но часы не отображаются. 

  var calendar = new FullCalendar.Calendar(calendarEl, {
            schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
            plugins: ['interaction', 'resourceDayGrid', 'resourceTimeGrid'],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'resourceDayGridDay'
            },
            defaultView: 'resourceDayGridDay',
            resources: [
                { id: 'a', title: 'Rampa 1' },
                { id: 'b', title: 'Rampa 2', eventColor: 'green' },
                { id: 'c', title: 'Rampa 3', eventColor: 'orange' },
                { id: 'd', title: 'Rampa 4', eventColor: 'red' },
                { id: 'e', title: 'Rampa 5', eventColor: 'red' },
                { id: 'f', title: 'Rampa 6', eventColor: 'red' },
                { id: 'g', title: 'Rampa 7', eventColor: 'red' },
                { id: 'h', title: 'Rampa 8', eventColor: 'red' }
            ],
            events: [
                { id: '1', resourceId: 'b', start: '2020-02-05T02:00:00', end: '2020-02-05T07:00:00', title: 'event 1' },
                { id: '2', resourceId: 'c', start: '2020-02-05T05:00:00', end: '2020-02-05T22:00:00', title: 'event 2' },
                { id: '3', resourceId: 'd', start: '2020-02-05', end: '2020-02-05', title: 'event 3' },
                { id: '4', resourceId: 'a', start: '2020-02-05T03:00:00', end: '2020-02-05T08:00:00', title: 'event 4' },
                { id: '5', resourceId: 'b', start: '2020-02-05T00:30:00', end: '2020-02-05T02:30:00', title: 'event 5' }

            ],
            selectable: true,
            editable: true,
            nowIndicator: true,
            minTime: "06:00:00",
            maxTime: "30:00:00",
            droppable: true
        });

        calendar.render();
    };

Когда я изменяю defaultView на: ' resourceTimeGridDay '

throws: TypeError: Невозможно получить свойство' ResourceDayGrid 'с неопределенной или нулевой ссылкой 

at ResourceTimeGridView (http://localhost/App/Scripts/packages/resource-timegrid/main.js:146:17)

  var calendar = new FullCalendar.Calendar(calendarEl, {
            schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
            plugins: ['interaction', 'resourceDayGrid', 'resourceTimeGrid'],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'resourceTimeGridDay'
            },
            defaultView: 'resourceTimeGridDay',
            resources: [
                { id: 'a', title: 'Room 1' },
                { id: 'b', title: 'Room 2', eventColor: 'green' },
                { id: 'c', title: 'Room 3', eventColor: 'orange' },
                { id: 'd', title: 'Room 4', eventColor: 'red' },
                { id: 'e', title: 'Room 5', eventColor: 'red' },
                { id: 'f', title: 'Room 6', eventColor: 'red' },
                { id: 'g', title: 'Room 7', eventColor: 'red' },
                { id: 'h', title: 'Room 8', eventColor: 'red' }
            ],
            events: [
                { id: '1', resourceId: 'b', start: '2020-02-05T02:00:00', end: '2020-02-05T07:00:00', title: 'event 1' },
                { id: '2', resourceId: 'c', start: '2020-02-05T05:00:00', end: '2020-02-05T22:00:00', title: 'event 2' },
                { id: '3', resourceId: 'd', start: '2020-02-05', end: '2020-02-05', title: 'event 3' },
                { id: '4', resourceId: 'a', start: '2020-02-05T03:00:00', end: '2020-02-05T08:00:00', title: 'event 4' },
                { id: '5', resourceId: 'b', start: '2020-02-05T00:30:00', end: '2020-02-05T02:30:00', title: 'event 5' }

            ],
            selectable: true,
            editable: true,
            nowIndicator: true,
            minTime: "06:00:00",
            maxTime: "30:00:00",
            droppable: true
        });

        calendar.render();
    };

Мои сценарии в BundleConfig.cs для JS

                "~/Scripts/packages/core/main.js",
                "~/Scripts/packages/daygrid/main.js",
                "~/Scripts/packages/interaction/main.js",
                "~/Scripts/packages/timegrid/main.js",
                //"~/Scripts/packages/list/main.js",

                "~/Scripts/packages/resource-common/main.js",
                "~/Scripts/packages/resource-timegrid/main.js",
                "~/Scripts/packages/resource-daygrid/main.js"

и CSS

                "~/Scripts/packages/core/main.css",
                "~/Scripts/packages/daygrid/main.css",
                "~/Scripts/packages/timegrid/main.css",
                //"~/Scripts/packages/list/main.css",
                "~/Scripts/packages/external-events/external-events.css"

Использование: fullcalendar-4.3.1.zip

1 Ответ

0 голосов
/ 13 февраля 2020

Просто переместите "~/Scripts/packages/resource-daygrid/main.js" выше "~/Scripts/packages/resource-timegrid/main.js" в BundleConfig.cs, я думаю, поэтому он загружается первым.

Ошибка жалуется, что resourceTimeGrid не может найти resourceDayGrid (от которого это зависит). Это имело бы смысл, если resourceDayGrid загружается позже.

Таким образом, вы получите 

...
"~/Scripts/packages/resource-common/main.js",
"~/Scripts/packages/resource-daygrid/main.js"
"~/Scripts/packages/resource-timegrid/main.js",
...