일정관리의 기간일정 가이드

스케쥴 컴포넌트의 기간일정 기능 예시화면이다.

관련 속성으로 perioditem_style, perioditem_vertgap, perioditem_dragable가 있다.

관련 API로 addperioditem, deleteperioditembydate, getperioditembyindex, refresh가 있다.

관련 이벤트로 on_perioditemclick, on_perioditemenddrag가 있다.

템플릿 위치: /HTML5/COMPONENT/SCHEDULE/schedule_perioditem

템플릿 파일

• schedule_perioditem.xml
• schedule_perioditem.js
• 새창으로 실행

function screen_on_load()
{
	// 기간일정 정보를 추가
	this.btn_addperioditem_on_mouseup();
}

// 아이템 유형 변경 이벤트
function cboItemStyle_on_itemchange(objInst, nprev_item, ncur_item)
{
	this.schedule.setperioditemstyle(this.cboItemStyle.getselectedcode());
}

// 일자 변경 이벤트
function fldDate_on_change(objInst)
{
	var yyyymm = this.fldDate.gettext();
	this.schedule.setdate(yyyymm);
}

// addperioditem 버튼 이벤트
function btn_addperioditem_on_mouseup(objInst)
{
	var ret, yyyymm;

	yyyymm = this.fldDate.gettext();
	factory.consoleprint(this.fldDate.gettext());

	this.schedule.addperioditem(yyyymm + "010000", yyyymm + "030000", "KEY_1", "기간 일정A", "", "", [20,20,20], [255,105,105]);
	this.schedule.addperioditem(yyyymm + "030000", yyyymm + "060000", "KEY_2", "기간 일정B", "", "", [20,20,20], [105,105,255]);

	this.schedule.refresh();
}

function schedule_on_perioditemenddrag(objInst, strDropStartDate, strDropEndDate, strDate, strEndDate, nIndex, strKey, strTitle, strMemo, strImage)
{
	// 기간일정 정보 오브젝트 구하기
	var periodObj = this.schedule.getperioditembyindex(strDate, nIndex);

	// 이전 기간일정 삭제
	this.schedule.deleteperioditembyindex(strDate, nIndex);

	// 기간일정 추가
	this.schedule.addperioditemex(strDropStartDate, strDropEndDate, strKey, strTitle, strMemo, strImage, periodObj.fore_rgb, periodObj.back_rgb, periodObj.horz_align, true);
}