====== 일정관리의 기간일정 가이드 ======
스케쥴 컴포넌트의 기간일정 기능 예시화면이다.
관련 속성으로 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|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
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);
}