! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

JavaScript 글로벌 미팅 플래너 응용 프로그램을 빌드하는 방법 > 온라인 스터디

본문 바로가기

고급기능 JavaScript 글로벌 미팅 플래너 응용 프로그램을 빌드하는 방법

페이지 정보

작성자 GrapeCity 작성일 2022-05-27 11:24 조회 557회 댓글 0건

본문

최근에는업무 시간대가 서로 다른 팀들과 작업하는 기업이 점점 늘고 있습니다. 팀들이 여러 나라에 분산되어 있을 수 있으며, 회사의 통신 역량이 이를 가능하게 만들었습니다. 물론 문제는 회의를 직접 진행하는 데 사용하는 도구가 아니라 회의하기에 적합한 시간을 찾는 데서 발생합니다. 여러 시간대에 걸쳐 있는 팀들 사이에서 어떻게 회의를 계획하고 있습니까?

여기서는 다양한 SpreadJS 기능을 사용하여 응용 프로그램 요구에 알맞게 사용자 정의가 가능한 글로벌 미팅 플래너를 만드는 방법을 간단히 설명하겠습니다.

아래 링크를 통해 샘플 파일을 다운로드한 후 따라해 보세요. 

샘플 다운로드


팀 멤버들이 전 세계에 분산되어 있는 경우에는 여러 시간대와 DST(Daylight Saving Time, 일광 절약 시간제(썸머타임))를 고려해야 하므로 컨퍼런스 콜과 미팅을 계획하기가 쉽지 않을 것입니다.

이 블로그에서는 JavaScript 스프레드시트 컴포넌트인 SpreadJS를 사용하여 교차 시간대 회의에 최적인 약속 시간을 찾아낼 수 있는 글로벌 미팅 플래너를 만드는 방법을 보여줍니다. 스프레드시트는 두 페이지로 구성됩니다.

먼저 모든 DST 규칙을 배치할 페이지를 만든 다음, 사용자가 멤버/위치 및 그들의 UTC 오프셋을 목록화할 메인 시트를 만들고 각 시트에 적합한 DST 규칙을 선택해야 합니다. 설정한 후 사용자는 회의 시간을 입력하고 미팅 플래너 테이블에서 설정이 작동하는지 여부를 확인해야 합니다.



DST 규칙


이 샘플이 복잡한 이유는 일광 절약 시간제(DST) 규칙이 나라마다 다르기 때문입니다. DST는 1년 중 시계를 1시간 앞당기는 시기를 말합니다. 이는 하절기 동안 저녁의 일광 시간이 늘어나는 효과를 제공합니다.

미국은 DST가 시작될 때 시계를 1시간 앞당기고, 표준 시간(ST)으로 돌아갈 때는 1시간 늦춥니다. 표준 시간에서 일광 절약 시간으로 바뀌면 아침에서 저녁까지의 일광 시간이 1시간 변동됩니다. 일광 절약 시간에서 표준 시간으로 바뀌면 저녁에서 아침까지의 일광 시간이 그에 맞게 1시간 변동됩니다.

새 시트에 이 모든 DTS 규칙을 포함했습니다. 사용자는 규칙을 추가 또는 제거할 뿐만 아니라 수정할 수도 있습니다.

DST 규칙


각 규칙은 DST가 시작되고 끝나는 날짜 및 위치에 날짜/시간 절약 규칙이 적용되는지 여부를 규정합니다. 조건이 충족되면 UTC 오프셋에 1시간이 추가됩니다.

사용자는 시트의 맨 위에서 연도를 변경할 수 있으며, DST의 시작 및 종료 날짜는 이에 따라 자동으로 변경됩니다.



설정


샘플에서는 몇 가지 계산을 해야 합니다. 다음 그림에서 사용자가 입력해야 하는 변수를 모두 볼 수 있습니다.

  • 회의 날짜, 회의 시간 입력

현재 위치에 따라 DST 규칙 및 UTC 오프셋도 입력해야 합니다.

  • 위치 및 팀 멤버에 해당하는 레이블 입력
  • 위에 언급한 위치에 해당하는 표준 UTC 오프셋 및 DST 규칙 입력
  • 팀 멤버 가용성 및 참여 가능성 입력

숨기기

사용자 입력을 토대로 몇 가지 계산을 하기 위한 수식을 사용하겠습니다.

첫째, 회의 종료 날짜와 시간은 시작 날짜/시간 및 지속 시간을 기준으로 계산합니다.

위 그림에서 강조 표시된 행을 확인하십시오. 이 행에서 계산에 도움이 되는 몇 가지 작업을 하겠습니다. 분석하면 아래와 같습니다.


행 7-8:

  • dstBegin (cell $C$7)의 경우 다음 공식 사용 : =INDEX('DST Rules'!$B$6:$B$17,MATCH(dstRule,'DST Rules'!$D$6:$D$17,0))
  • dstEnd (cell $C$8)의 경우 다음 공식 사용 : =INDEX('DST Rules'!$C$6:$C$17,MATCH(dstRule,'DST Rules'!$D$6:$D$17,0))

다음에는 사용자가 입력한 시작 날짜/시간, UTC 오프셋 및 DST 규칙을 토대로 시작 GMT 및 종료 GMT를 계산합니다.

  • startGMT (cell $G$8)의 경우 다음 공식 사용 : =startDT-(utcOffset+IF(dstBegin="n/a",FALSE,IF(dstBegin>dstEnd,OR(startDT>=dstBegin,startDT<=dstEnd),AND(startDT>=dstBegin,startDT<=dstEnd))))/24
  • endGMT (cell $I$8)의 경우 다음 공식 사용 : =endDT-(utcOffset+IF(dstBegin="n/a",FALSE,IF(dstBegin>dstEnd,OR(endDT>=dstBegin,endDT<=dstEnd),AND(endDT>=dstBegin,endDT<=dstEnd))))/24

행 15-17:

아래 수식은 입력한 위치를 토대로 각 멤버에 대한 DST 시작, DST 끝 및 현재 오프셋을 계산하는 데 사용됩니다.

  • DST 시작(C$15) : =INDEX('DST Rules'!$B$6:$B$17,MATCH(C13,'DST Rules'!$D$6:$D$17,0))
  • DST 종료(C$16) : =INDEX('DST Rules'!$C$6:$C$17,MATCH(C13,'DST Rules'!$D$6:$D$17,0))
  • DST 오프셋(C$17) : =1*IF(C15="n/a",FALSE,IF(C15>C16,OR(startDT>=C15,startDT<=C16),AND(startDT>=C15,startDT<=C16))) - 회의 날짜가 일광 절약 시간 중인 경우 오프셋은 1이고, 그렇지 않으면 0이 됩니다. DST 규칙이 없는 위치의 경우 오프셋은 항상 0입니다.

각 수식을 오른쪽으로 끌어 모든 위치의 변수를 계산합니다.


행: 28-29:

  • gmt (cell $C$28)의 경우 다음 수식 사용 : =startDate-(utcOffset+IF(dstEnd="n/a",FALSE,IF(dstEnd>dstEnd,OR(startDate>=dstEnd,startDate<=dstEnd),AND(startDate>=dstEnd,startDate<=dstEnd))))/24
  • cell $C$29 (Meeting Planner Table starting time)의 경우 다음 수식 사용 : =gmt+($C12+$C17)/24

이 수식을 드래그하여 다양한 위치의 시작 시간을 계산할 수 있습니다. (이 예제에서는 $K$29로 드래그합니다. 위치/멤버가 더 많거나 적은 경우 필요에 따라 수정하십시오.)

* 참고: 수식을 더욱 보기 편하게 하기 위해서 셀 참조를 제공하는 대신 범위 이름을 사용했습니다.

회의 표(위치마다 사용 가능한 시간과 팀이 유연하게 참여할 수 있는 시간을 쉽게 구분할 수 있도록 만든 표)로 이동하기 전에 그림에 표시된 것처럼 행을 숨겨서 계산이 아닌 필요한 정보만 표시했습니다.



미팅 플래너 표


회의 표는 기본적으로 2개 섹션으로 이루어집니다. 왼쪽에는 UTC 시간 목록이 있습니다. 위 단락에서 언급한 GMT의 값으로 시작되며, 이어지는 행에 1시간씩 추가됩니다.

위치 아래쪽에서는 29행에서 계산한 값(=gmt+(C12+C17)/24)을 참조하고 이어지는 모든 행에 1/24 또는 1시간씩 추가할 것입니다.

표


UTC 시간을 포함하는 열([$-409]\ddd,\ dd\ mmm,\ hh:mm을 데이터 포맷으로 사용) 및 입력한 모든 위치의 시간을 포함하는 열([$-409]ddd\ hh:mm;@를 데이터 포맷으로 사용하고 배경을 RED로 설정)을 서식 지정하기 위해 사용자 정의 서식을 사용하겠습니다.

한편으로 각 사용자의 가용성 또는 각 사용자의 유연한 시간과 관련된 위치 시간에 색상을 지정하기 위해 조건부 서식을 사용하겠습니다.

아래 단계를 따라해 주십시오.

  1. 셀을 선택합니다.

  2. 탭에서 조건부 서식 메뉴를 선택합니다.

  3. 새 규칙을 클릭합니다.

  4. "수식을 사용하여 서식을 지정할 셀 결정"을 규칙 유형으로 선택합니다.

  5. 수식을 설정한 다음 서식 버튼을 클릭하여 서식을 설정합니다.

아래 표는 조건부 규칙을 해당 수식 및 이 샘플에서 사용된 셀 선택과 함께 표시한 것입니다.

 조건부 규칙

 수식

 선택

 1- 회의 시간의 경우 회색 배경 설정

AND(MROUND(B33,15/1440)>=MROUND($G$8,15/1440),MROUND(B33,15/1440)<MROUND($I$8,15/1440))

 =$B$33:$B$77

 2- 회의 시간을 밑줄로 강조

AND(MROUND(C33,15/1440)>=MROUND(C$19,15/1440),MROUND(C33,15/1440)<MROUND(C$20,15/1440))

 =$C$33:$R$77

 3- 회의 시간의 경우 녹색 배경 설정

AND(ROUND(MOD(C33,1),5)>=ROUND(C$22,5),ROUND(MOD(C33,1),5)<ROUND(C$23,5))

 =$C$33:$R$77

 4- 유연한 시간의 경우 노란색 배경 설정

AND(ROUND(MOD(C33,1),5)>=ROUND(C$22-C$25/24,5),ROUND(MOD(C33,1),5)<ROUND(C$23+C$26/24,5))

 =$C$33:$R$77


다음은 조건부 서식 규칙 관리자 보기입니다. 


조건부 서식 규칙 관리자

기본적으로 시간의 색은 사용자에게 시간이 없음을 의미하는 빨간색입니다.


최종 결과

아래 그림은 결과를 보여줍니다. 다른 셀은 자동으로 계산되므로 필요한 셀에만 정보를 입력해야 합니다. 보기에 편하도록 하기 위해, 계산된 정보가 들어 있는 나머지 모든 셀은 숨겼습니다.

최종 결과


이 글로벌 미팅 플래너를 이용하는 방법

  1. 자신의 위치와 회의 또는 컨퍼런스 참가자의 위치를 입력합니다. DST 규칙이 적용되는 경우에는 그것도 입력합니다.

  2. 글로벌 미팅 플래너 결과는 모든 참가자에게 최선의 회의 시간이 되었을 때 한눈에 쉽게 볼 수 있도록 컬러로 코딩됩니다.

    모든 위치가 녹색 또는 노란색 시간으로 표시되는 경우에는 모두가 참여 가능하거나 유연한 최적의 회의 시간을 찾은 것입니다. 반면에 빨간색의 시간은 컨퍼런스 콜 또는 회의에 적합한 시간이 아닙니다.

  3. 컨퍼런스 콜에 적합한 시간을 결정했다면 결과 페이지에는 각 위치의 현지 시간이 표시되므로 이를 토대로 참가자에게 필요한 정보를 전송할 수 있게 됩니다.


결론

멀리 떨어진 곳에 있는 사람에게 전화를 걸거나 서로 다른 시간대에 있는 사람들을 상대로 웹 또는 비디오 컨퍼런스를 해야 하나요? JavaScript 스프레드시트 컴포넌트를 사용하여 시간대 전체의 최적 시간을 찾으실 수 있습니다.

SpreadJS를 사용하여 JavaScript 응용 프로그램 스프레드시트에 스프레드시트 기능을 추가할 수 있습니다. 조건부/사용자 정의 서식 지정과 같이 다양한 특징과 기능, 500개의 기본 제공 기능, 사용자 정의 기능, 어레이 기능, 동적 어레이, 수식 텍스트 상자 등이 포함된 강력한 엔진을 사용하여 엔터프라이즈 응용 프로그램에 Excel과 유사한 스프레드시트 환경을 즉석에서 결합할 수 있습니다.




지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.