Skip to content
VueJS Functional Calendar | Component/Package
Branch: master
Clone or download

README.md

VueJS Functional Calendar (Date Picker, Date Range) Tweet

Build Status Version Software License Downloads gzip size


Demo

Demo: https://y3jnxov469.codesandbox.io/

Edit VueJS Functional Calendar Component


  • Lightweight, high-performance calendar component based on Vue.js
  • Small memory usage, good performance, good style, and high scalability
  • Native js development, no third-party library introduced
  • Date Picker, Date Range, Multiple Calendars, Modal Calendar

Browser Support

Chrome Firefox Safari Opera Edge IE
Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔

Install

npm i vue-functional-calendar --save

Usage

Import Component

// Introduced in vue file
import FunctionalCalendar from 'vue-functional-calendar';

Component Settings

export default {
    components: {
        FunctionalCalendar
    },
    data() {
        return {
            calendarData: {}
        }
    }
}

Template Usage

<FunctionalCalendar
      // v-model="calendarData"
      
      // v-on:changedMonth="changedMonth"
      // v-on:changedYear="changedYear"
      
      // :sundayStart="true"
      // :date-format="'dd/mm/yyyy'"
      // :is-date-range="true"
      // :is-date-picker="true"      
       :...:
></FunctionalCalendar>

Usage With Configs

Component Settings

export default {
    components: {
        FunctionalCalendar
    },
    data() {
        return {
            calendarData: {},
            calendarConfigs: {
                sundayStart: false,
                dateFormat: 'dd/mm/yyyy',
                isDatePicker: false,
                isDateRange: false
            }
        }
    },
}

Template Usage

<FunctionalCalendar
      // v-model="calendarData"
      // :configs="calendarConfigs"
></FunctionalCalendar>

A note on markDates

The markedDates property must be in JavaScript Date format, e.g, no leading zeroes on month and days.

Correct: 1/12/2019 Incorrect: 01/12/2019


Available props

Prop Type Default Example Description
sundayStart Boolean false true Week start sunday
newCurrentDate Date new Date() new Date(2019,10,11) Calendar Current Date
limits [Object, Boolean] false {min: '31/10/2019', max: '31/12/2019'} Set calendar show, and marked dates limits.
placeholder [String, Boolean] false 'yyyy/mm/dd' Date input placeholder
dateFormat String 'dd/mm/yyyy' 'yyyy/mm/dd' Date formatting string
isDatePicker Boolean false true Enable or disable date picker
isDateRange Boolean false true Enable or disable date range
isMultiple Boolean false true Enable multiple calendar function
calendarsCount Number 1 3 Count of calendars, working only is prop isMultiple
isModal Boolean false true Enable modal calendar function
isTypeable Boolean false true Enable manually date typing function, working only with prop isModal
changeMonthFunction Boolean false true Enable changed month with list, function
changeYearFunction Boolean false true Enable changed year with list, function
applyStylesheet Boolean true false Disable default styles
markedDates Array [] ['10/12/2018', '12/12/2018'] OR [{date: '10/1/2019', class: 'marked-class'},{date: '12/1/2019', class: 'marked-class-2'}] Marked dates array
markedDateRange Object {start: false, end: false} {start: '12/12/2018', end: '20/12/2018'} Marked date with range
disabledDayNames Array [] ['Su','We'] Disabled Days Of Week
disabledDates Array [] ['24/12/2018','27/12/2018'] Disabled Dates
dayNames Array ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] ['Monday', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Sunday'] Week Day Names
monthNames Array ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] ["Jan.", "Feb.", "Mar", "Apr.", "May", "Jun.", "Jul.", "Aug.", "Sept.", "Oct.", "Nov.", "Dec."] Month names
transition Boolean true false Calendar animations
hiddenElements Array [] ['dayNames', 'navigationArrows', 'leftAndRightDays', 'month'] Hide calendar elements

Events

Event Output Description
changedMonth Date Month page has been changed
changedYear Date Year page has been changed
selectedDaysCount Number Get number of days between date range dates
opened The picker is opened
closed The picker is closed
Add the ref attribute to the Calendar tab, exposing three methods to switch the month directly
For example: <FunctionalCalendar ref="Calendar"></FunctionalCalendar>this.$refs.Calendar.PreMonth();  //Call method implementation to go to previous monththis.$refs.Calendar.NextMonth(); //Call method implementation to go to next monththis.$refs.Calendar.PreYear(); //Call method implementation to go to previous yearthis.$refs.Calendar.NextYear(); //Call method implementation to go to next yearthis.$refs.Calendar.ChooseDate('today'); //Call method implementation to go to todaythis.$refs.Calendar.ChooseDate('2018-12-12'); //Call method implementation to go to a date

Other

  • The following Demo.vue has a demo for reference.
You can’t perform that action at this time.