# pq-calendar-lite

> calendar for pq

Latest version **0.1.22** (published 2020-05-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install pq-calendar-lite
pnpm add pq-calendar-lite
yarn add pq-calendar-lite
bun add pq-calendar-lite
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.22 |
| Published | 2020-05-23 |
| First published | 2020-05-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 117.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | simbawu |
| Maintainers | ramprakashram |
| Keywords | calendar, datepicker, daypicker, date, picker, react, vue, angular, mobile, component, simbawu, ram |

## Links

- npm: https://www.npmjs.com/package/pq-calendar-lite
- Repository: https://github.com/simbawus/calendar
- Homepage: https://github.com/simbawus/calendar#readme
- Issues: https://github.com/simbawus/calendar/issues
- npm.io page: https://npm.io/package/pq-calendar-lite

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.22 (latest) — 2020-05-23
- 0.1.21 — 2020-05-23
- 0.1.20 — 2020-05-21
- 0.1.19 — 2020-05-21
- 0.1.18 — 2020-05-21
- 0.1.17 — 2020-05-21
- 0.1.16 — 2020-05-21
- 0.1.15 — 2020-05-19
- 0.1.14 — 2020-05-19
- 0.1.13 — 2020-05-19
- 0.1.12 — 2020-05-19
- 0.1.11 — 2020-05-18
- 0.1.10 — 2020-05-18
- 0.1.9 — 2020-05-17
- 0.1.8 — 2020-05-15
- … 8 more at https://npm.io/package/pq-calendar-lite/versions

## README

# Calendar [Demo](https://simbawus.github.io/calendar)

- Develop with native javascript, doesn't rely on any frameworks and libraries.
- Easy API, easy use.

![example](https://up.boohee.cn/house/u/pixiu/calendar.gif)

## 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

```shell
npm install pq-calendar-lite
```

### Usage Example

- **Native JavaScript**

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="author" content="simbawu" />
    <title>calendar</title>
  </head>
  <body>
    <div id="values"></div>
    <div id="app"></div>
    <script src="./calendar.js"></script>
  </body>
</html>
```

```javascript
//calendar.js
import Calendar from "calendar-lite";

function onDayClick(date) {
  console.log(date); // choose date
}

const daysWithActions = [
  {
    date: new Date('2020/05/01').toISOString(),
    color: 'blue'
  },
  {
    date: new Date('2020/05/04').toISOString(),
    color: 'blue'
  }
];

new Calendar({
  el: document.querySelector("#app"),
  daysWithActions,
  showAwards: true,
  onDayClick
});
```

- **React**

```jsx
import React from "react";
import Calendar from "calendar-lite";

class CalendarPage extends React.Component {
  constructor() {
    super();
  }

  componentDidMount() {
    this.renderCalendar();
  }

  onDayClick = date => {
    console.log(date); // choose date
  };

  renderCalendar = () => {
    return new Calendar({
      el: this.refs.slideRuler,
      currentDate: "2019/08/28",
      onDayClick: this.onDayClick
    });
  };

  render() {
    return <div ref="slideRuler" />;
  }
}

export default CalendarPage;
```

- **Vue**

```js
<template>
  <div></div>
</template>
<script>
import Calendar from 'calendar-lite';
export default {
  mounted () {
    this.renderCalendar();
  },
  methods: () {
    renderCalendar() {
    	return new Calendar (
        {
          el: this.$el,
          currentDate: "2019/08/28",
          onDayClick: onDayClick
        }
      );
    },

    onDayClick(date) {
      console.log(date); // choose date
    }
  }
}
</script>
```

- **Angular**

```typescript
import { Component, ViewChild, OnInit, ViewEncapsulation } from "@angular/core";
import Calendar from "calendar-lite";

@Component({
  selector: "my-app",
  template: `
    <div #calendar></div>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
  @ViewChild("calendar") calendar;

  ngOnInit() {
    this.renderCalendar();
  }

  renderCalendar() {
    return new Calendar({
      el: this.calendar.nativeElement,
      currentDate: "2019/08/28",
      onDayClick: onDayClick
    });
  }

  onDayClick(date) {
    console.log(date); // choose date
  }
}
```

## How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our [open issues](https://github.com/simbawus/calendar/issues),[submit a new issues](https://github.com/simbawus/calendar/issues/new?labels=bug) or [feature request](https://github.com/simbawus/calendar/issues/new?labels=enhancement), participate in discussions, upvote or downvote the issues you like or dislike.

## License

[**The MIT License**](LICENSE).

---
_Source: https://npm.io/package/pq-calendar-lite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._