@spinyman/vue functional calendar

Lightweight, high-performance calendar component based on Vue.js

Version: 2.8.4 Updated: 12/29/2019

By: SpinyMan License: MIT

Downloads Last 30 Days: 121

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
39+ ✔ 28+ ✔ 10.1+ ✔ 27+ ✔ 15+ ✔ Latest ✔

Install

npm i vue-functional-calendar --save

Usage

Vue.use()

// Introduced in vue file
import FunctionalCalendar from 'vue-functional-calendar';
Vue.use(FunctionalCalendar, {
    dayNames: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
});

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
isMultipleDatePicker Boolean false true Enable or disable multiple date picker
isDateRange Boolean false true Enable or disable date range
withTimePicker Boolean false true Enable or disable time picker
isMultiple Boolean false true Enable multiple calendar function
calendarsCount Number 1 3 Count of calendars, working only is prop isMultiple
isSeparately Boolean false true Enable separately calendars
isModal Boolean false true Enable modal calendar function
isAutoCloseable Boolean false true Hide picker(calendar) if date has been selected
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
changeYearStep Number 12 6 Change year list step count
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/2020','27/12/2020'] OR ['beforeToday', 'afterToday', '24/12/2020','27/12/2020'] 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
shortMonthNames Array ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] ["Jan.", "Feb.", "Mar", "Apr.", "May", "Jun.", "Jul.", "Aug.", "Sept.", "Oct.", "Nov.", "Dec."] Short month names
showWeekNumbers Boolean false true Display week numbers.
transition Boolean true false Calendar animations
hiddenElements Array [] ['dayNames', 'navigationArrows', 'leftAndRightDays', 'month'] Hide calendar elements
isDark Boolean false true Dark theme

Events

Event Output Description
choseDay Object Get clicked day object
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 component and use these methods to do more.
For example: <FunctionalCalendar ref="Calendar"></FunctionalCalendar>

    ✅ this.$refs.Calendar.PreMonth();  //Call method implementation to go to previous month
    ✅ this.$refs.Calendar.NextMonth(); //Call method implementation to go to next month
    ✅ this.$refs.Calendar.PreYear(); //Call method implementation to go to previous year
    ✅ this.$refs.Calendar.NextYear(); //Call method implementation to go to next year
    ✅ this.$refs.Calendar.ChooseDate('today'); //Call method implementation to go to today
    ✅ this.$refs.Calendar.ChooseDate('25/09/2020'); //Call method implementation to go to a date

Categories: Vue js