2017-05-07 12 views
0

나는 Fullcalendar를 사용 중이므로 timeline보기를 사용하여 모든 현재 연도와 내년의 다음 두 달을 표시해야합니다. 나는이 방법으로 visibleRange 옵션을 사용하는 경우Fullcalendar : 타임 라인보기에서 내년의 다음 두 달을 표시하는 방법

:

visibleRange: function (currentDate) { 
return { 
    start: currentDate.year()+'-01-01', 
    end: currentDate.year()+1 + '-02-28', 
};} 

달력이 정확한 기간하지만 탐색 버튼이 표시를 '다음'작업을 중지합니다.

나는 또한 duration 옵션을 사용하려고 시도했지만 "시작"기간을 설정하는 방법을 모르겠습니다 .... 현재 날짜는 항상 시작됩니다.

전체 사용자 지정보기를 쓰지 않아도되는 솔루션이 있다고 생각합니다.

답변

1

이 해결책은 dateIncrement 값을 설정하는 것입니다.이 방법은 다음/prev 버튼에서 이와 같이보기 범위를 사용자 정의 할 때 표시되는 날짜를 늘리거나 줄일 거리를 알려줍니다.

다음은 예입니다. N.B. 나는 가시적 인 범위를 설정하는보다 견고하고 깔끔한 방법을 제공하기 위해 문자열 결합이 아닌 momentJS의 내장 함수를 사용했습니다. slotDuration을 대량의 긴 달력을 만들지 않는 무언가로 설정하는 것도 좋은 생각 일 것입니다. 예를 들어 1 개월 동안 사용해 왔지만, 필요에 따라 구성 할 수 있습니다.

$('#calendar').fullCalendar({ 
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source', 
    defaultView: 'timeline', 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'timeline' 
    }, 
    slotDuration: { months: 1 }, 
    dateIncrement: { years: 1 }, 
    visibleRange: function (currentDate) { 
     return { 
      start: currentDate.clone().startOf('year'), 
      end: currentDate.clone().startOf('year').add({ years: 1, months: 2}), 
     }; 
    }, 
    //...etc 
}); 

dateIncrement 설정은 여기에 설명되어 있습니다 : https://fullcalendar.io/docs/current_date/dateIncrement/