全日历周视图 - 显示资源而不是时间

Question

我在 angular2 应用程序中使用 fullcalendar 和 scheduler。

作为 "directive"，我使用 primeng 方法包装调度程序 from here。

在日视图中，我可以垂直显示资源，水平显示小时 - 这没问题.

当我切换到 weekView 时，我需要以相同的方式（垂直）和 week 显示 Resources天（水平）。实际上我有天小时（垂直）和工作日（水平）。

有人可以指导我如何实现这一点。（对于 WeekView 垂直显示资源和水平显示工作日）。

谢谢。

代码片段：

分量：

export class SchedulerComponent implements OnInit {

    events: any;
    resources: any;
    header: any;

    resourceText: string;
    eventBgColor: string;

    height: number;
    contentHeight: number;
    resourceAreaWidth: number; 
    eventStartEditable: boolean;
    eventDurationEditable: boolean;
    dragRevertDuration: boolean;
    defaultView: string;

    ngOnInit() {
        this.initResources();
        this.initEvents();
        this.initOptions();
    }

    initOptions() {
        this.header = {
            left: 'today prev,next',
            center: 'title',
            right: 'timelineDay,agendaWeek,month'                
        };

        this.resourceText = 'Rooms';
        this.resourceAreaWidth = 250;

        this.eventBgColor = 'DeepSkyBlue';

        this.height = 25 * this.resources.length;
        this.contentHeight = 25 * this.resources.length + 290;
        this.eventStartEditable = true;
        this.eventDurationEditable = true;
        this.dragRevertDuration = false;
        this.defaultView = "timelineDay";
    }
}

Html 模板：

<schedule [header]="header"
           [resources]="resources"
           [events]="events"
           [resourceLabelText]="resourceText"
           [eventBackgroundColor]="eventBgColor"

           [contentHeight]="contentHeight"
           [resourceAreaWidth]="resourceAreaWidth"
           [eventStartEditable]="eventStartEditable"
           [eventDurationEditable]="eventDurationEditable"
           [dragRevertDuration]="dragRevertDuration"
           [defaultView]="defaultView"

          >

Answer 1

我想出了如何自定义视图。（我不确定这是最好的方法。欢迎您提出其他方法。）

下面是我的解决方案：
在 initOptions 中，我以这种方式配置 header：

this.header = {
            left: 'today prev,next',
            center: 'title',
            right: 'timelineDay,timelineWeek,month'                
        };

注意：我使用了 timelineWeek[= 而不是 agendaWeek 49=].

此外，这还不能满足我的需求。有必要使 slotDuration 等于 24 小时。

在我的组件中，我添加了字段 slotDuration，并在 initOptions 方法中对其进行了初始化。

/*.properties...*/ slotDuration: string; /*.initOptions..*/ this.slotDuration = '24:00:00';

我将这一行添加到我的 html 模板中：[slotDuration]="slotDuration"

结果

注：使用等于24小时的slotDuration会影响DayView。实际上，我将研究如何更改 ViewSwitch 事件上的 slotDuration，以使其等于 DayView 的 1 小时和 [=24 小时 WeekView.

Answer 2

作为信息性回复，我通过在我的日历设置代码中添加以下内容来实现相同的视图：

        header: {
            left: 'today prev,next',
            center: 'title',
            right: 'timelineMyWeek,timelineMonth'
        },
        defaultView: 'timelineMyWeek',
        views: {
            timelineMyWeek: {
                type: 'timelineWeek',
                slotDuration: '24:00:00'
            },
        },

好处是这对其他视图没有改变影响

全日历周视图 - 显示资源而不是时间

fullcalendar week view - show resources instead of hours

angular

fullcalendar

fullcalendar-scheduler

谢谢。