2.0.1 • Published 2 years ago
gitlab-calendar v2.0.1
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-calendarUsage
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