A web component for rendering static calendars.
Here is an example of the component on a web page:
![demo](https://cdn.statically.io/img/private-user-images.githubusercontent.com/37276661/293102854-0126595c-7e35-4be9-9c61-ece11a08f595.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI3MTQzMjEsIm5iZiI6MTcyMjcxNDAyMSwicGF0aCI6Ii8zNzI3NjY2MS8yOTMxMDI4NTQtMDEyNjU5NWMtN2UzNS00YmU5LTljNjEtZWNlMTFhMDhmNTk1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODAzVDE5NDAyMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThiZTBhYmI5YzNlYTg2YWE2M2RlZTgwYWRjN2MzOTI1YzFlMWE0ZDkwZjVlNTk5ODEyYjY5MzA4N2I0Njk5ZTMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.-6vL0WHodNyY5Cw8Z563KS2LJSU2Eg5ySbsf_Hf2wek)
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:
<script src="./path/to/webcalendar.js"></script>
You can then add the component. To do so, add the following code:
<calendar-element
data-month="January"
data-year="2024"
data-starting-day="Mon"
data-heading="Days I walked in January">
</calendar-element>
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 beMon
,Tue
,Wed
,Thu
,Fri
,Sat
, orSun
.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:
<script>
var filled = [3, 4];
</script>
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.
This project is licensed under an MIT license.