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