Demo
Calendar- Develop with native javascript, doesn't rely on any frameworks and libraries.
- Easy API, easy use.
PropTypes
Property | Type | Default | Description |
---|---|---|---|
el | DOM | - | parent node |
currentDate | String | today(yyyy/MM/dd) | current Date |
format | String | yyyy/MM/dd | date format |
monthFormat | String | yyyy年MM月 | month format |
onDayClick | Function | - | Trigger when clicking on the date |
onClickPreMonth | Function | - | Trigger when clicking on the PreMonth |
onClickNextMonth | Function | - | Trigger when clicking on the NextMonth |
onMonthChange | Function | - | Trigger when month change |
Getting Started
Install
npm install pq-calendar-lite
Usage Example
- Native JavaScript
calendar
//calendar.js; { console; // choose date} const daysWithActions = date: '2020/05/01' color: 'blue' date: '2020/05/04' color: 'blue' ; el: document daysWithActions showAwards: true onDayClick;
- React
import React from "react";import Calendar from "calendar-lite"; Component { ; } { this; } { console; // choose date }; { return el: thisrefsslideRuler currentDate: "2019/08/28" onDayClick: thisonDayClick ; }; { return <div ="slideRuler" />; } ;
- Vue
<template> <div></div></template><script>; { this; } methods: { return el: this$el currentDate: "2019/08/28" onDayClick: onDayClick ; } { console; // choose date } </script>
- Angular
;;
How to Contribute
Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues,submit a new issues or feature request, participate in discussions, upvote or downvote the issues you like or dislike.