Welcome to the GitHub Contribution Calendar Widget! This widget allows you to display a GitHub-like contribution calendar on your website, showcasing a user's activity over the past year. It also shows where you have gone beyond!
To include the GitHub Contribution Calendar Widget on your webpage, follow these steps:
-
Include the Script:
Add the following script tag to the
<head>section of your HTML file. This will include the GitHub Contribution Calendar Widget script hosted on jsDelivr.<script type="module" defer src="https://cdn.jsdelivr.net/gh/imananoosheh/github-contributions-fetch@latest/github_calendar_widget.js"></script>
-
Create a Container:
Add a container
<div>in the body of your HTML to hold the calendar. Provide anidfor the container and specify the GitHub username using theusernameattribute:<div id="calendar-component" username="<your-github-username>"></div>
-
Customization (Optional):
You can customize the appearance of the calendar by adding optional attributes to the container
<div>. For example, to set the theme color, use thetheme-colorattribute:<div id="calendar-component" username="<your-github-username>" theme-color="#4285f4"></div>
Available attributes:
theme-color: The main color of the calendar.background-color: The background color of the calendar.
If you want to deploy the backend server on your own server, follow these steps:
-
Configure Environment Variables:
Create a
.envfile in the project root and set your GitHub access token:GITHUB_ACCESS_TOKEN=your-github-access-token SERVER_PORT=3003 STATIC_DIR=/usr/src/app/public/
-
Run install script
By running the
install.sha docker image will be built and run based on the latest version of GitHub Calendar Widget./install.sh
-
API Endpoint:
Your API endpoint will be accessible at
http://your-server-domain-or-ip/github_calendar/:username. Make sure to update your GitHub widget script with this URL.
Now, you can deploy the backend server on your own server to provide the necessary data. Happy coding!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent