DHTMLX - ๊ธฐ์ดˆ

RedNineยท2023๋…„ 12์›” 25์ผ

DHTMLX

๋ชฉ๋ก ๋ณด๊ธฐ
1/1

๐Ÿณ DHTMLX๋ž€?

DHTMLX๋Š” Dynamic Hypertext Markup Language eXtension์˜ ์•ฝ์ž์ด๋ฉฐ, ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์— ์‚ฌ์šฉํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

  • DHTMLX๋Š” ๊ทธ๋ฆฌ๋“œ, ํŠธ๋ฆฌ, ํƒญ, ์ฐจํŠธ, ์บ˜๋ฆฐ๋”, ํผ ๋“ฑ ๋‹ค์–‘ํ•œ UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.
  • AJAX, REST API ๋“ฑ์˜ ๊ธฐ์ˆ ์„ ์ง€์›ํ•œ๋‹ค.

๐Ÿณ ๋ฌด๋ฃŒ/์œ ๋ฃŒ ๋ฒ„์ „

DHTMLX ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋ฌด๋ฃŒ ๋ฒ„์ „(Standard Edition)๊ณผ ์œ ๋ฃŒ ๋ฒ„์ „(Pro Edition)์„ ์ œ๊ณตํ•˜๋ฉฐ, ์ด ๋‘ ๋ฒ„์ „์€ ๊ธฐ๋Šฅ, ์ง€์›, ๋ผ์ด์„ ์Šค ๋“ฑ ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์ธก๋ฉด์—์„œ ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค.

  • ๊ธฐ๋Šฅ ์ฐจ์ด : ์œ ๋ฃŒ๋ฒ„์ „์€ ๋ฌด๋ฃŒ๋ฒ„์ „ ๋ณด๋‹ค ๋” ๋งŽ์€ ๊ธฐ๋Šฅ๊ณผ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ณตํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์ผ๋ถ€ ๊ณ ๊ธ‰ ๊ธฐ๋Šฅ์€ ์œ ๋ฃŒ ๋ฒ„์ „์—์„œ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์ง€์› ์ฐจ์ด : ์œ ๋ฃŒ๋ฒ„์ „ ์‚ฌ์šฉ์ž๋Š” ๊ธฐ์ˆ  ์ง€์›์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค. ์ด์— ๋ฐ˜ํ•ด ๋ฌด๋ฃŒ๋ฒ„์ „ ์‚ฌ์šฉ์ž๋Š” ๊ณต์‹ ๋ฌธ์„œ, ์ปค๋ฎค๋‹ˆํ‹ฐ ํฌ๋Ÿผ ๋“ฑ์„ ํ†ตํ•ด ์ •๋ณด๋ฅผ ์–ป์–ด์•ผ ํ•œ๋‹ค.
  • Sample ์‚ฌ์ดํŠธ ์ฃผ์†Œ
  • API ์‚ฌ์šฉ๋ฒ•

๐ŸŽˆ ๋ฌด๋ฃŒ ํ‰๊ฐ€ํŒ ๋‹ค์šด๋กœ๋“œ

DHTMLX ๋ฌด๋ฃŒ ํ‰๊ฐ€ํŒ์€ 30์ผ ๋™์•ˆ ๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

๐ŸŽˆ ๊ฐ„ํŠธ ์˜ˆ์ œ ์ ์šฉ

๐ŸŽ ๊ฐ„ํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋‹ค์šด

์ด๋ฉ”์ผ๋กœ ๋ฐ›์€ ์••์ถ• ํด๋”๋ฅผ ์—ด๋ฉด ์œ„์™€ ๊ฐ™์€ ๊ตฌ์„ฑ์œผ๋กœ ๋˜์–ด ์žˆ๋‹ค.

  • baclemd ํด๋”๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋“œํ•˜๊ณ  ์ €์žฅํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ํฌํ•จํ•œ๋‹ค.
    • ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ๋ณด๋‚ธ ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•˜๊ณ , ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜์—ฌ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ฑฐ๋‚˜ ์ €์žฅํ•˜๋Š” ์ฝ”๋“œ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์„ ์ˆ˜ ์žˆ๋‹ค.
  • codebase ํด๋”์— ์žˆ๋Š” dhtmlxgantt.css์™€ dhtmlxgantt.js ํŒŒ์ผ์„ ํ”„๋กœ์ ํŠธ์— ๋‹ค์šด๋กœ๋“œํ•˜๋ฉด๋œ๋‹ค. Skins ํด๋”์—๋Š” ๋””์ž์ธ ์…ˆํ”Œ๋“ค์ด ์žˆ๋‹ค.
  • samples ํด๋”์—๋Š” ๊ฐ„ํŠธ ์˜ˆ์ œ html๋“ค์ด ์žˆ๋‹ค.

๐ŸŽ 01_basic_init.html

  • header ์•ˆ์— ๊ฐ„๋‹จํ•œ style๊ณผ ํ•จ๊ป˜ codebase ํด๋”์•ˆ์— ์žˆ๋Š” dhtmlxgantt.css์™€ dhtmlxgantt.js๋ฅผ ์œ„์น˜๋ฅผ ์ˆ˜์ •ํ•ด์ฃผ์—ˆ๋‹ค.
  • body๋ถ€๋ถ„์— ์˜ˆ์ œ๋ฅผ ๋ณต์‚ฌํ•˜์—ฌ ๋ถ™์—ฌ๋„ฃ๊ธฐ ํ–ˆ๋‹ค.

  • 01_basic_init ๊ฐ„ํŠธ ์˜ˆ์ œ๋ฅผ ์ ์šฉํ•œ ๊ฒฐ๊ณผํ™”๋ฉด์ด๋‹ค.

๐Ÿณ ์ฐธ๊ณ ์‚ฌ์ดํŠธ

0๊ฐœ์˜ ๋Œ“๊ธ€