Modern Calendar And Datepicker For Vue – Functional Calendar

A lightweight, powerful, high-performance calendar & date picker component for Vue applications.

How to use it:

1. Import and register the Functional Calendar.

import FunctionalCalendar from 'vue-functional-calendar';
Vue.use(FunctionalCalendar, {
  // options
});

// OR
import { FunctionalCalendar } from 'vue-functional-calendar';
export default {
  components: {
    FunctionalCalendar
  },
  data() {
    return {
      calendarData: {}
    }
  }
}

2. Add the component to the template.

// OR
import { FunctionalCalendar } from 'vue-functional-calendar';
export default {
  components: {
    FunctionalCalendar
  },
  data() {
    return {
      calendarData: {},
      calendarConfigs: {
        // options
      }
    }
  }
}

3. Available component props.

{
  sundayStart: false,
  newCurrentDate: new Date(),
  limits: false, // {min: '31/10/2019', max: '31/12/2019'}
  minSelDays: false, // Set minimum selected days count.
  maxSelDays: false,
  placeholder: false, // 'yyyy/mm/dd'
  dateFormat: 'dd/mm/yyyy',
  isDatePicker: false,
  isMultipleDatePicker: false,
  isMultipleDateRange: false,
  isDateRange: false,
  withTimePicker: false,
  isMultiple: false,
  calendarsCount: 1,
  isSeparately: false,
  isModal: false,
  isAutoCloseable: false,
  isTypeable: false,
  changeMonthFunction: false,
  changeYearFunction: false,
  changeYearStep: 12,
  changeMonthStep: 1,
  markedDates: ['10/12/2020', '12/12/2020'],
  markedDateRange: {start: false, end: false} ,
  disabledDayNames: ['Su','We'],
  disabledDates: ['24/12/2020','27/12/2020'],
  enabledDates: ['24/12/2020','27/12/2020'],
  dayNames: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
  monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  shortMonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  showWeekNumbers: false,
  transition: true,
  hiddenElements: ['dayNames', 'navigationArrows', 'leftAndRightDays', 'month'],
  titlePosition: 'center', // left, right, center
  arrowsPosition: 'space-between', // left, right, space-between  Set arrows position
  isDark: false,
  isLayoutExpandable: false,
  alwaysUseDefaultClasses: false,
}

4. Slots.

• Default: Props: {week: Object, day: Object}
• datePickerInput: Props: {selectedDate: String, isTypeable: Boolean}
• dateRangeInputs: Props: {startDate: String, endDate: String, isTypeable: Boolean}
• footer: Props: {}

5. Events.

• @dayClicked
• @choseDay
• @changedMonth
• @changedYear
• @selectedDaysCount
• @dayMouseOver
• @opened
• @closed

6. API methods.

this.$refs.Calendar.PreMonth();

this.$refs.Calendar.NextMonth();

this.$refs.Calendar.PreYear();

this.$refs.Calendar.NextYear();

this.$refs.Calendar.ChooseDate('today');

this.$refs.Calendar.ChooseDate('25/09/2020');

Preview:

Changelog:

v2.9.94 (06/16/2022)

• fix: additional check for enabledDates
• Showing only a limited range of hours and minutes

v2.9.9 (05/20/2022)

• fix: check for datesCollection

Download Details:

Author: ManukMinasyan

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

Download Link: https://github.com/ManukMinasyan/vue-functional-calendar/archive/refs/heads/master.zip

Official Website: https://github.com/ManukMinasyan/vue-functional-calendar

Install & Download:

# Yarn
$ yarn add vue-functional-calendar

# NPM
$ npm i vue-functional-calendar