미래 지향적인 웹 앱 구축: The Codest의 전문가 팀이 제공하는 인사이트
The Codest가 최첨단 기술로 확장 가능한 대화형 웹 애플리케이션을 제작하고 모든 플랫폼에서 원활한 사용자 경험을 제공하는 데 탁월한 성능을 발휘하는 방법을 알아보세요. Adobe의 전문성이 어떻게 디지털 혁신과 비즈니스를 촉진하는지 알아보세요...
대부분의 경우, 저희는 프로젝트에서 피카데이용 Vue 래퍼를 사용하여 캘린더 기능을 만들어 왔습니다.
As the customization was getting more challenging and time-consuming, we’ve decided to look for another solution. What’s more, the APIs did not allow us to implement lots of requirements that were quite crucial for the quality of the end 제품. This is why the Vuelendar was made.
You can find the source 코드 의 Vuelendar in our GitHub repository.
As you might already guessed at the beginning of this article, a Vuelendar is a calendar component written in VueJs. It allows you to pick a range of dates or a single one. What is more, you can also easily replace inactive days! Also , it allows you to add customized CSS bits which can ultimately change the ‘look and feel’ experience.
Previously, we were using jQquery to implement the calendar feature in one of our projects and we’ve stumbled upon a problem – it was hard to customize. This is when we’ve made a decision to make our own component. In the first phase, we mainly used it in our own projects but as the time went by, we came to the conclusion that it might be a handy solution for other programmers – this is when we shared it on The Codest’s GitHub account in the form of a code library.
npm 설치 [email protected]
Import styles in your .vue file:
<style src="vuelendar/scss/vuelendar.scss" lang="scss"></style>
Register components:
'vuelendar/components/vl-range-selector'에서 VRangeSelector를 가져옵니다;
'vuelendar/components/vl-day-selector'에서 VDaySelector를 임포트합니다;
내보내기 기본 {
구성 요소: {
VRangeSelector,
VDaySelector
},
data () {
반환 {
범위: {},
date: null
}
}
// ...
}
Use in template:
Vuelendar allows two ways for disabling dates.
Using an array:
<v-day-selector
v-model="date"
disabled-dates="['2019-04-21', '2019-04-25']
/>
Will disable 21st April 2019 and 25th April 2019
Using an object to describe a range of dates:
<v-day-selector
v-model="date"
disabled-dates="{
from: '2019-04-21',
to: '2019-04-23'
}"
/>
Will disable all dates from 21st April 2019 and 25th April 2019
Specifying only ‘from’ attribute will disable all dates past that date.
<v-day-selector
v-model="date"
disabled-dates="{
from: '2019-04-21',
}"
/>
Will disable all dates from 21st April 2019
Specifying only ‘to’ attribute will disable all dates before that date.
<v-day-selector
v-model="date"
disabled-dates="{
to: '2019-04-21',
}"
/>
Will disable all dates before 21st April 2019
우리의 Vuelendar can be used in all projects based on VueJS. It is a simple but efficient component that will not only save your time as a programmer but also enrich your 프로젝트 with a smoothly working calendar. Nowadays, there are many projects which might need this a solution, so here we are!
As the new update of VueJS was launched, the new requirements appeared. This is why we’ve decided to adjust our calendar component to the newest version of VueJS. The libraries needed to be improved so that our small but handy gem would run smoothly and effectively.
If you are in the middle of a project based on VueJS and search for a cool feature of a calendar, this one is definitely for you! We all know how much time creating those components can take. Our Vuelandar will help you spice up your application and save some time and nerves!
자세히 읽어보세요: