JQxScheduler如何在时间轴视图上垂直滚动? [英] JQxScheduler How can I scroll vertically on the timeline view?

问题描述

我正在寻找一些基本的调度程序，可以在其中扩展自己的自定义功能. JQxScheduler看起来非常简单且重量轻.我试图摆弄时间轴视图.问题是我只看到它们具有水平滚动. 这是一个示例.我看过

I am looking for some basic schedulers where I can extend my own custom functionality. JQxScheduler looks pretty simple and light weight. I am trying to fiddle around with the timeline view's. The problem is I only see that they have horizontal scrolling. Here is an example. I have looked at the API reference, but nothing stand's out to me.

通过单击小箭头而不是滚动显示更多约会的方式不是非常用户友好.如何自定义此项，以便我可以垂直滚动?

The way it show's more appointments by clicking on a little arrow instead of scrolling isn't very user friendly. How can I customize this so I can scroll vertically?

我需要这个是因为我想在左侧创建一个树形结构，以将垂直滚动与时间轴视图同步.

I need this because I want to create a tree structure on the left hand side to sync vertical scrolling with the timeline view.

如果链接在这里不起作用，则是控件的代码.

Incase the links don't work here is the code for the control.

$(document).ready(function () {
    var appointments = new Array();

    var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        location: "",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2015, 10, 23, 9, 0, 0),
        end: new Date(2015, 10, 23, 16, 0, 0)
    }

    var appointment2 = {
        id: "id2",
        description: "",
        location: "",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2015, 10, 24, 10, 0, 0),
        end: new Date(2015, 10, 24, 15, 0, 0)
    }

    var appointment3 = {
        id: "id3",
        description: "",
        location: "",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2015, 10, 27, 11, 0, 0),
        end: new Date(2015, 10, 27, 13, 0, 0)
    }

    var appointment4 = {
        id: "id4",
        description: "",
        location: "",
        subject: "New Projects Planning",
        calendar: "Room 2",
        start: new Date(2015, 10, 23, 16, 0, 0),
        end: new Date(2015, 10, 23, 18, 0, 0)
    }

    var appointment5 = {
        id: "id5",
        description: "",
        location: "",
        subject: "Interview with James",
        calendar: "Room 1",
        start: new Date(2015, 10, 25, 15, 0, 0),
        end: new Date(2015, 10, 25, 17, 0, 0)
    }

    var appointment6 = {
        id: "id6",
        description: "",
        location: "",
        subject: "Interview with Nancy",
        calendar: "Room 4",
        start: new Date(2015, 10, 26, 14, 0, 0),
        end: new Date(2015, 10, 26, 16, 0, 0)
    }
    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    appointments.push(appointment4);
    appointments.push(appointment5);
    appointments.push(appointment6);


    // prepare the data
    var source =
    {
        dataType: "array",
        dataFields: [
            { name: 'id', type: 'string' },
            { name: 'description', type: 'string' },
            { name: 'location', type: 'string' },
            { name: 'subject', type: 'string' },
            { name: 'calendar', type: 'string' },
            { name: 'start', type: 'date' },
            { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    var adapter = new $.jqx.dataAdapter(source);
    $("#scheduler").jqxScheduler({
        date: new $.jqx.date(2015, 11, 23),
        width: 850,
        height: 600,
        source: adapter,
        showLegend: false,
        ready: function () {
            $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
        },
        resources:
        {
            colorScheme: "scheme05",
            dataField: "calendar",
            source:  new $.jqx.dataAdapter(source)
        },
        appointmentDataFields:
        {
            from: "start",
            to: "end",
            id: "id",
            description: "description",
            location: "place",
            subject: "subject",
            resourceId: "calendar"
        },
        view: 'timelineWeekView',
        views:
        [
            'timelineDayView',
            'timelineWeekView',
            'timelineMonthView'
        ]
    });
});`

推荐答案

您可以根据要显示的约会数量来更改初始高度.这样，时间轴视图将能够容纳所有这些对象而无需向下箭头.

You can change the initial height based on number of appointments you want to show. That way timeline view will be able to accommodate all of them without down arrow.

这篇关于JQxScheduler如何在时间轴视图上垂直滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！