Full Calendar의 동작 노트

13483 단어 FullCalendar

출처 확인

    const $calendar = $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      defaultView: 'agendaWeek',
      editable: true,
      selectable: true,
      selectHelper: true,
      select: (start, end, jsEvent, view) => {
        console.log('select');
        console.log(start.toISOString());
        console.log(end.toISOString());
        $calendar.fullCalendar('renderEvent',
          {
            title: 'hoge',
            start: start,
            end: end
          },
          true
        );
        $calendar.fullCalendar('unselect');
      },
      eventClick: (event, jsEvent, view) => {
        console.log('eventClick');
        console.log(event.start.toISOString());
        console.log(event.end.toISOString());
        $calendar.fullCalendar('unselect');
      },
      eventResize: (event, delta, revertFunc, jsEvent, ui, view) => {
        console.log('eventResize');
        console.log(event.start.toISOString());
        console.log(event.end.toISOString());
        $calendar.fullCalendar('unselect');
      },
      eventDrop: (event, delta, revertFunc, jsEvent, ui, view) => {
        console.log('eventDrop');
        console.log(event.start.toISOString());
        console.log(event.end.toISOString());
        $calendar.fullCalendar('unselect');
      },
      events: (start, end, timezone, callback) => {
        console.log('events');
        console.log(start.toISOString());
        console.log(end.toISOString());
      },
      //eventRender: (event, element) => {
      //  console.log('eventRender');
      //}
    });

조심해!!


[추기]
이후에야 비로소 상술한 확인용 소스를 알아차렸다
Full Calendar의 시간대가 설정되어 있지 않습니다.
설정이 없으면 선택하십시오
http://fullcalendar.io/docs/timezone/timezone/ false (no timezone, the default)기본값no timezone!!
그러므로timezone: 'UTC'설정된 끝부분 추가

timezone: no timezone의 경우


이벤트 (달력 표시 기간)


start.toISOString() => 2015-09-06 end.toISOString() => 2015-09-13달력 표시일9/6 - 9/12이므로 end피+12015-09-13.
따라서 서버에 보내는 조회는 이렇다.

선택 (새로운 이벤트 제작 묘사)

start.toISOString() => 2015-09-08T06:00:00 end.toISOString() => 2015-09-08T06:30:00따라서 서버에 보내는 조회는 이렇다.

이벤트Drop(이벤트 이동)


event.start.toISOString() => 2015-09-08T07:00:00 event.end.toISOString() => 2015-09-08T07:30:00따라서 서버에 보내는 조회는 이렇다.

이벤트 클릭

event.start.toISOString() => 2015-09-08T07:00:00 event.end.toISOString() => 2015-09-08T07:30:00

eventResize(크기별로 편집)


event.start.toISOString() => 2015-09-08T07:00:00 event.end.toISOString() => 2015-09-08T08:00:00따라서 서버에 보내는 조회는 이렇다.

참고로 브라우저의 시간대에 상관없이 상술한 것은 같다


var date = new Date();
date.toString();
date.getTimezoneOffset(); => 360
하여튼
var date = new Date();
date.toString();
date.getTimezoneOffset(); => -540
console.log()에 표시된 문자열은 같습니다.
당연하다Full Calendar의 설정은 timezone: 'no timezone'이기 때문이다.

timezone: 'UTC'


이벤트 (달력 표시 기간)

start.toISOString() => 2015-09-06 end.toISOString() => 2015-09-13

선택 (새로운 이벤트 제작 묘사)

start.toISOString() => 2015-09-08T06:00:00.000Z end.toISOString() => 2015-09-08T06:30:00.000Z

이벤트Drop(이벤트 이동)

event.start.toISOString() => 2015-09-08T07:00:00.000Z event.end.toISOString() => 2015-09-08T07:30:00.000Z

이벤트 클릭

event.start.toISOString() => 2015-09-08T07:00:00.000Z event.end.toISOString() => 2015-09-08T07:30:00.000Z

eventResize(크기별로 편집)

event.start.toISOString() => 2015-09-08T07:00:00.000Z event.end.toISOString() => 2015-09-08T08:00:00.000Z

결실

UTC를 잘 나타내는 문자열이 있습니다!

좋은 웹페이지 즐겨찾기