Package Exports

vue-functional-calendar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-functional-calendar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

VueJS Functional Calendar (Date Picker, Date Range)

Demo

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

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


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.
minSelDays	[Number, Boolean]	false	3	Set minimum selected days count.
maxSelDays	[Number, Boolean]	false	10	Set maximum selected days count.
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

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]