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

Question

我在我的应用程序中使用全日历和调度angular2程序。

作为“指令”，我使用primeng方法从这里包装调度程序。

在日视图中，我可以垂直显示资源并水平显示小时- 这没关系。

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

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

谢谢。

代码片段：

零件：

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

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

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

好处是这对其他观点没有改变影响

Answer 2

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

贝娄是我的解决方案：
在initOptions我header以这种方式配置：

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

注意：我使用了日程表而不是日程周。

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

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

/*.properties...*/
slotDuration: string;

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

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

结果

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