gitlab-calendar

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

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:

Send me your message

Trusted by

  • Duke University brand image
  • Emailio brand image
  • E.ON brand image
  • Kinetik Automotive brand image
  • Robert Ladkani brand image
  • SOD 64 brand image
  • Three11 brand image
  • dmarcian brand image
  • htmlBurger brand image
  • htmlBoutique brand image
  • 2create brand image