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

Feature of calendar component based on Vue.js

  • 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

There are following steps to use calendar component based on Vue.js

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

PropTypeDefaultExampleDescription
sundayStartBooleanfalsetrueWeek start sunday
newCurrentDateDatenew 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]false3Set minimum selected days count.
maxSelDays[Number, Boolean]false10Set maximum selected days count.
placeholder[String, Boolean]false‘yyyy/mm/dd’Date input placeholder
dateFormatString‘dd/mm/yyyy’‘yyyy/mm/dd’Date formatting string
isDatePickerBooleanfalsetrueEnable or disable date picker
isMultipleDatePickerBooleanfalsetrueEnable or disable multiple date picker
isMultipleDateRangeBooleanfalsetrueEnable or disable multiple date range
isDateRangeBooleanfalsetrueEnable or disable date range
withTimePickerBooleanfalsetrueEnable or disable time picker
isMultipleBooleanfalsetrueEnable multiple calendar function
calendarsCountNumber13Count of calendars, working only is prop isMultiple
isSeparatelyBooleanfalsetrueEnable separately calendars
isModalBooleanfalsetrueEnable modal calendar function
isAutoCloseableBooleanfalsetrueHide picker(calendar) if date has been selected
isTypeableBooleanfalsetrueEnable manually date typing function, working only with prop isModal
changeMonthFunctionBooleanfalsetrueEnable changed month with list, function
changeYearFunctionBooleanfalsetrueEnable changed year with list, function
changeYearStepNumber126Change year list step count
changeMonthStepNumber13How many months to jump forward with NextMonth()
markedDatesArray[][’10/12/2020′, ’12/12/2020′] OR [{date: ’10/1/2020′, class: ‘marked-class’},{date: ’12/1/2020′, class: ‘marked-class-2’}]Marked dates array
markedDateRangeObject{start: false, end: false}{start: ’12/12/2020′, end: ’20/12/2020′} OR [{start: ’12/12/2020′, end: ’20/12/2020′}, {start: ’24/12/2020′, end: ’28/12/2020′}]Marked date ranges
disabledDayNamesArray[][‘Su’,’We’]Disabled Days Of Week
disabledDatesArray[][’24/12/2020′,’27/12/2020′] OR [‘beforeToday’, ‘afterToday’, ’24/12/2020′,’27/12/2020′]Disabled Dates
enabledDatesArray[][’24/12/2020′,’27/12/2020′]Reversal of Disabled Dates
dayNamesArray[‘Mo’, ‘Tu’, ‘We’, ‘Th’, ‘Fr’, ‘Sa’, ‘Su’][‘Monday’, ‘Tu’, ‘We’, ‘Th’, ‘Fr’, ‘Sa’, ‘Sunday’]Week Day Names
monthNamesArray[“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
shortMonthNamesArray[“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
showWeekNumbersBooleanfalsetrueDisplay week numbers.
transitionBooleantruefalseCalendar animations
hiddenElementsArray[][‘dayNames’, ‘navigationArrows’, ‘leftAndRightDays’, ‘month’]Hide calendar elements
titlePositionStringcenterleft, right, centerSet title position
arrowsPositionStringspace-betweenleft, right, space-betweenSet arrows position
isDarkBooleanfalsetrueDark theme
isLayoutExpandableBooleanfalsetrueEnable expanding the calendar layout
alwaysUseDefaultClassesBooleanfalsetrueAlways add default classes to Day element, even when overriding with a slot
Available props

Slots

NameDescriptionProps
DefaultDefault slot responsible for the day component{week: Object, day: Object}
datePickerInputThis slot responsible for the modal date picker input{selectedDate: String, isTypeable: Boolean}
dateRangeInputsThis slot responsible for the modal date range inputs{startDate: String, endDate: String, isTypeable: Boolean}
footerThis slot responsible for the calendar footer{}
Slots

Events

EventOutputDescription
dayClickedObjectGet clicked day object
choseDayObjectGet the object of the selected day
changedMonthDateMonth page has been changed
changedYearDateYear page has been changed
selectedDaysCountNumberGet number of days between date range dates
dayMouseOverDateMouse over day
openedThe picker is opened
closedThe picker is closed
Events

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

Leave a Comment