eventConstraint (Properties)

사용자가 일정(Event)을 특정 범위 내에서만 마우스로 Dragging, Resizing 하여 일정(Event)의 시작(start)과 끝(end) 날짜/시간 정보를 변경할 수 있도록 제한합니다.
"eventConstraint" 옵션을 설정하지 않은 경우 기본 동작으로 변경할 수 있는 영역의 범위를 제한하지 않습니다.
"businessHours"로 설정 시 businessHours 옵션으로 설정한 업무시간(Business Hours)의 요일, 시간 범위 내에서만 일정(Event)의 시작(start)과 끝(end) 날짜/시간 정보 변경이 가능합니다.

Type

string | object

Options

Value Description
"businessHours" businessHours 옵션으로 설정한 업무시간으로 날짜/시간 정보 변경이 제한됩니다.
object 사용자가 원하는 시간으로 날짜/시간 정보 변경을 제한할 수 있습니다.

Example

options = {
    eventConstraint: "businessHours",

    businessHours: true,
    editable: true,
};
options = {
    eventConstraint: {
        daysOfWeek: [1, 2, 3, 4, 5],  //월요일 ~ 금요일
        startTime: "10:00",
        endTime: "18:00"
    },

    editable: true,
};

일정(Event)의 시작(start)과 끝(end) 날짜/시간 정보를 변경할 수 있는 영역의 범위를 eventSource"constraint" 옵션을 이용하여 아래와 같이 이벤트 소스(EventSource)단위로도 설정할 수 있습니다.

options = {
    eventSources: [
        {
            id: "eventSource1",
            events: [
                {
                    id: "event1",
                    start: "2020-06-01",
                    end: "2020-06-02",
                    allDay: true,
                    title: "event1"
                },
                {
                    id: "event2",
                    start: "2020-06-03",
                    end: "2020-06-04",
                    allDay: true,
                    title: "event2"
                }
            ],
            constraint: {
                daysOfWeek: [1, 2, 3, 4, 5],  //월요일 ~ 금요일
                startTime: "10:00",
                endTime: "18:00"
            }
        }
    ]

    editable: true,
};

일정(Event)의 시작(start)과 끝(end) 날짜/시간 정보를 변경할 수 있는 영역의 범위를 일정(Event)의 "constraint" 옵션을 이용하여 아래와 같이 일정(Event) 단위로도 설정할 수 있습니다.

options = {
    eventSources: [
        {
            id: "eventSource1",
            events: [
                {
                    id: "event1",
                    start: "2020-06-01",
                    end: "2020-06-02",
                    allDay: true,
                    title: "event1",
                    constraint: {
                        daysOfWeek: [1, 2, 3, 4, 5],  //월요일 ~ 금요일
                        startTime: "10:00",
                        endTime: "18:00"
                    }
                },
                {
                    id: "event2",
                    start: "2020-06-03",
                    end: "2020-06-04",
                    allDay: true,
                    title: "event2"
                }
            ]
        }
    ]

    editable: true,
};

Read More

Since

product version desc
core 1.5.0.0 기능 추가