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 (https://gitlab.com/users/$USER/calendar.json).

This project was inspired by Github Calendar.

Visitor stats

Code stats

Live preview (link)

Installation

npm i gitlab-calendar

# or

yarn add gitlab-calendar

Usage

import GitlabCalendar from 'gitlab-calendar';

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

Data format

The data is obtained by fetching the https://gitlab.com/users/$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,
    ...
}

Options

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};}

LICENSE

MIT

---

Connect with me:

                     

---

Support and sponsor my work: