guide:component:schedule:schedule_perioditem [xFrame5 TechNet]

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== 일정관리의 기간일정 가이드 ======

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

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

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

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

===== 예시 =====

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

템플릿 파일
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/SCHEDULE/schedule_basic.xml|schedule_perioditem.xml]]
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/SCHEDULE/schedule_basic.js|schedule_perioditem.js]]
  * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/SCHEDULE/schedule_perioditem|새창으로 실행]]

<php>
echo '<html>';
echo '<iframe src="';
echo $conf['plugin']['xf5']['xf5projecthome'], 'template/template.html?';
echo 'xframe_screen_url=/HTML5/COMPONENT/SCHEDULE/schedule_perioditem"';
echo ' class="_xf5_iframe"';
echo ' style="';
echo $conf['plugin']['xf5']['xf5iframestyle'];
echo '">';
echo '</iframe>';
echo '</html>';
</php>

==== 화면 스크립트 ====

<sxh javascript>
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);
}
</sxh>