https://github.com/capjamesg/web-calendar
A web component for rendering static calendars.
https://github.com/capjamesg/web-calendar
calendar web-calendar web-component
Last synced: 10 months ago
JSON representation
A web component for rendering static calendars.
- Host: GitHub
- URL: https://github.com/capjamesg/web-calendar
- Owner: capjamesg
- License: mit
- Created: 2023-12-25T23:11:05.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-28T11:52:16.000Z (over 2 years ago)
- Last Synced: 2025-01-18T06:43:53.996Z (over 1 year ago)
- Topics: calendar, web-calendar, web-component
- Language: JavaScript
- Homepage: https://capjamesg.github.io/web-calendar/
- Size: 13.7 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# web-calendar
A web component for rendering static calendars.
## Demo
[Try the component](https://capjamesg.github.io/web-calendar/)
Here is an example of the component on a web page:
## Setup
To use this component, first clone this repository:
```
git clone https://github.com/capjamesg/web-calendar
cd web-calendar/
```
Copy the `webcalendar.js` file onto your own website.
Add the following code to theweb page where you want to use the component, before you want to use the component:
```html
```
You can then add the component. To do so, add the following code:
```html
```
Set:
- `data-month`: The month to show. Must be written in full (i.e. `January`, `February`).
- `data-year`: The year to show.
- `data-starting-day`: The first day of the month. Must be `Mon`, `Tue`, `Wed`, `Thu`, `Fri`, `Sat`, or `Sun`.
- `data-heading`: The heading to show at the top of the calendar.
You can set squares to be green by specifying the following code before a `calendar-element` element:
```html
var filled = [3, 4];
```
This is intended for use in applications where you want to track if a goal was completed on a day (i.e. a personal habit tracker).
Each number corresponds with the date (i.e. 3 is the 3rd) to fill in with a green color.
## License
This project is licensed under an [MIT license](LICENSE).