Go to content
The Codest
  • About Us
    • Staff Augmentation
    • Project Development
    • Cloud Engineering
    • Quality Assurance
    • Web Development
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
  • About Us
    • Staff Augmentation
    • Project Development
    • Cloud Engineering
    • Quality Assurance
    • Web Development
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
Content
2021-08-05
Software Development

Meet Vuelendar: a Datepicker Calendar Written in VueJS

Lukasz Usarz

Senior Software Engineer

For most of the time, we’ve been using the Vue wrapper for pikaday in our projects to create the feature of the calendar.

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 product. This is why the Vuelendar was made.

You can find the source code of the Vuelendar in our GitHub repository.

What is it exactly?

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.

The creation process

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.

Installation

npm install vuelendar@1.0.0

Usage

Import styles in your .vue file:

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

Register components:

import VRangeSelector from 'vuelendar/components/vl-range-selector';
import VDaySelector from 'vuelendar/components/vl-day-selector';

export default {
  components: {
    VRangeSelector,
    VDaySelector
  },
  data () {
    return {
      range: {},
      date: null
    }
  }
  // ...
}

Use in template:

<v-range-selector
  :start-date.sync="range.start"
  :end-date.sync="range.end"
/>

<v-day-selector
  v-model="date"
/>

Disabling dates

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

Application

Our 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 project with a smoothly working calendar. Nowadays, there are many projects which might need this a solution, so here we are!

The update

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.

Wrapping Up

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!

Read more:

Why you should (probably) use Typescript

How not to kill a project with bad coding practices?

Data fetching strategies in NextJS

Related articles

Software Development

3 Useful HTML Tags You Might Not Know Even Existed

Nowadays, accessibility (A11y) is crucial on all stages of building custom software products. Starting from the UX/UI design part, it trespasses into advanced levels of building features in code. It provides tons of benefits for...

Jacek Ludzik
Software Development

5 examples of Ruby’s best usage

Have you ever wondered what we can do with Ruby? Well, the sky is probably the limit, but we are happy to talk about some more or less known cases where we can use this powerful language. Let me give you some examples.

Pawel Muszynski
Software Development

Maintaining a Project in PHP: 5 Mistakes to Avoid

More than one article has been written about the mistakes made during the process of running a project, but rarely does one look at the project requirements and manage the risks given the technology chosen.

Sebastian Luczak
Software Development

Why you will find qualified Ruby developers in Poland?

Real Ruby professionals are rare birds on the market. Ruby is not the most popular technology, so companies often struggle with the problem of finding developers who have both high-level skills and deep experience; oh, and by the...

Jakub
Software Development

9 Mistakes to Avoid While Programming in Java

What mistakes should be avoided while programming in Java? In the following piece we answers this question.

Rafal Sawicki
Software Development

A quick dive into Ruby 2.6. What is new?

Released quite recently, Ruby 2.6 brings a bunch of conveniences that may be worth taking a glimpse of.  What is new? Let’s give it a shot!

Patrycja Slabosz

Subscribe to our knowledge base and stay up to date on the expertise from industry.

About us

The Codest – International Tech Software Company with tech hubs in Poland.

    United Kingdom - Headquarters

  • Office 303B, 182-184 High Street North E6 2JA London, England

    Poland - Local Tech Hubs

  • Fabryczna Office Park, Aleja Pokoju 18, 31-564 Kraków
  • Brain Embassy, Konstruktorska 11, 02-673 Warsaw, Poland

    The Codest

  • Home
  • About us
  • Services
  • Case studies
  • Know how
  • Careers

    Services

  • PHP development
  • Java development
  • Python development
  • Ruby on Rails development
  • React Developers
  • Vue Developers
  • TypeScript Developers
  • DevOps
  • QA Engineers

    Resources

  • What are top CTOs and CIOs Challenges? [2022 updated]
  • Facts and Myths about Cooperating with External Software Development Partner
  • From the USA to Europe: Why do American startups decide to relocate to Europe
  • Privacy policy
  • Website terms of use

Copyright © 2023 by The Codest. All rights reserved.

We use cookies on the site for marketing, analytical and statistical purposes. By continuing to use, without changing your privacy settings, our site, you consent to the storage of cookies in your browser. You can always change the cookie settings in your browser. You can find more information in our Privacy Policy.