Skip to content

ManukMinasyan/vue-functional-calendar

Repository files navigation

Vue Functional Calendar

Modern calendar and datepicker module for Vue.js

Version Software License Downloads Open Collective

Sponsors


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.
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
isMultipleDateRange Boolean false true Enable or disable multiple date range
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
changeMonthStep Number 1 3 How many months to jump forward with NextMonth()
markedDates Array [] ['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
markedDateRange Object {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
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
enabledDates Array [] ['24/12/2020','27/12/2020'] Reversal of 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
titlePosition String center left, right, center Set title position
arrowsPosition String space-between left, right, space-between Set arrows position
isDark Boolean false true Dark theme
isLayoutExpandable Boolean false true Enable expanding the calendar layout
alwaysUseDefaultClasses Boolean false true Always add default classes to Day element, even when overriding with a slot
activeHours Array [] [8, 9,10, 18, 19, 20] The hours you want to be shown in the timepicker (by default all of them are shown)
activeMinutes Array [] [0, 15, 30, 45] The minutes you want to be shown in the timepicker (by default all of them are shown)

Slots

Name Description Props
Default Default slot responsible for the day component {week: Object, day: Object}
datePickerInput This slot responsible for the modal date picker input {selectedDate: String, isTypeable: Boolean}
dateRangeInputs This slot responsible for the modal date range inputs {startDate: String, endDate: String, isTypeable: Boolean}
footer This slot responsible for the calendar footer {}

Events

Event Output Description
dayClicked Object Get clicked day object
choseDay Object Get the object of the selected day
changedMonth Date Month page has been changed
changedYear Date Year page has been changed
selectedDaysCount Number Get number of days between date range dates
dayMouseOver Date Mouse over day
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