{"id":14973248,"url":"https://github.com/sergionoivak/ng-git-calendar","last_synced_at":"2025-10-12T21:49:38.511Z","repository":{"id":101851274,"uuid":"248499157","full_name":"SergioNoivak/ng-git-calendar","owner":"SergioNoivak","description":"ng-git-calendar is an angular interface component that implements a committing calendar similar to that of github, which can be used for various uses, such as fault logging and other records like any other calendar.","archived":false,"fork":false,"pushed_at":"2020-03-19T13:13:44.000Z","size":29,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-01T00:51:08.500Z","etag":null,"topics":["angular","angular-calendar","angular-charts","angular4","angular6","angular7","calendar","calendar-component","calendar-view","calendar-widget","calendarview","git","git-commit","git-commit-format","git-commit-id-plugin","git-commit-messages","git-commit-picker","git-commit-template","git-pull","github"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ng-git-calendar","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SergioNoivak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-19T12:36:54.000Z","updated_at":"2022-02-28T02:01:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"e6af5c97-aa09-484e-8c4f-af994ea1def4","html_url":"https://github.com/SergioNoivak/ng-git-calendar","commit_stats":{"total_commits":3,"total_committers":1,"mean_commits":3.0,"dds":0.0,"last_synced_commit":"1ef3cc4d01afe14c39062d9079ffc8d610087cc0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SergioNoivak%2Fng-git-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SergioNoivak%2Fng-git-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SergioNoivak%2Fng-git-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SergioNoivak%2Fng-git-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SergioNoivak","download_url":"https://codeload.github.com/SergioNoivak/ng-git-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238408636,"owners_count":19467141,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-calendar","angular-charts","angular4","angular6","angular7","calendar","calendar-component","calendar-view","calendar-widget","calendarview","git","git-commit","git-commit-format","git-commit-id-plugin","git-commit-messages","git-commit-picker","git-commit-template","git-pull","github"],"created_at":"2024-09-24T13:48:26.271Z","updated_at":"2025-10-12T21:49:33.458Z","avatar_url":"https://github.com/SergioNoivak.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgGitCalendar\n![alt](https://github.com/SergioNoivak/ng-git-calendar/blob/master/assets/f1.PNG)\nng-git-calendar is an angular interface component that implements a committing calendar similar to that of github, which can be used for various uses, such as fault logging and other records like any other calendar. \n\n## Getting Started\n\nTo start with ng-git-calendar, you can download it with the command :\n\n```\nnpm install ng-git-calendar\n```\n\n## Usage\n\nTo use ng-git-calendar you need to import the ``NgGitCalendarModule`` into your application:\n\n```typescript\n// app.module.ts\n\nimport { AppComponent } from './app.component';\nimport { NgGitCalendarModule } from '../../../ng-git-calendar/src/lib/ng-git-calendar.module';\n\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n\t// ... another import\n      \n    NgGitCalendarModule  \n\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nAfter that, just use the tag ``lib-ng-git-calendar`` to render the ng-git-calendar graph :\n\n```html\n\u003cp\u003e\n    Oww cool!\n\u003c/p\u003e\n\n\u003clib-ng-git-calendar\n year=\"2020\"\n colorLevel1=\"#c6e48b\"\n colorLevel2=\"#7bc96f\"\n colorLevel3=\"#196127\"\n [data]=\"data\"\n    \u003e\u003c/lib-ng-git-calendar\u003e\n\n```\n\nThe ``data`` attribute represents the days that will be marked with some color / level. This ``data`` attribute consists of a two-dimensional vector in which each line contains a vector with two elements, the first element being the date to be marked in the format ``mm / dd / yyyy ``followed by the level to be marked (can be 1,2 or 3) . \n\n\n\n````typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n    \n    /*\n    \n    mm / dd / yyyy , level\n    \t\n    */\n  data=[\n    ['01/21/2020','1'],\n    ['06/20/2020','2'],\n    ['12/25/2020','3'],\n    ['11/05/2020','3'],\n\n  ]\n\nconstructor(){}\n}\n````\n\n\nIn this last example, relatively small data was entered, resulting in the following git-calendar:\n\n![alt](https://github.com/SergioNoivak/ng-git-calendar/blob/master/assets/f2.PNG)\n\n\nThe section below builds a more complex example of a random git-calendar.\n## More complex example: Github random commits\n\nIn this example, the data attribute will be generated randomly and will produce a graph of commits\n````html\n\u003c!-- app.component.html --\u003e\n\n\u003cp\u003e\n    Git random colors\n\u003c/p\u003e\n\n\u003clib-ng-git-calendar\n year=\"2020\"\n colorLevel1=\"#c6e48b\"\n colorLevel2=\"#7bc96f\"\n colorLevel3=\"#196127\"\n [data]=\"data\"\n    \u003e\u003c/lib-ng-git-calendar\u003e\n````\n\nTo define attribute ``data``, just click on any component, in matrix format, each data row is a vector of specified data once selected level\n\n````typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n  title = 'aplicacao-teste';\n\n  data = []\n  format(data){\n    var\n        dia  = data.getDate().toString(),\n        diaF = (dia.length == 1) ? '0'+dia : dia,\n        mes  = (data.getMonth()+1).toString(), //+1 pois no getMonth Janeiro começa com zero.\n        mesF = (mes.length == 1) ? '0'+mes : mes,\n        anoF = data.getFullYear();\n    return mesF+\"/\"+diaF+\"/\"+anoF;\n}\n\n\nconstructor(){\n\n  this.generateData()\n\n}\n\n   generateData(){\n\n\n    let start = new Date(\"01/01/\"+('2020'));\n    let end = new Date(\"12/31/\"+('2020'));\n\n    let listaDiv:HTMLElement = document.getElementById('squares')\n    console.log(listaDiv)\n    let loop = new Date(start);\n    while(loop \u003c= end){\n      //  console.log(loop);\n       let stringData = this.format(loop)\n        this.data.push([stringData,\"\"+this.getRandom()])\n       var newDate = loop.setDate(loop.getDate() + 1);\n       loop = new Date(newDate);\n    }\n\n\n   }\n\n   getRandom(){\n    let rand=Math.random()\n    console.log(rand)\n    if(rand\u003c0.3)\n      return 0;\n\n      if(rand\u003e0.3\u0026\u0026rand\u003c0.5)\n      return 1;\n\n\n      if(rand\u003e0.5\u0026\u0026rand\u003c0.75)\n      return 2;\n\n\n      if(rand\u003e0.75)\n      return 3;\n\n}\n}\n\n````\n\n## Graph attributes\n\nTo render the chart ``ng-git-calendar``, you need: the ``year`` attribute that represents the year that the calendar will represent, and the ``colorLevel1``, ``colorLevel2``, ``colorLevel3`` attributes represents the three possible levels for each day of the calendar. It is only possible to have three levels and colors, if the variables ``colorLevel1``, ``colorLevel2``, ``colorLevel3``, the chart is assumed to be gray with level 0.\n\nThe ``data`` attribute represents the days that will be marked with some color / level. This ``data`` attribute consists of a two-dimensional vector in which each line contains a vector with two elements, the first element being the date to be marked in the format ``mm / dd / yyyy ``followed by the level to be marked (can be 1,2 or 3) . \n\n\n\n## Contact-me \n\nserginhosnovak@hotmail.com\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergionoivak%2Fng-git-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsergionoivak%2Fng-git-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergionoivak%2Fng-git-calendar/lists"}