Install and Usage

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 {
            calendar: {}
        }
    },
    clickDay(data) {
      console.log(data); // Get Clicked Day
    },
    changeDate(data) {
      console.log(data); //Click left and right to switch months
    },
    clickToday(data) {
      console.log(data); //Jumped to this month
    }
}

Template Usage

<FunctionalCalendar
      // v-model="calendar"
      
      // :day-names="dayNames" //dayNames=['Su','Mo','Tu','We','Th','Fr','Sa']
      // :month-names="monthNames" //monthNames=["January","February","March","April","May","June","July","August","September","October","November","December"]
      
      // v-on:choseDay="clickDay"
      // v-on:changeMonth="changeDate"
      // v-on:isToday="clickToday"
      
      // :sundayStart="true"
      
      // :is-date-range="true"
      // :is-date-picker="true"
      // :is-modal="false"
      
      // :is-multiple="true"
      // :calendars-count="3"
      
      // :change-month-function="true"
      // :change-year-function="true"
      
      // :markDate=arr // arr=['2018/10/20','2018/10/28', '2018/10/16']
      // :agoDayHide='1514937600' //Do not click before a date. Timestamp 10 digits
      // :futureDayHide='1525104000' //Do not click after a date Timestamp 10 digits
      
      // :apply-stylesheet="true"  
></FunctionalCalendar>

Multiple tag examples

The className of the April 1 tag is mark 1 and some markup styles are made according to the class.

arr=[{date:'2018/4/1',className:"mark1"}, {date:'2018/4/13',className:"mark2"}];

Usage With Configs

Component Settings

export default {
    components: {
        FunctionalCalendar
    },
    data() {
        return {
            calendar: {
                configs: {
                    sundayStart: false,
                    isDatePicker: false,
                    isDateRange: false,
                    isMultiple: false,
                    calendarsCount: 3,
                    changeMonthFunction: false,
                    changeYearFunction: false,
                    dayNames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                    monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
                    isModal: false,
                    applyStylesheet: true,
                }
            }
        }
    },
}

Template Usage

<FunctionalCalendar
      // v-model="calendar"
      
      // :configs="calendar.configs"
      
      // v-on:choseDay="clickDay"
      // v-on:changeMonth="changeDate"
      // v-on:isToday="clickToday"
      
      
      // :markDate=arr // arr=['2018/10/20','2018/10/28', '2018/10/16']
      // :agoDayHide='1514937600' //Do not click before a date. Timestamp 10 digits
      // :futureDayHide='1525104000' //Do not click after a date Timestamp 10 digits
></FunctionalCalendar>