Skip to content


Repository files navigation

Github Build Codacy Badge Codebeat Badge CodeFactor Badge DeepScan grade Analytics

Gitlab Calendar

Embed your Gitlab Contributions Calendar anywhere

This package allows you to embed your Gitlab Contributions Calendar in any website.

The package does not handle network requests, this is left to the developer to decide and implement. Gitlab Calendar requires the data as it is provided by the calendar endpoint of the Gitlab API ($USER/calendar.json).

This project was inspired by Github Calendar.

Visitor stats

GitHub stars GitHub forks GitHub watchers GitHub followers

Code stats

GitHub code size in bytes GitHub repo size GitHub language count GitHub top language GitHub last commit

Live preview (link)

Gitlab Calendar Screenshot


npm i gitlab-calendar

# or

yarn add gitlab-calendar


import GitlabCalendar from 'gitlab-calendar';

new GitlabCalendar(document.getElementById('gitlab-calendar'), data, options);

Data format

The data is obtained by fetching the$USER/calendar.json endpoint.

This exercise is left to the developer implementing it.

gitlab-calendar requires the data in the following format:

    "2020-12-07": 1,
    "2020-12-09": 2,
    "2020-12-10": 5,


Name Type Default value
daySize number 15
hintText string 'Issues, merge requests, pushes, and comments.'
daySpace number 1
utcOffset number 0
dayTitles Record<ActivityCalendarWeekday, string>
{  monday: 'M',  wednesday: 'W',  friday: 'F',  saturday: 'S',  sunday: 'S' }
monthsAgo number 12
monthNames string[] ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
inputFormat string 'yyyy-MM-dd'
weekdayNames string[] ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
legendValues ActivityCalendarLegendValue[]
[  { title: 'No contributions', min: 0 },  { title: '1-9 contributions', min: 1 },  { title: '10-19 contributions', min: 10 },  { title: '20-29 contributions', min: 20 },  { title: '30+ contributions', min: 30 } ]
firstDayOfWeek number 0
tooltipDateFormat string 'MMM d, yyyy'
tooltipFormatter (count: number, dayName: string, dateText: string) => string
(count: number, dayName: string, dateText: string) => { let contribText = 'No contributions';if (count > 0) {contribText = count === 1 ? '1 contribution' : ${count} contributions;}return ${contribText} on ${dayName} ${dateText};}



Connect with me:


Support and sponsor my work: