[JavaScript] FullCalendar 캘린더 사용법 - (7. International)

 

 

International

 

locale

일정관리의 특정 부분을 특정 언어에 맞게 조정 할 수 있다.

• headerToolbar에 정의된 버튼의 텍스트
• 월 또는 요일 문자열을 포함하는 텍스트
• 날짜 형식 (예: eventTimeFormat)
• 주(week)번호 계산 옵션 (weekNumberCalculation)
• 각 주가 시작되는 날.

<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
  locale: 'es'
});
...
</script>

 

 

derection

달력의 요소가 렌더링 되는 방향이다.

ltr : 왼쪽에서 오른쪽으로 

rlt : 오른쪽에서 왼쪽으로

 

 

firstDay

한 주가 시작되는 날.

요일을 나타내는 숫자값

일요일= 0, 월요일= 1, 화요일= 2 ... 

 

TimeZone

local (기본값)

모든 브라우저에는 일반적으로 사용자 운영 체제의 설정에 따라 결정되는 기본 시간대가 있다.

이것은 "로컬" 시간대로 간주되며 사용자가 거주하는 지역이나 컴퓨터 구성 방식에 따라 캘린더 사용자마다 다를 수 있다.

 

만약 이벤트의 날짜가 UTC에 상대적으로 정의되었다면, 밀리초 시간이나 UTC 오프셋을 포함한 ISO8601 문자열을 통해,

해당 날짜는 해당 날짜는 사용자의 로컬 시간대에 맞춰 적절히 변경되어 표시된다.

만약 날짜가 UTC 오프셋 없이 ISO8601 문자열로 제공되었다면,  해당 날짜는 로컬로 간주되어 표시된다.

 

예시는 아래와 같다.

var calendar = new Calendar(calendarEl, {
  timeZone: 'local', // the default (unnecessary to specify)
  events: [
    { start: '2018-09-01T12:30:00Z' }, // will be shifted to local
    { start: '2018-09-01T12:30:00+XX:XX' }, // already same offset as local, so won't shift
    { start: '2018-09-01T12:30:00' } // will be parsed as if it were '2018-09-01T12:30:00+XX:XX'
  ],
  dateClick: function(arg) {
    console.log(arg.date.toString()); // use *local* methods on the native Date Object
    // will output something like 'Sat Sep 01 2018 00:00:00 GMT-XX:XX (Eastern Daylight Time)'
  }
});

 

 

UTC (기본값)

로컬 시간대는 브라우저마다 다르지만, UTC(협정 세계시) 시간대는 모든 브라우저에서 동일하다.

만약 이벤트의 날짜가 UTC 오프셋을 포함한 ISO8601 문자열로 정의되어 있다면, 해당 날짜는 적절히 변경되어 00:00 오프셋으로 표시된다. 만약 날짜가 시간대 오프셋 없이 ISO8601 문자열로 제공되었다면, 해당 날짜는 UTC로 표시된다.

 

예시는 아래와 같다.

var calendar = new Calendar(calendarEl, {
  timeZone: 'UTC',
  events: [
    { start: '2018-09-01T12:30:00Z' }, // already in UTC, so won't shift
    { start: '2018-09-01T12:30:00+XX:XX' }, // will shift to 00:00 offset
    { start: '2018-09-01T12:30:00' } // will be parsed as if it were '2018-09-01T12:30:00Z'
  ],
  dateClick: function(arg) {
    console.log(arg.date.toUTCString()); // use *UTC* methods on the native Date Object
    // will output something like 'Sat, 01 Sep 2018 00:00:00 GMT'
  }
});

사용자의 로컬 시간대에 관계없이 모든 브라우저에서 일관되게 이벤트를 표시하려면 UTC를 사용하는 것이 좋다.

그러나 UTC를 다른 실제 시간대를 모방하기 위해 사용한다면,

"UTC 강제 변환을 수반하는 명명된 시간대"를 대신 사용하면된다.

 

 

Named Time Zones

'America/New_York' 또는 'Europe/Moscow'와 같은 문자열로 지정된 특정 지역이다.

UTC 시간대와 마찬가지로, 모든 브라우저에서 일관되게 표시된다.

하지만 모든 브라우저가 로컬이나 UTC와 마찬가지로 명명된 시간대를 기본으로 지원하지는 않는다. 

 

 

Without a Plugin ("UTC-coercion")

시간대 관련 플러그인이 없을 때, 캘린더는 "UTC 강제 변환"을 수행하며,

이는 모든 날짜가 UTC 기반의 네이티브 Date 객체로 강제로 변환되는 것을 의미한다.

기술적으로는 해당 날짜가 UTC에서 비롯되지 않았더라도 말이다.

각 네이티브 Date 객체의 UTC 메서드(getUTCDate(), toUTCString() 등)를 사용해야 한다.

var calendar = new Calendar(calendarEl, {
  timeZone: 'America/New_York',
  events: [
    { start: '2018-09-01T12:30:00Z' }, // will be parsed in UTC, as-is
    { start: '2018-09-01T12:30:00+XX:XX' }, // will be parsed in UTC as '2018-09-01T12:30:00Z'
    { start: '2018-09-01T12:30:00' } // will be parsed in UTC as '2018-09-01T12:30:00Z'
  ],
  dateClick: function(arg) {
    console.log(arg.date.toUTCString()); // use *UTC* methods on the native Date Object
    // will output something like 'Sat, 01 Sep 2018 00:00:00 GMT'
  }
});

 

 

더 자세한 내용은 아래 페이지에서 확인

https://fullcalendar.io/docs/timeZone

timeZone - Docs | FullCalendar