ZHENGGEGE / vue-functional-calendar

VueJS Functional Calendar Component

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

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
leftAndRightDays	Boolean	true	false	Show or hide left and right days, prev or next months
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

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 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('2018-12-12'); //Call method implementation to go to a date

Other

• The following Demo.vue has a demo for reference.