Embed your GitHub contributions calendar anywhere.
Everybodywell, haters gonna hate loves GitHub and everybody loves stats. So, why not making the GitHub contributions calendar available for being embeded in your web pages? Now you can. π
Check out the dist
directory to download the needed files and include them on your page.
If you're using this module in a CommonJS environment, you can install it using npm
or yarn
and require
it:
# Using npm
npm install --save github-calendar
# Using yarn
yarn add github-calendar
<!-- Include the library. -->
<script
src="https://unpkg.com/github-calendar@latest/dist/github-calendar.min.js">
</script>
<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) -->
<link
rel="stylesheet"
href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css"
/>
<!-- Prepare a container for your calendar. -->
<div class="calendar">
<!-- Loading stuff -->
Loading the data just for you.
</div>
<script>
GitHubCalendar(".calendar", "your-username");
// or enable responsive functionality:
GitHubCalendar(".calendar", "your-username", { responsive: true });
</script>
Here you can see this example in action.
There are few ways to get help:
-
Please post questions on Stack Overflow. You can open issues with questions, as long you add a link to your Stack Overflow question.
-
For bug reports and feature requests, open issues. π
-
For direct and quick help, you can use Codementor. π
Brings the contributions calendar from GitHub (provided username) into your page.
- String|HTMLElement
container
: The calendar container (query selector or the element itself). - String
username
: The GitHub username. - Object
options
: An object containing the following fields:summary_text
(String): The text that appears under the calendar (defaults to:"Summary of pull requests, issues opened, and commits made by <username>"
).proxy
(Function): A function that receives as argument an url (string) and should return the proxied url. The default is using @izuzak'surlreq
.global_stats
(Boolean): Iffalse
, the global stats (total, longest and current streaks) will not be calculated and displayed. By default this is enabled.responsive
(Boolean): Iftrue
, the graph is changed to scale with the container. Custom CSS should be applied to the element to scale it appropriately. By default this is disabled.
- Promise A promise returned by the
fetch()
call.
Have an idea? Found a bug? See how to contribute.
I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, this takes time. You can integrate and use these projects in your applications for free! You can even change the source code and redistribute (even resell it).
However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:
-
Starring and sharing the projects you like π
-
βI love books! I will remember you after years if you buy me one. π π
-
βYou can make one-time donations via PayPal. I'll probably buy a
coffeetea. π΅ -
βSet up a recurring monthly donation and you will get interesting news about what I'm doing (things that I don't share with everyone).
-
BitcoinβYou can send me bitcoins at this address (or scanning the code below):
1P9BRsmazNQcuyTxEqveUsnf5CERdq35V6
Thanks! β€οΈ