A GUI to make customizing one's GitHub contribution calendar easier http://codepen.io/Zeaklous/full/PzVRBy/
JavaScript HTML CSS



A GUI to make customizing one's GitHub contribution calendar easier.

Live editor


  • Image-to-calendar format conversion
  • Click and drag graphical editor
  • Undo/redo capabilities
  • Accepts valid input in Gitfiti or GitHub Board formats
  • Optionally cuts off additional zeros

How to use

Create the image to be used

  • Use the editor to create the look you want.
  • Once you're satisfied, copy the outputted array and save it to a text file.

Create the fake commits from the generated array

The rest of the tutorial uses Gitfiti to create the false commits, but you could also use something like GitHub Board:

  • Make sure Python is installed. If it's not, you can download it here.
  • Download a copy of gitfiti.py.
  • Create a new GitHub repository to use (so you can easily remove it later if desired).
  • Open up the command prompt in the directory of the gitfiti.py and execute the command python gitfiti.py. After following the steps, this will create a file called gifiti.sh.
  • Move the newly created gitfiti.sh to the a directory where you want the GitHub repository to be initialized on your computer. I put mine in <User>/Documents/GitHub/
  • Navigate to that directory and run sh gitfiti.sh and wait. Depending on how large and how many commits it has to make, it may take a few minutes.
  • Once it is complete, you should sync it with the online GitHub repository.

For more information, look at Gitfiti's Usage section.

The image loader functionality is meant to be a base and likely needs editing after the initial load to look right.

Image Guidelines

  • Use images with a high light contrast (try replacing darker colors with lighter ones or lighter ones with darker ones)
  • Use simple shapes (remember, there are only 7 pixels of detail)
  • Make the desired content fill the image (no extra spacing around edges)
  • Filled objects work much better than ones with just outlines
  • Try to get the proportions correct (given the height is 7, fit parts of images to that ratio)


View shared templates or share your own!!




Special thanks to GelStudios for creating Gitfiti and to Sebastiaan Deckers for the styling of the Gitifi color choosers.