{"id":27880583,"url":"https://github.com/giacomo/ngx-calendar-widget","last_synced_at":"2026-01-12T02:52:53.433Z","repository":{"id":291073851,"uuid":"976046817","full_name":"giacomo/ngx-calendar-widget","owner":"giacomo","description":"A lightweight, customizable, and feature-rich Angular calendar widget designed to simplify event management and scheduling in your Angular applications.","archived":false,"fork":false,"pushed_at":"2025-05-02T13:41:26.000Z","size":179,"stargazers_count":5,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-02T14:57:55.415Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@localia/ngx-calendar-widget","language":"TypeScript","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/giacomo.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,"zenodo":null}},"created_at":"2025-05-01T11:45:01.000Z","updated_at":"2025-05-02T13:56:12.000Z","dependencies_parsed_at":"2025-05-02T14:57:57.303Z","dependency_job_id":null,"html_url":"https://github.com/giacomo/ngx-calendar-widget","commit_stats":null,"previous_names":["giacomo/ngx-calender-widget","giacomo/ngx-calendar-widget"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giacomo%2Fngx-calendar-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giacomo%2Fngx-calendar-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giacomo%2Fngx-calendar-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giacomo%2Fngx-calendar-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/giacomo","download_url":"https://codeload.github.com/giacomo/ngx-calendar-widget/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252436292,"owners_count":21747470,"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":[],"created_at":"2025-05-05T04:02:26.101Z","updated_at":"2026-01-12T02:52:53.427Z","avatar_url":"https://github.com/giacomo.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[May 03, 2025](/content/2025/05/03/README.md)","Calendars"],"readme":"# @localia/ngx-calendar-widget\r\n\r\n![Version](https://img.shields.io/npm/v/@localia/ngx-calendar-widget)\r\n![License](https://img.shields.io/npm/l/@localia/ngx-calendar-widget)\r\n![Downloads](https://img.shields.io/npm/dt/@localia/ngx-calendar-widget)\r\n\r\nA lightweight, customizable, and feature-rich Angular calendar widget designed to simplify event management and scheduling in your Angular applications.\r\n\r\n\u003cp align=\"center\"\u003e \r\n  \u003cimg src=\"https://giacomo.dev/media/ncw_64.png\" alt=\"ngx-calendar-widget\" width=\"64\"/\u003e\r\n\u003c/p\u003e\r\n\r\n## Features\r\n\r\n- **Multi-locale support**: Display calendar in different languages (English, Spanish, German, French, Italian)\r\n- **Customizable sizes**: Choose between default, large, and extra-large sizes\r\n- **Event management**: Add, display, and interact with events\r\n- **Responsive design**: Works seamlessly across devices\r\n- **Easy integration**: Simple to set up and use in Angular projects\r\n- **Flexible date handling**: Use the default date-fns adapter or inject your own date library implementation\r\n\r\n## Installation\r\n\r\nInstall the library using npm:\r\n\r\n```bash\r\nnpm install @localia/ngx-calendar-widget\r\n```\r\n\r\nOr with yarn:\r\n\r\n```bash\r\nyarn add @localia/ngx-calendar-widget\r\n```\r\n\r\nIf you plan to use the default date adapter (based on date-fns), you'll need to install date-fns as well:\r\n\r\n```bash\r\nnpm install @localia/ngx-calendar-widget date-fns\r\n```\r\n\r\nOr with yarn:\r\n\r\n```bash\r\nyarn add @localia/ngx-calendar-widget date-fns\r\n```\r\n\r\n## Usage\r\n\r\n### Import the Module\r\n\r\nImport the `NgxCalendarWidgetModule` into your Angular module:\r\n\r\n```typescript\r\nimport { NgxCalendarWidgetModule } from '@localia/ngx-calendar-widget';\r\n\r\n@NgModule({\r\n    imports: [\r\n        // ...other imports\r\n        NgxCalendarWidgetModule.forRoot() // Using default date-fns adapter\r\n    ],\r\n    // ...other module properties\r\n})\r\nexport class AppModule {\r\n}\r\n```\r\n\r\n### Date Adapters\r\n\r\nThe calendar widget uses date adapters to handle date manipulations. By default, it uses date-fns, but you can provide your own implementation to use any date library of your choice (like Day.js, Moment.js, or others).\r\n\r\n#### Using the Default date-fns Adapter\r\n\r\nThe default adapter is automatically configured when you use `forRoot()` without parameters:\r\n\r\n```typescript\r\nimport { NgxCalendarWidgetModule } from '@localia/ngx-calendar-widget';\r\n\r\n@NgModule({\r\n    imports: [\r\n        NgxCalendarWidgetModule.forRoot() // Uses default date-fns adapter\r\n    ],\r\n    // ...\r\n})\r\nexport class AppModule { }\r\n```\r\n\r\n#### Creating a Custom Date Adapter\r\n\r\nTo use a different date library, create a class that implements the `DateAdapter` interface:\r\n\r\n```typescript\r\nimport { DateAdapter } from '@localia/ngx-calendar-widget';\r\nimport * as dayjs from 'dayjs';\r\nimport * as weekOfYear from 'dayjs/plugin/weekOfYear';\r\nimport * as isSameOrBefore from 'dayjs/plugin/isSameOrBefore';\r\nimport * as isSameOrAfter from 'dayjs/plugin/isSameOrAfter';\r\n\r\n// Initialize dayjs plugins\r\ndayjs.extend(weekOfYear);\r\ndayjs.extend(isSameOrBefore);\r\ndayjs.extend(isSameOrAfter);\r\n\r\nexport class DayjsDateAdapter implements DateAdapter {\r\n  getMonth(date: Date): number {\r\n    return dayjs(date).month();\r\n  }\r\n  \r\n  getYear(date: Date): number {\r\n    return dayjs(date).year();\r\n  }\r\n  \r\n  startOfWeek(date: Date, options?: { weekStartsOn: number }): Date {\r\n    const weekStart = options?.weekStartsOn || 0;\r\n    return dayjs(date).startOf('week').add(weekStart, 'day').toDate();\r\n  }\r\n  \r\n  // Implement the rest of the methods from DateAdapter interface\r\n  // ...\r\n}\r\n```\r\n\r\n#### Using Your Custom Date Adapter\r\n\r\nTo use your custom adapter, provide it through the `forRoot()` method:\r\n\r\n```typescript\r\nimport { NgxCalendarWidgetModule, NgxCalendarWidgetConfigService, DATE_ADAPTER } from '@localia/ngx-calendar-widget';\r\nimport { DayjsDateAdapter } from './dayjs-date.adapter';\r\n\r\n@NgModule({\r\n    imports: [\r\n        NgxCalendarWidgetModule.forRoot({\r\n            dateAdapter: new DayjsDateAdapter()\r\n        }),\r\n    ],\r\n    // or using providers via injecton token\r\n    providers: [\r\n        { provide: DATE_ADAPTER, useClass: DayjsDateAdapter }\r\n    ]\r\n    // ...\r\n})\r\nexport class AppModule { }\r\n```\r\n\r\n### Add to Template\r\n\r\nUse the component in your template:\r\n\r\n```html\r\n\r\n\u003cngx-calendar-widget\r\n    [locale]=\"'en'\"\r\n    [size]=\"'default'\"\r\n    [events]=\"events\"\r\n    [enableAddEvent]=\"true\"\r\n    (addEvent)=\"onAddEvent($event)\"\r\n    (selectEvent)=\"onEventSelect($event)\"\u003e\r\n\u003c/ngx-calendar-widget\u003e\r\n```\r\n\r\n### Component Preview\r\n\u003cp align=\"center\"\u003e \r\n  \u003cimg src=\"https://giacomo.dev/media/ncw_preview.png\" alt=\"ngx-calendar-widget\" width=\"400\"/\u003e\r\n\u003c/p\u003e\r\n\r\n### Event Structure\r\n\r\nEvents must follow this interface:\r\n\r\n```typescript\r\ninterface CalendarEventInterface {\r\n    id: number | string;     // Unique identifier for the event\r\n    title: string;         // Event title to display on the calendar\r\n    date: string;          // Start date/time in ISO format (YYYY-MM-DDTHH:mm:ss)\r\n    endDate: string | null;  // End date/time in ISO format (optional)\r\n}\r\n```\r\n\r\n#### Example Event Objects\r\n\r\n```typescript\r\n// Single-day event\r\n{\r\n    id: 1, \r\n    title: \"Team Meeting\",\r\n    date: \"2023-10-15T14:00:00\",\r\n    endDate: \"2023-10-15T15:30:00\"\r\n}\r\n\r\n// Multi-day event\r\n{\r\n    id: \"conf-2023\",\r\n    title: \"Annual Conference\",\r\n    date: \"2023-11-01T09:00:00\",\r\n    endDate: \"2023-11-03T17:00:00\"\r\n}\r\n\r\n// Event without end date (treated as single-day)\r\n{\r\n    id: 42,\r\n    title: \"Deadline\",\r\n    date: \"2023-10-31T23:59:59\",\r\n    endDate: null\r\n}\r\n```\r\n\r\n### Component Inputs\r\n\r\n| Input                    | Type                                | Default     | Description                                 |\r\n|--------------------------|-------------------------------------|-------------|---------------------------------------------|\r\n| `locale`                 | `'en' \\| 'es'\\| 'de'\\| 'fr'\\| 'it'` | `'de'`      | Locale for the calendar.                    |\r\n| `size`                   | `'default'\\| 'large'\\| 'x-large'`   | `'default'` | Size of the calendar.                       |\r\n| `hideMultiDayEventsText` | `boolean`                           | `true`      | Hide text for multi-day events.             |\r\n| `enableAddEvent`         | `boolean`                           | `false`     | Enable the \"Add Event\" button.              |\r\n| `events`                 | `CalendarEventInterface[]`          | `[]`        | Array of events to display on the calendar. |\r\n\r\n### Component Outputs\r\n\r\n| Output       | Description                                            |\r\n|--------------|--------------------------------------------------------|\r\n| `addEvent`   | Emits the date when the \"Add Event\" button is clicked. |\r\n| `clickEvent` | Emits the event object when an event is clicked.       |\r\n\r\n### Handling Events\r\n\r\nIn your component, handle the emitted events:\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { CalendarEventInterface } from '@localia/ngx-calendar-widget';\r\n\r\n@Component({\r\n    selector: 'app-calendar-page',\r\n    template: `\r\n    \u003cngx-calendar-widget\r\n      [events]=\"events\"\r\n      [enableAddEvent]=\"true\"\r\n      (addEvent)=\"onAddEvent($event)\"\r\n      (selectEvent)=\"onEventSelect($event)\"\u003e\r\n    \u003c/ngx-calendar-widget\u003e\r\n  `\r\n})\r\nexport class CalendarPageComponent {\r\n    events: CalendarEventInterface[] = [\r\n        {\r\n            id: 1,\r\n            title: 'Team Meeting',\r\n            date: '2023-10-01T10:00:00',\r\n            endDate: '2023-10-01T12:00:00',\r\n        },\r\n        {\r\n            id: 2,\r\n            title: 'Conference',\r\n            date: '2023-10-05T09:00:00',\r\n            endDate: '2023-10-07T17:00:00',\r\n        }\r\n    ];\r\n\r\n    onAddEvent(date: string) {\r\n        console.log('Add event on:', date);\r\n        // Implement your event creation logic here\r\n    }\r\n\r\n    onEventSelect(event: CalendarEventInterface) {\r\n        console.log('Event clicked:', event);\r\n        // Implement your event handling logic here\r\n    }\r\n}\r\n```\r\n\r\n## Visual Appearance\r\n\r\nThe calendar displays events with different styles based on their duration:\r\n\r\n\u003cp align=\"center\"\u003e \r\n  \u003cimg src=\"https://giacomo.dev/media/ncw_preview_2.png\" alt=\"ngx-calendar-widget\" width=\"400\"/\u003e\r\n\u003c/p\u003e\r\n\r\n- **Single-day events**: Displayed with start and end time\r\n- **Multi-day events**:\r\n    - First day shows the event title with full date range\r\n    - Middle days can be configured to show or hide text (controlled by `hideMultiDayEventsText`)\r\n    - Last day shows the event title with end date information\r\n\r\n## Building the Library\r\n\r\nTo build the library, run:\r\n\r\n```bash\r\nng build @localia/ngx-calendar-widget\r\n```\r\n\r\nThe build artifacts will be stored in the `dist/@localia/ngx-calendar-widget` directory.\r\n\r\n## Publishing the Library\r\n\r\nTo publish the library to npm:\r\n\r\n1. Build the library:\r\n   ```bash\r\n   ng build @localia/ngx-calendar-widget\r\n   ```\r\n2. Navigate to the `dist` directory:\r\n   ```bash\r\n   cd dist/@localia/ngx-calendar-widget\r\n   ```\r\n3. Publish the library:\r\n   ```bash\r\n   npm publish --access public\r\n   ```\r\n\r\n## Running Tests\r\n\r\n### Unit Tests\r\n\r\nRun unit tests using [Karma](https://karma-runner.github.io):\r\n\r\n```bash\r\nng test\r\n```\r\n\r\n## Browser Support\r\n\r\nThe widget is compatible with:\r\n\r\n- Chrome (latest)\r\n- Firefox (latest)\r\n- Safari (latest)\r\n- Edge (latest)\r\n\r\n## Contributing\r\n\r\nContributions are welcome! If you find a bug or have a feature request, please open an issue or submit a pull request.\r\n\r\n1. Fork the repository\r\n2. Create your feature branch: `git checkout -b feature/my-new-feature`\r\n3. Commit your changes: `git commit -am 'Add some feature'`\r\n4. Push to the branch: `git push origin feature/my-new-feature`\r\n5. Submit a pull request\r\n\r\n## License\r\n\r\nThis project is licensed under the [MIT License](https://opensource.org/license/MIT).\r\n\r\n## Additional Resources\r\n\r\n- [Angular Documentation](https://angular.dev)\r\n- [Date-fns Documentation](https://date-fns.org) (used for default date manipulations)\r\n\r\n## Credits\r\n\r\nDeveloped by Localia\r\n\r\n`\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiacomo%2Fngx-calendar-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgiacomo%2Fngx-calendar-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiacomo%2Fngx-calendar-widget/lists"}