Blog Detail

Dec

Vue-cal - A Vue 2 & 3 Full Calendar with No Dependency

Vue-cal is a vue js component for a full calendar with no dependency. It is compatible with Vuejs 2 & 3 version. Vue Cal provides the minimum needed CSS styles, not the nicest one: that makes it highly customizable for all the scenarios and a breeze to override, you most likely don’t need the !important flag.

Installation

You can install this package via npm:

Vue 2

npm i vue-cal

Vue 3

npm i vue-cal@next

After the installation, You’ve to import the VueCal component and use it:

// In your Vue.js component.
import VueCal from 'vue-cal'
import 'vue-cal/dist/vuecal.css'
...

export default {
  components: { VueCal },
  data: () => ({
    ...
  }),
  ...
}

Via script tag

You can also use this component via CDN. You’ve to include the Vue Cal script in your document as follows:

<head>
 
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-cal"></script>
  <link href="https://unpkg.com/vue-cal/dist/vuecal.css" rel="stylesheet">
</head>
Then define the component to use in your template:

// In your Vue.js component.
export default {
  components: { 'vue-cal': vuecal },
 
}

How to use

Wait! Before you dive in, make sure you place Vue Cal in a container that has a set height! (not auto or initial)
By default Vue Cal will take the full width & height of its container if it has a set height.

<!-- If the container has no height, set a height on vue-cal -->
<vue-cal style="height: 250px" />

Basic with no timeline & hidden weekends

You can double click cell to go to a narrower view and click the title to go to a broader view.
By default, the calendar theme is grey to match with most web pages.

<vue-cal :time="false" hide-weekends />

Calendar themes - Rounded cells & date picker

You can easily change the calendar color theme or use the rounded-cells theme by applying the corresponding CSS class on the tag.
E.g. vuecal–rounded-theme, vuecal–green-theme, vuecal–blue-theme. Read more about calendar themes in the CSS Notes section.

Because Vue Cal has the potential out of the box, you can also use it as a date picker.
Apply the css class vuecal–date-picker to have the date picker look below.
you can also disable the transitions to have a fast effect.

Vue template - rounded cell

<vue-cal
    class="vuecal--rounded-theme vuecal--green-theme"
    xsmall
    hide-view-selector
    :time="false"
    active-view="month"
    :disable-views="['week']"
    style="width: 270px;height: 300px">
</vue-cal>

Vue template - date picker

<vue-cal
    class="vuecal--date-picker"
    xsmall
    hide-view-selector
    :time="false"
    :transitions="false"
    active-view="month"
    :disable-views="['week']"
    style="width: 210px;height: 230px">
</vue-cal>

There are a lot of customization options are available in this component. You can visit all the details on Github.

Published at : 28-12-2021

AUTHOR

Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.