VueJS로 작성된 날짜 선택 캘린더, Vuelendar를 만나보세요.

루카스 우사르츠

시니어 Software Engineer

대부분의 경우, 저희는 프로젝트에서 피카데이용 Vue 래퍼를 사용하여 캘린더 기능을 만들어 왔습니다.

커스터마이징이 점점 더 어려워지고 시간이 많이 소요됨에 따라 다른 솔루션을 찾기로 결정했습니다. 게다가 API로는 최종 품질에 매우 중요한 많은 요구 사항을 구현할 수 없었습니다. 제품. 그렇기 때문에 Vuelendar 가 만들어졌습니다.

소스를 찾을 수 있습니다. 코드 의 Vuelendar 에서 GitHub 리포지토리.

정확히 무엇일까요?

이 글의 서두에서 이미 짐작하셨겠지만, 이 글은 Vuelendar 는 VueJ로 작성된 캘린더 컴포넌트입니다. 여러 날짜 또는 단일 날짜를 선택할 수 있습니다. 또한 비활성 날짜를 쉽게 교체할 수도 있습니다! 또한 궁극적으로 '룩앤필' 경험을 바꿀 수 있는 사용자 정의 CSS 비트를 추가할 수 있습니다.

생성 프로세스

이전에는 프로젝트 중 하나에서 캘린더 기능을 구현하기 위해 jQquery를 사용했는데 사용자 지정이 어렵다는 문제에 부딪혔습니다. 그래서 자체 컴포넌트를 만들기로 결정했습니다. 첫 단계에서는 주로 자체 프로젝트에 사용했지만 시간이 지나면서 다른 프로그래머에게도 유용한 솔루션이 될 수 있다는 결론에 도달했고, The Codest의 GitHub 계정에 코드 라이브러리 형태로 공유하게 되었습니다.

설치

npm 설치 [email protected]

사용법

.vue 파일에서 스타일을 가져옵니다:

<style src="vuelendar/scss/vuelendar.scss" lang="scss"></style>

컴포넌트를 등록합니다:

'vuelendar/components/vl-range-selector'에서 VRangeSelector를 가져옵니다;
'vuelendar/components/vl-day-selector'에서 VDaySelector를 임포트합니다;

내보내기 기본 {
  구성 요소: {
    VRangeSelector,
    VDaySelector
  },
  data () {
    반환 {
      범위: {},
      date: null
    }
  }
  // ...
}

템플릿에서 사용하세요:

날짜 비활성화

Vuelendar에서는 두 가지 방법으로 날짜를 비활성화할 수 있습니다.

배열 사용:

2019년 4월 21일과 2019년 4월 25일을 비활성화합니다.

객체를 사용하여 날짜 범위를 설명합니다:

2019년 4월 21일과 2019년 4월 25일의 모든 날짜를 비활성화합니다.

'from' 속성만 지정하면 해당 날짜 이후의 모든 날짜가 비활성화됩니다.

2019년 4월 21일부터 모든 날짜를 비활성화합니다.

'to' 속성만 지정하면 해당 날짜 이전의 모든 날짜가 비활성화됩니다.

2019년 4월 21일 이전의 모든 날짜를 비활성화합니다.

애플리케이션

우리의 Vuelendar VueJS를 기반으로 하는 모든 프로젝트에서 사용할 수 있습니다. 간단하지만 효율적인 구성 요소로 프로그래머의 시간을 절약해줄 뿐만 아니라 프로젝트 원활하게 작동하는 캘린더로 말이죠. 요즘에는 이러한 솔루션이 필요할 수 있는 프로젝트가 많기 때문에 여기 있습니다!

업데이트

VueJS의 새 업데이트가 출시되면서 새로운 요구 사항이 나타났습니다. 그래서 저희는 캘린더 컴포넌트를 최신 버전의 VueJS로 조정하기로 결정했습니다. 작지만 편리한 캘린더가 원활하고 효과적으로 실행될 수 있도록 라이브러리를 개선해야 했습니다.

마무리

VueJS를 기반으로 프로젝트를 진행 중이고 캘린더의 멋진 기능을 찾고 있다면 이 기능을 꼭 사용해보세요! 이러한 컴포넌트를 만드는 데 얼마나 많은 시간이 걸릴 수 있는지 모두 알고 있습니다. 우리의 Vuelandar 를 사용하면 응용 프로그램을 멋지게 꾸미고 시간과 신경을 절약할 수 있습니다!

자세히 읽어보세요:

타입스크립트를 사용해야 하는 (아마도) 이유

잘못된 코딩 관행으로 프로젝트를 죽이지 않는 방법은 무엇인가요?

NextJS의 데이터 가져오기 전략