博客

jQWidgets jqxScheduler addAppointment()方法

  • Post category:jquery

下面是关于jQWidgets jqxScheduler组件的addAppointment()方法的详细攻略。

addAppointment()方法

addAppointment()方法用于向日程表中添加一个新的约会。其函数原型如下：

addAppointment(appointment: any, updateApp?: boolean): void

其中，

  • appointment是一个约会对象，包含了这个约会的所有属性；
  • updateApp是一个可选的参数，表示添加完约会后是否需要更新UI。默认值为true，即需要更新。

appointment对象

appointment对象是一个包含约会信息的JSON对象，它的属性如下：

属性 类型 说明
id number 约会ID，可以用于定位和管理某一个约会
description string 约会描述
location string 约会位置
subject string 约会标题
calendar string 日程表的名称，如果存在多个日程表可以通过该属性指定该约会要加入哪个日程表中
start string 约会的开始时间，格式为”yyyy-MM-dd HH:mm:ss”
end string 约会的结束时间，格式为”yyyy-MM-dd HH:mm:ss”
resource string 资源的名称，如果有多个资源（如会议室）可以指定该约会所占用的资源
readOnly boolean 是否为只读约会，默认为false，即可编辑的约会
draggable boolean 约会是否支持拖拽，默认为true
resizable boolean 约会是否支持缩放，默认为true
status string 约会状态，可以为”busy”、”free”、”tentative”和”outOfOffice”中的任意一个
timeZone string 约会所在时区，如果为空则默认使用本地时区
recurrence boolean 是否为重复约会，默认为false，即非重复约会
recurringRule string 重复约会的规则，详见后面的说明
exceptionDates string 重复约会中需要排除的日期，详见后面的说明
color string 约会的颜色，可以是一个CSS颜色值，也可以是一个渐变色等
backgroundColor string 约会的背景颜色，可以是一个CSS颜色值，也可以是一个渐变色等
borderColor string 约会的边框颜色，可以是一个CSS颜色值，也可以是一个渐变色等
backgroundRepeat string 约会背景的重复方式
backgroundPosition string 约会背景的位置
backgroundOpacity string 约会背景的透明度
opacity string 约会的透明度，从0到1，可以使用小数
tooltip string 鼠标移动到约会上时显示的提示信息
hidden boolean 约会是否隐藏，默认为false，即不隐藏

备注：

  • appointment中的大部分属性都是字符串类型，但是有一些特殊的属性，比如status、readOnly、draggable等，它们的类型是boolean或者enum类型，具体的值需要参考文档说明；
  • appointment中的date、start、end、exceptionDates等日程时间相关属性的默认格式均为”yyyy-MM-dd HH:mm:ss”，需要根据实际情况进行转换；
  • color、backgroundColor、borderColor等属性可以使用CSS颜色值、渐变色等方式进行设置。具体方式参考文档说明。

更新UI

当我们向日程表中添加约会时，通常会希望新添加的约会能够立即在UI中显示出来。这时候就需要用到updateApp参数。如果updateApp为true，则添加约会后会自动更新UI，否则不更新。

实例1：添加一个简单的约会

下面是一个简单的例子，演示如何使用addAppointment()方法添加一个简单的约会：

var appointment = {
    id: 1,
    description: "要开会哦",
    location: "A会议室",
    subject: "项目汇报",
    start: "2021-07-01 10:00:00",
    end: "2021-07-01 11:00:00"
};
$('#scheduler').jqxScheduler('addAppointment', appointment);

在这个例子中，我们创建了一个appointment对象，包含了要添加的约会信息。然后调用了addAppointment()方法，将这个约会添加到了id为”scheduler”的jqxScheduler对象中。

实例2：添加一个重复约会

如果我们需要向日程表中添加一个重复约会，该怎么做呢？下面是一个例子，演示如何添加一个每周重复的约会：

var appointment = {
    id: 1,
    description: "药店采购",
    location: "B城药店",
    subject: "库存采购",
    start: "2021-07-01 10:00:00",
    end: "2021-07-01 11:00:00",
    recurrence: true,
    recurringRule: {
        frequency: "weekly",
        startDate: "2021-07-01",
        weeksInterval: 1
    },
    exceptionDates: [
        "2021-07-08"
    ]
};
$('#scheduler').jqxScheduler('addAppointment', appointment);

在这个例子中，我们创建了一个appointment对象，设置了recurrence为true，表示这是一个重复约会。同时，我们还设置了recurringRule对象，规定了约会每周重复一次，从2021年7月1日开始，每隔一周重复一次。我们还设置了exceptionDates数组，表示在重复约会中要排除2021年7月8日这一天。

经过以上介绍，我们详细讲解了jQWidgets jqxScheduler组件的addAppointment()方法的使用。希望这些信息能对你有所帮助。

Tags: