Skip to content
codingtube

codingtube

Coding and Programming tutorials

  • javascript
  • React
  • ES6
  • React js
  • coding
  • ffmpeg
  • java
  • programming
  • information
  • coding
  • Privacy Policy
  • Twitter trends
  • Age Calculatore
  • Codingtube Community
  • YouTube Tags Generator
  • About
  • Toggle search form

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

Posted on December 4, 2021December 4, 2021 By christo No Comments on Lightweight, high-performance calendar component based on Vue.js

Table of Contents

  • Feature of calendar component based on Vue.js
    • There are following steps to use calendar component based on Vue.js
  • Install
  • Usage
  • Import Component
  • Component Settings
  • Template Usage
  • Usage With Configs
  • Template Usage
  • A note on markDates
  • Available props
  • Slots
  • Events
    • Add the ref attribute to the calendar component and use these methods to do more

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
Demo
Full Project
vue.js Tags:calendar component based on Vue.js

Post navigation

Previous Post: Vue web storage
Next Post: A Slide-Out component for Vue3

Related Posts

A simple hands-on mobile nested menu UI component with a smooth slide animation vue.js
Vue.js form validation vee-validate library vue.js
A Slide-Out component for Vue3 vue.js
Vue JSON to CSV file vue.js
Get easy and reactive access to the width and height of your screen using vue.js vue.js
A simple and flexible implementation of toast style notifications using Vue.js vue.js

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Affiliate Marketing Principles
  • The Basics You Need to Know About Affiliate Marketing
  • Affiliate Marketing Options
  • All About Affiliate Marketing
  • Classification of Database Management Systems
  • Three-Tier and n-Tier Architectures
    for Web Applications
  • Two-Tier Client/Server Architectures for DBMSs
  • Basic Client/Server Architectures in DBMS
  • Centralized DBMSs Architecture in DBMS
  • Tools, Application Environments, and Communications Facilities in DBMS

Categories

  • Affiliate marketing (5)
  • Algorithm (43)
  • amp (3)
  • android (223)
  • Android App (8)
  • Android app review (4)
  • android tutorial (60)
  • Artificial intelligence (61)
  • AWS (3)
  • bitcoin (8)
  • blockchain (1)
  • c (5)
  • c language (105)
  • cloud computing (4)
  • coding (4)
  • coding app (4)
  • complex number (1)
  • Computer Graphics (66)
  • data compression (65)
  • data structure (188)
  • DBMS (44)
  • digital marketing (9)
  • distributed systems (11)
  • ffmpeg (26)
  • game (3)
  • html (6)
  • image processing (35)
  • Inequalities (1)
  • information (4)
  • java (212)
  • java network (1)
  • javascript (9)
  • kotlin (4)
  • leetcode (1)
  • math (21)
  • maven (1)
  • mysql (1)
  • Node.js (8)
  • operating system (109)
  • php (310)
  • Principle Of Mathematical Induction (1)
  • programming (6)
  • Python (4)
  • Python data structure (9)
  • React native (1)
  • React.js (22)
  • Redux (1)
  • seo (4)
  • set (12)
  • trigonometry (6)
  • vue.js (35)
  • XML (3)

sitemap

sitemap of videos

sitemap of webstories

sitemap of website

  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy
  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy

© codingtube.tech