view.skin에 간트 넣는법..
본문
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Year scale</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="../../codebase/dhtmlxgantt.js?v=8.0.3"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxgantt.css?v=8.0.3">
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script>
gantt.config.min_column_width = 50;
gantt.config.scale_height = 90;
gantt.config.scales = [
{unit: "year", step: 1, format: "%Y"},
{unit: "month", step: 1, format: "%M"}
];
gantt.init("gantt_here");
gantt.parse({
data:[
{"id":11, "text":"프로젝트", "start_date":"01-01-2023", "end_date":"31-12-2023", "progress": 1, "open": true},
{"id":12, "text":"기획", "start_date":"01-02-2023", "end_date":"31-12-2023", "parent":"11", "progress": 0, "open": true},
{"id":13, "text":"디자인", "start_date":"01-03-2023", "end_date":"31-12-2023", "parent":"11", "progress": 0, "open": true},
{"id":14, "text":"퍼블", "start_date":"01-04-2023", "end_date":"31-12-2023", "parent":"11", "progress": 0, "open": true}
],
links:[
{"id":"10","source":"11","target":"12","type":"1"},
{"id":"11","source":"12","target":"13","type":"1"},
{"id":"12","source":"13","target":"14","type":"1"}
]
});
setTimeout(function(){
$('.gantt_scale_cell').each(function(index){
console.log( index + ": " + $( this ).text() );
if($( this ).text() == 'Dec'){
$( this ).text(12);
}
if($( this ).text() == 'Jan'){
$( this ).text(1);
}
if($( this ).text() == 'Feb'){
$( this ).text(2);
}
if($( this ).text() == 'Mar'){
$( this ).text(3);
}
if($( this ).text() == 'Apr'){
$( this ).text(4);
}
if($( this ).text() == 'May'){
$( this ).text(5);
}
if($( this ).text() == 'Jun'){
$( this ).text(6);
}
if($( this ).text() == 'Jul'){
$( this ).text(7);
}
if($( this ).text() == 'Aug'){
$( this ).text(8);
}
if($( this ).text() == 'Sep'){
$( this ).text(9);
}
if($( this ).text() == 'Oct'){
$( this ).text(10);
}
if($( this ).text() == 'Nov'){
$( this ).text(11);
}
});
},100);
$(window).resize(function(){
setTimeout(function(){
$('.gantt_scale_cell').each(function(index){
console.log( index + ": " + $( this ).text() );
if($( this ).text() == 'Dec'){
$( this ).text(12);
}
if($( this ).text() == 'Jan'){
$( this ).text(1);
}
if($( this ).text() == 'Feb'){
$( this ).text(2);
}
if($( this ).text() == 'Mar'){
$( this ).text(3);
}
if($( this ).text() == 'Apr'){
$( this ).text(4);
}
if($( this ).text() == 'May'){
$( this ).text(5);
}
if($( this ).text() == 'Jun'){
$( this ).text(6);
}
if($( this ).text() == 'Jul'){
$( this ).text(7);
}
if($( this ).text() == 'Aug'){
$( this ).text(8);
}
if($( this ).text() == 'Sep'){
$( this ).text(9);
}
if($( this ).text() == 'Oct'){
$( this ).text(10);
}
if($( this ).text() == 'Nov'){
$( this ).text(11);
}
});
},100);
});
</script>
</body>
이런식의 간트를 view.skin에 넣고 싶습니다만.. 위에 코드를 복사해서 넣어도 화면에 안나옵니다..
혹시 이런식의 간트를 넣으려면 개발단에서 건들여야하는 건가요??
답변 2
전체적인 예시를 참고 하셔서 비교해보시면 도움이 되지 않을까 합니다.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Year scale</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="../../codebase/dhtmlxgantt.js?v=8.0.3"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxgantt.css?v=8.0.3">
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#gantt_here {
width: 100%;
height: calc(100% - 90px); /* 상단 스케일의 높이를 빼줍니다 */
}
</style>
</head>
<body>
<div id="gantt_here"></div>
<script>
gantt.config.min_column_width = 50;
gantt.config.scale_height = 90;
gantt.config.scales = [
{unit: "year", step: 1, format: "%Y"},
{unit: "month", step: 1, format: "%M"}
];
gantt.init("gantt_here");
gantt.parse({
data:[
{"id":11, "text":"프로젝트", "start_date":"2023-01-01", "end_date":"2023-12-31", "progress": 1, "open": true},
{"id":12, "text":"기획", "start_date":"2023-02-01", "end_date":"2023-12-31", "parent":"11", "progress": 0, "open": true},
{"id":13, "text":"디자인", "start_date":"2023-03-01", "end_date":"2023-12-31", "parent":"11", "progress": 0, "open": true},
{"id":14, "text":"퍼블", "start_date":"2023-04-01", "end_date":"2023-12-31", "parent":"11", "progress": 0, "open": true}
],
links:[
{"id":"10","source":"11","target":"12","type":"1"},
{"id":"11","source":"12","target":"13","type":"1"},
{"id":"12","source":"13","target":"14","type":"1"}
]
});
// 월별 스케일의 날짜 형식을 수정합니다.
gantt.templates.scale_cell_class = function(date) {
if (date.getMonth() === 0) {
return "january_scale";
}
return "";
};
// 월별 스케일의 콘텐츠를 수정합니다.
gantt.templates.scale_cell_label = function(date) {
return (date.getMonth() + 1).toString();
};
// 창 크기 조정 시 스케일의 날짜 형식을 다시 수정합니다.
window.addEventListener("resize", function() {
gantt.render();
});
</script>
</body>
감사합니다!!
view.skin에 적용했습니다!!!
혹시 저 간트 부분을 write.skin에 추가하고 수정을 하려고 하면 똑같이 붙여 넣으면 될까요?
프로젝트 부분만 텍스트를 바꾸고 싶습니다.
아.. 그리고 뷰페이지의 날짜 부분에서 시작 년도가 1906으로 나오는데 년도는 설정을 따로 해야는 건가요??
자꾸 물어봐서 죄송합니다..
네 write.skin.php 에 원하시는 부분에 붙여 넣으시면 될 것 같습니다.
시작 년도가 1906으로 나오는 이유는 gantt.config.start_date 속성이 기본적으로 "01-01-1906"으로 설정되어 있기 때문입니다.
이 속성을 원하는 시작 년도로 변경하면 됩니다
gantt.config.start_date = new Date(2023, 0, 1); // 시작 날짜를 2023년 1월 1일로 설정
위 코드를 Gantt 초기화 부분인 gantt.init("gantt_here"); 전에 추가하면 됩니다.
스타일 속성을 추가하여 가로로 표시 될 수 있도록 수정
height 부분은 원하시는 값으로 조정 하시면 됩니다.
<div id="gantt_here" style='width:100%; height:500px;'></div>
다음의 코드를 추가하고 기존의 스케일 설정을 수정하면 될것 같습니다.
gantt.config.scale_unit = "day";
gantt.config.date_scale = "%d-%m-%Y";
gantt.config.subscales = [
{unit: "month", step: 1, date: "%F"}
];
gantt.config.scale_height = 90;
스케일 셀의 텍스트를 수정하는 코드는 가로로 표시할 때 필요하지 않으므로 삭제하거나 주석 처리 하시면 되구요, setTimeout 함수와 $(window).resize 함수에서 스케일 셀 텍스트를 변경하는 부분을 삭제하거나 주석 처리하시면 될듯 합니다.
그러면 위의 코드 중 div와 스크립트를 view.skin.php로 옮기고
div에 스타일 적용 후
gantt.config.min_column_width = 50;
gantt.config.scale_height = 90;
gantt.config.scales = [
{unit: "year", step: 1, format: "%Y"},
{unit: "month", step: 1, format: "%M"}
];
gantt.init("gantt_here");
부분을
gantt.config.scale_unit = "day";
gantt.config.date_scale = "%d-%m-%Y";
gantt.config.subscales = [
{unit: "month", step: 1, date: "%F"}
];
gantt.config.scale_height = 90;
알려주신 코드로 수정하는 건가요? 아니며 추가인가요??
추가하시거나 수정하시면 될듯 합니다.
답변을 작성하시기 전에 로그인 해주세요.
