calendar - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #llm #go #golang #machine-learning #deep-learning #linux #nodejs #macos #kubernetes #ios #mcp #openai

calendar

(★ 119)

📆 calendar 日历

File Explorer

Download Latest Version (.zip)

- - webpack.base.config.js
  - webpack.config.js
  - webpack.dev.config.js
  - webpack.prod.config.js
- deploy-docs.js
- postcss.config.js
- index.js
- _config.yml
- demo.js
- index.html
- calendar.js
- calendar.js
- calendar.scss
- utils.js
.babelrc
.browserslistrc
.commitlintrc.js
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.huskyrc
.lintstagedrc
.stylelintignore
.stylelintrc
index.html
LICENSE
package.json
README-zh_CN.md
README.md
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/wusb/calendar

Downloads the entire project code from GitHub to your computer.

cd calendar

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn add calendar-lite --dev

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

[![npm](https://img.shields.io/npm/v/calendar-lite.svg)](https://www.npmjs.com/package/calendar-lite)
[![npm](https://img.shields.io/npm/dt/calendar-lite.svg)](https://www.npmjs.com/package/calendar-lite)
[![GitHub license](https://img.shields.io/github/license/simbawus/calendar.svg)](https://github.com/simbawus/calendar/blob/master/LICENSE)

###### [中文 README](README-zh_CN.md)

- 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
yarn add calendar-lite --dev
```

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

new Calendar({
  el: document.querySelector("#app"),
  currentDate: "2019/08/28",
  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).