博客

jQWidgets jqxScheduler 视图属性

  • Post category:jquery

下面是针对“jQWidgets jqxScheduler 视图属性”的详细讲解。本文将会对jqxScheduler 的可选视图属性进行逐一解析。示例代码将以日程管理为例进行说明。

视图属性

jqxScheduler用于显示不同视图来展示日程事件的信息。各种视图在实际开发中的应用场景不尽相同，因此需要了解视图属性这一重要内容。

常用的视图包括DayView、WeekView、MonthView等，每种视图都有自己的属性。其中DayView有dayOfWeekFormat、dayViewHeaderFormat、timeFormat等属性；WeekView具有firstDayOfWeek、weekHeaderFormat、timeFormat等属性；而MonthView则有monthCells、monthColumnHeaderFormat、monthRows等属性。

接下来我们来详细解析各种视图的可选属性。

DayView属性

DayView包含以下可选属性：

  • dayOfWeekFormat：该属性决定DayView内日期列格子上的日期格式。
{ view: 'dayView', secondsPerPixel: 0.0013, dayOfWeekFormat: 'shortest', 
daysInterval: 1, height: 700, appointments:source, showLegend:true};
  • dayViewHeaderFormat：该属性决定DayView的日程头部日期格式。
{ view: 'dayView', secondsPerPixel: 0.0013, dayOfWeekFormat: 'shortest', 
dayViewHeaderFormat: 'yyyy年MM月dd日 dddd', daysInterval: 1, height: 700, 
appointments:source, showLegend:true};
  • timeFormat：该属性决定DayView内定位点、日程格子的时间格式。
{ view: 'dayView', secondsPerPixel: 0.0013, dayOfWeekFormat: 'shortest', 
dayViewHeaderFormat: 'yyyy年MM月dd日',timeFormat:'hh:mm tt',
daysInterval: 1, height: 700, appointments:source, showLegend:true};

WeekView属性

WeekView包含以下可选属性：

  • firstDayOfWeek：该属性决定周视图中每周开始的日期，默认为星期日。
{ view: 'weekView', firstDayOfWeek:1,weekHeaderFormat:'yyyy年MM月dd日 dddd', 
secondsPerPixel: 0.0013, timeFormat:'hh:mm tt', daysInterval: 7, 
height: 700, appointments:source, showLegend:true};
  • weekHeaderFormat：该属性决定WeekView内日期列格的日期格式。
{ view: 'weekView', firstDayOfWeek:1,weekHeaderFormat:'yyyy年MM月dd日 dddd', 
secondsPerPixel: 0.0013, timeFormat:'hh:mm tt', daysInterval: 7, 
height: 700, appointments:source, showLegend:true};
  • timeFormat：该属性决定WeekView内定位点、日程格子的时间格式。
{ view: 'weekView', firstDayOfWeek:1,weekHeaderFormat:'yyyy年MM月dd日 dddd', 
secondsPerPixel: 0.0013, timeFormat:'hh:mm tt', daysInterval: 7, 
height: 700, appointments:source, showLegend:true};

MonthView属性

MonthView包含以下可选属性：

  • monthCells：该属性决定MonthView中每个日期格子的高度和宽度。
{ view: 'monthView', monthCells:[{height:70,width:250}], monthRows:4, 
monthColumnHeaderFormat:'yyyy年MM月', height: 700, appointments:source};
  • monthColumnHeaderFormat：该属性决定MonthView中月份显示的日期格式。
{ view: 'monthView', monthCells:[{height:70,width:250}], monthRows:4, 
monthColumnHeaderFormat:'yyyy年MM月', height: 700, appointments:source};
  • monthRows：该属性决定MonthView中所显示的行数。
{ view: 'monthView', monthCells:[{height:70,width:250}], monthRows:4, 
monthColumnHeaderFormat:'yyyy年MM月', height: 700, appointments:source};

以上是DayView、WeekView、MonthView中的可选属性，未在此列出的属性还有很多，详细的API文档可以在jQWidgets官网找到。

DayView示例

如下所示，这是一份完整的基于DayView的日程管理应用示例代码：

# 简单的日程管理应用

## DayView

{ view: 'dayView', secondsPerPixel: 0.0013, dayOfWeekFormat: 'shortest', 
dayViewHeaderFormat: 'yyyy年MM月dd日 dddd',timeFormat:'hh:mm tt',
daysInterval: 1, height: 700, appointments:source, showLegend:true};

在浏览器中运行上述代码，即可通过DayView展示日程安排，并显示对应的日期格式、时间格式和日程头部日期格式。

WeekView示例

如下所示，这是一份完整的基于WeekView的日程管理应用示例代码：

# 简单的日程管理应用

## WeekView

{ view: 'weekView', firstDayOfWeek:1,weekHeaderFormat:'yyyy年MM月dd日 dddd', 
secondsPerPixel: 0.0013, timeFormat:'hh:mm tt', daysInterval: 7, 
height: 700, appointments:source, showLegend:true};

类似DayView，从上述代码可以看到基于WeekView的日程管理应用。除了周的日期格式和时间格式不同外，其他属性基本保持一致。

好了，以上就是对于“jQWidgets jqxScheduler 视图属性”的完整攻略。

Tags: