Question

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

作为＆＃34;指令＆＃34;我使用 primeng 方法来包装调度程序from here。

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

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

有人可以指导我如何实现这一点。（对于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

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

        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'                
        };

注意：而不是 agendaWeek 我使用 timelineWeek 。

另外，这还不足以满足我的需求。必须使 slotDuration 与24小时相等。

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

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

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

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

结果

注意： 使用等于24小时的 slotDuration 会影响 DayView 。实际上，我将调查如何更改ViewSwitch事件的 slotDuration ，以使其与 DayView 的1小时相同，并且 WeekView

fullcalendar周视图 - 显示资源而不是小时

感谢。

2 个答案: