jQWidgets jqxScheduler 渲染属性 - 程序员介绍

什么是 jQWidgets jqxScheduler 渲染属性？

jQWidgets jqxScheduler 是一个基于 jQuery 的事件日程表插件。它可以在 Web 应用程序中轻松地实现事件日程表的创建、管理和显示。渲染属性是该插件提供的一个重要特性，它允许程序员自定义 jQWidgets jqxScheduler 的外观和感觉。

jQWidgets jqxScheduler 的渲染属性有哪些？

jQWidgets jqxScheduler 的渲染属性包括但不限于以下几个部分：

日历和时间轴

日历和时间轴是 jQWidgets jqxScheduler 中最突出的信息。除了标准的月份日历视图之外，该插件还支持自定义日历和时间轴视图。如下所示：

scheduler.views = [
    '{ view: "dayView", type: "dayView", title: "Day" }',
    '{ view: "weekView", type: "weekView", title: "Week" }',
    '{ view: "monthView", type: "monthView", title: "Month" }',
    '{ view: "agendaView", type: "agendaView", title: "Agenda" }',
    '{ view: "timelineDayView", type: "timelineDayView", title: "Timeline Day" }',
    '{ view: "timelineWeekView", type: "timelineWeekView", title: "Timeline Week" }',
    '{ view: "timelineMonthView", type: "timelineMonthView", title: "Timeline Month" }'
];

事件显示

jQWidgets jqxScheduler 支持多种事件显示方式，包括不同的颜色、标签和图标。使用渲染属性可以轻松地自定义事件显示。

如下所示：

scheduler.appointments = [
    {
        id: "id1",
        location: "Sample Location",
        subject: "Sample Subject",
        calendar: "Sample Calendar",
        start: new Date(2019, 2, 1, 9, 0),
        end: new Date(2019, 2, 1, 11, 0),
        color: "#f03f16",
        label: "important",
        status: "busy",
        resourceId: "r1",
        tooltip: "Sample Tooltip",
        iconClass: "sample-icon"
    }
];

样式

jQWidgets jqxScheduler 的渲染属性还包括样式，允许您自定义插件的背景、字体、边框和边距等样式属性。

如下所示：

scheduler.resources = [
    {
        id: "r1",
        name: "Sample Resource",
        backgroundImage: "https://www.jqwidgets.com/images/scheduler/engineering-theme.png",
        borderColor: "#c9d7fd",
        hoverBorderColor: "#bfe6fb",
        backgroundColor: "#c9d7fd",
        color: "#000",
        position: "left"
    }
];

如何使用 jQWidgets jqxScheduler 的渲染属性？

使用 jQWidgets jqxScheduler 的渲染属性非常简单。您只需设置相应的属性，即可自定义插件的外观和感觉。

如下所示：

<link rel="stylesheet" href="jqx.base.css" type="text/css" />
<link rel="stylesheet" href="jqx.energyblue.css" type="text/css" />
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="jqx-all.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#scheduler").jqxScheduler(
        {
            theme: 'energyblue',
            width: '100%',
            height: 600,
            date: new $.jqx.date(),
            view: 'dayView',
            showToolbar: true,
            resources: [
                {
                    id: "r1",
                    name: "Sample Resource",
                    backgroundImage: "https://www.jqwidgets.com/images/scheduler/engineering-theme.png",
                    borderColor: "#c9d7fd",
                    hoverBorderColor: "#bfe6fb",
                    backgroundColor: "#c9d7fd",
                    color: "#000",
                    position: "left"
                }
            ],
            views: [
                '{ view: "dayView", type: "dayView", title: "Day" }',
                '{ view: "weekView", type: "weekView", title: "Week" }',
                '{ view: "monthView", type: "monthView", title: "Month" }',
                '{ view: "agendaView", type: "agendaView", title: "Agenda" }',
                '{ view: "timelineDayView", type: "timelineDayView", title: "Timeline Day" }',
                '{ view: "timelineWeekView", type: "timelineWeekView", title: "Timeline Week" }',
                '{ view: "timelineMonthView", type: "timelineMonthView", title: "Timeline Month" }'
            ],
            appointments: [
                {
                    id: "id1",
                    location: "Sample Location",
                    subject: "Sample Subject",
                    calendar: "Sample Calendar",
                    start: new Date(2019, 2, 1, 9, 0),
                    end: new Date(2019, 2, 1, 11, 0),
                    color: "#f03f16",
                    label: "important",
                    status: "busy",
                    resourceId: "r1",
                    tooltip: "Sample Tooltip",
                    iconClass: "sample-icon"
                }
            ]
        });
    });
</script>
<div id="scheduler"></div>

总结

jQWidgets jqxScheduler 的渲染属性是一个强大的特性，可以让您轻松地自定义插件的外观和感觉。使用渲染属性，您可以自定义日历和时间轴、事件显示和样式。而且，使用 jQWidgets jqxScheduler 的渲染属性非常简单，只需设置相应的属性即可自定义插件的外观和感觉。