Hello, World!
이전 목록 다음
채택완료

view.skin에 간트 넣는법..

스규스규
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 2,176

Copy 
<!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>

 

237007248_1688609946.8805.png이런식의 간트를 view.skin에 넣고 싶습니다만.. 위에 코드를 복사해서 넣어도 화면에 안나옵니다..
혹시 이런식의 간트를 넣으려면 개발단에서 건들여야하는 건가요??

그누보드5 간트
|

답변 2개 / 댓글 6개

채택된 답변
+20 포인트
웹웹메이킹
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전

전체적인 예시를 참고 하셔서 비교해보시면 도움이 되지 않을까 합니다.

Copy 
<!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>

 

답변에 대한 댓글 4개

스규스규
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
감사합니다!!
view.skin에 적용했습니다!!!

혹시 저 간트 부분을 write.skin에 추가하고 수정을 하려고 하면 똑같이 붙여 넣으면 될까요?
프로젝트 부분만 텍스트를 바꾸고 싶습니다.
스규스규
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
아.. 그리고 뷰페이지의 날짜 부분에서 시작 년도가 1906으로 나오는데 년도는 설정을 따로 해야는 건가요??

자꾸 물어봐서 죄송합니다..
웹메이킹
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
네 write.skin.php 에 원하시는 부분에 붙여 넣으시면 될 것 같습니다.
웹메이킹
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
시작 년도가 1906으로 나오는 이유는 gantt.config.start_date 속성이 기본적으로 "01-01-1906"으로 설정되어 있기 때문입니다.
이 속성을 원하는 시작 년도로 변경하면 됩니다

[code]
gantt.config.start_date = new Date(2023, 0, 1); // 시작 날짜를 2023년 1월 1일로 설정
[/code]

위 코드를 Gantt 초기화 부분인 gantt.init("gantt_here"); 전에 추가하면 됩니다.
웹웹메이킹
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전

스타일 속성을 추가하여 가로로 표시 될 수 있도록 수정

height 부분은 원하시는 값으로 조정 하시면 됩니다.

Copy 
<div id="gantt_here" style='width:100%; height:500px;'></div>

 

다음의 코드를 추가하고 기존의 스케일 설정을 수정하면 될것 같습니다.

Copy 
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 함수에서 스케일 셀 텍스트를 변경하는 부분을 삭제하거나 주석 처리하시면 될듯 합니다.

답변에 대한 댓글 2개

스규스규
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
그러면 위의 코드 중 div와 스크립트를 view.skin.php로 옮기고
div에 스타일 적용 후
[code]
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");
[/code]
부분을

[code]
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;
[/code]
알려주신 코드로 수정하는 건가요? 아니며 추가인가요??
웹메이킹
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
추가하시거나 수정하시면 될듯 합니다.

답변을 작성하려면 로그인이 필요합니다.