vue-calendar-component

  • A lightweight, high-performance calendar component developed based on VUE 2.0
  • Small memory, good performance, good style, strong scalability
  • Native JS development, no third party library introduced

Why

  • There are a lot of Github widgets that pop up a calendar to select a time, but there is no widget that simply shows the calendar and can be clicked to get the time
  • A few calendar components take up too much memory, which is obviously not reasonable for such a simple function as calendar

Demo

Or use your browser in mobile mode

The effect

  • 🎉 feel good to give a star oh ~~ 🎉

Install

npm i vue-calendar-component --save
cnpm i vue-calendar-component --save  // Internal mirror
Copy the code

Usage

//vue file to import
import Calendar from 'vue-calendar-component';

 components: {
    Calendar
  }
    <Calendar
      v-on:choseDay="clickDay"
      v-on:changeMonth="changeDate"
      // v-on:isToday="clickToday"
      // :markDate=arr // arr=['2018/4/1','2018/4/3'] simple marks for April 1 and April 3
      //:markDateMore=arr
      // The first tag and the second tag cannot be used together
      // :agoDayHide='1514937600' // 10 bits of disallowed timestamp before a certain date
      // :futureDayHide='1525104000' // 10 bits of disallowed click timestamp after a certain date
      // :sundayStart="true" // The default is To start on Monday
    ></Calendar>

    clickDay(data) {
      console.log(data); // Select a day
    },
    changeDate(data) {
      console.log(data); // Click left and right to switch months
    },
    clickToday(data) {
      console.log(data); // Jump to this month
    }

  // Multiple markup examples
  arr=[{date:'2018/4/1'.className:"mark1"}, {date:'2018/4/13'.className:"mark2"}];
  // The className of the April 1 tag is mark1, which makes some markup styles according to the class
Copy the code

Making the addressDetailed documentation

API

attribute instructions The default Whether will pass
choseDay Select the method called on that day and return the selected date YY-MM-DD There is no no
changeMonth Switch the method called by the month to return the date yY-MM-DD to switch to the month There is no no
isToday When switching months, if you cut to the current month, call this method to return the current month today There is no no
markDate If the days of a month need to be marked, pass the date array for that month. [“2018/2/2″,”2018/2/6”] will be marked (same mark) An empty array no
markDateMore Different tags are required for the last line of example code for Usage as above An empty array no
agoDayHide The disallowed timestamp before a certain date is 10 bits long 0 no
futureDayHide The disallowed timestamp after a certain date is 10 digits long A large no
sundayStart The default is To start on Monday while true is to start on Sunday false no
textTop Calendar of the head words, default is [‘ day ‘, ‘a’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’], can be different according to their own needs modification. — no 
✅ adds the ref attribute to the Calendar TAB, exposing three methods to switch months directly for example:<Calendar ref="Calendar"></Calendar>

      ✅ this.$refs.Calendar.PreMonth();  // Call the method implementation to last month
      ✅ this.$refs.Calendar.NextMonth(); // Call the method implementation forward to next month
      ✅ this.$refs.Calendar.ChoseMonth('2018-12-12'); // Call the method implementation to a certain month
      ✅ this.$refs.Calendar.ChoseMonth('2018-12-12'.false); // Jump to 12/12/18 but no date is selected
      // The second argument false indicates that the date is not selected.
Copy the code

Encountered an error —

  • An UglifyJs package compilation error was encountered. Because the current version of UglifyJs does not know how to compile ES6

NPM install –save-dev babel-preset-env Then create a.babelrc file in the root directory after typing, {“presets”: [“env”]} save and rebuild

Babel-preset -env Official document

Other

  • SRC app. vue has a demo for reference.
  • If there are other issues or versions on, functionally incompatible email communication [email protected]