下面就给您详细讲解一下“jQWidgets jqxScheduler 视图属性”的攻略。
什么是jqxScheduler
jqxScheduler是一个javascript控件库，可以用来创建现代化的日程表和预定应用程序。它可以用于日程表应用程序，如会议安排、工作排班、预定合适的资源等。jqxScheduler是基于jQWidgets的，它是一个专业的UI控件库，提供了丰富的JavaScript控件和插件，可以帮助您快速创建交互式Web应用程序。
jqxScheduler的视图属性
jqxScheduler提供了几个视图类型，包括：月视图、周视图、日视图、时间线视图、资源视图等，每种视图类型都有自己的特点，可以根据不同的场景来选择不同的视图类型。
jqxScheduler的常用属性
- view: string：控件的视图类型，可以是‘dayView’、‘weekView’、‘monthView’、‘agendaView’或‘timelineView’，默认是“monthView”。
- date: Date：加载的日历的月份或日期。
- showLegend: boolean：在日程表下方显示一个表示颜色区域的图例。默认值为true。
- showToolbar: boolean：指示是否显示日历的工具栏。默认值为true。
jqxScheduler的视图设置
可以使用jqxScheduler属性中的视图对象设置日程表控件中的视图选项。例如，可以在周视图中设置预期的周天数和每天的工作时间。以下是可用于设置视图属性的视图类型：
-
Day View（每日视图）：将calendar的view属性设置为dayView，可以使用以下属性:
-
timeRuler: object，工作天的刻度线属性。
-
Week View （每周视图）：将calendar的view属性设置为dayView，可以使用以下属性：
-
numberOfWeeks: number，预期的周数。默认是1。
-
timeRuler: object，工作天的刻度线属性。
-
Month View （每月视图）：将calendar的view属性设置为dayView，可以使用以下属性：
-
numberOfMonths: number，预期的月数。默认值是1。
-
Agenda View （事项视图）：将calendar的view属性设置为dayView，可以使用以下属性：
-
appointmentHeight: number，每个应用程序的高度。默认值是40。
-
appointmentDataFields: object，包含每个预订数据的字段。
-
Timeline View （时间线视图）：将calendar的view属性设置为dayView，可以使用以下属性：
-
timeRuler: object，工作天的时间线属性。
- rowHeight: number，每个行的高度，默认值是40。
-
timelineDayOfWeekStart: number，时间线的工作开始日，从0开始到6（周日到周六）。默认值为0（周日）。
-
Resource View （资源视图）：将calendar的view属性设置为dayView，可以使用以下属性：
-
resources: object，表示要显示的资源。
这些都是比较常用的视图设置，可以根据需要设定，以下是两个示例说明。
示例一：创建周视图
以下是使用jqxScheduler控件创建一个周视图的示例代码：
<link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css">
<link rel="stylesheet" href="./jqwidgets/styles/jqx.light.css" type="text/css">
<script src="./jqwidgets/jqxcore.js"></script>
<script src="./jqwidgets/jqxdata.js"></script>
<script src="./jqwidgets/jqxdatetimeinput.js"></script>
<script src="./jqwidgets/jqxscheduler.js"></script>
<script src="./jqwidgets/jqxtooltip.js"></script>
<script>
$(document).ready(function () {
//准备数据
var appointments = new Array();
var appointment1 = {
id: 'id1',
description: 'description1',
location: 'location1',
subject: 'subject1',
calendar: 'calendar1',
start: new Date(2021, 7, 1, 9),
end: new Date(2021, 7, 1, 10, 30)
};
var appointment2 = {
id: 'id2',
description: 'description2',
location: 'location2',
subject: 'subject2',
calendar: 'calendar2',
start: new Date(2021, 7, 1, 11),
end: new Date(2021, 7, 1, 12, 30)
};
appointments.push(appointment1);
appointments.push(appointment2);
//初始化日程表控件
$('#scheduler').jqxScheduler({
date: new Date(2021, 7, 1),
width: '100%',
height: 700,
showLegend: true,
showToolbar: true,
views: [
{
type: 'weekView',
numberOfWeeks: 1
}
]
});
//加载数据
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('source', adapter);
});
</script>
<div id="scheduler"></div>
这个示例中使用了周视图，使用了“weekView”选项，numberOfWeeks为1。同时还定义了两个预订项，并绑定到控件中。
示例二：创建资源视图
以下是使用jqxScheduler控件创建一个资源视图的示例代码：
<link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css">
<link rel="stylesheet" href="./jqwidgets/styles/jqx.light.css" type="text/css">
<script src="./jqwidgets/jqxcore.js"></script>
<script src="./jqwidgets/jqxdata.js"></script>
<script src="./jqwidgets/jqxdatetimeinput.js"></script>
<script src="./jqwidgets/jqxscheduler.js"></script>
<script src="./jqwidgets/jqxtooltip.js"></script>
<script>
$(document).ready(function () {
//准备数据
var appointments = new Array();
var appointment1 = {
id: 'id1',
description: 'description1',
location: 'location1',
subject: 'subject1',
calendar: 'calendar1',
resourceId: 'resource1',
start: new Date(2021, 7, 1, 9),
end: new Date(2021, 7, 1, 10, 30)
};
var appointment2 = {
id: 'id2',
description: 'description2',
location: 'location2',
subject: 'subject2',
calendar: 'calendar2',
resourceId: 'resource2',
start: new Date(2021, 7, 1, 11),
end: new Date(2021, 7, 1, 12, 30)
};
appointments.push(appointment1);
appointments.push(appointment2);
//初始化日程表控件
$('#scheduler').jqxScheduler({
date: new Date(2021, 7, 1),
width: '100%',
height: 700,
showLegend: true,
showToolbar: true,
views: [
{
type: 'resourceView',
resources:
{
colorScheme: 'scheme05',
dataField: 'calendar',
source: new $.jqx.dataAdapter({
dataType: 'json',
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'text', type: 'string' },
{ name: 'color', type: 'string' }
],
localData: [
{ id: 'calendar1', text: 'My Calendar 1', color: '#F3C0AB' },
{ id: 'calendar2', text: 'My Calendar 2', color: '#FC8D62' }
]
})
}
}
]
});
//加载数据
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: 'resourceId', type: 'string' },
{ name: 'start', type: 'date' },
{ name: 'end', type: 'date' }
],
id: 'id',
localData: appointments
};
var adapter = new $.jqx.dataAdapter(source);
$('#scheduler').jqxScheduler('source', adapter);
});
</script>
<div id="scheduler"></div>
这个示例中使用了资源视图，type为“resourceView”。在视图对象下还定义了预期的日历资源和颜色方案。
到此，关于“jQWidgets jqxScheduler 视图属性”的攻略讲解就结束了，希望可以帮助到您。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQWidgets jqxScheduler 视图属性 - Python技术站
微信扫一扫 
支付宝扫一扫 