iomechs/angular-year-calendar

A powerful and performant Angular year calendar library built with ❤️

Angular Year Calendar

@iomechs/angular-year-calendar

A simple, easily to use Year calendar for your Angular apps.

Demo

https://iomechs.github.io/angular-year-calendar/demo

Docs

https://iomechs.github.io/angular-year-calendar

Dependencies

The Angular Year Calendar library depends on date-fns and @angular/cdk. If you don't have them installed in your project, you'll have to install them urself.

Usage

Install the package in your project's folder by using npm or yarn:

npm install @iomechs/angular-year-calendar --save

# OR

yarn add @iomechs/angular-year-calendar -S

Import YearCalendarModule in your AppModule as below:

import { YearCalendarModule } from '@iomechs/angular-year-calendar';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    YearCalendarModule, // <-- here
  ]
});

Then in your HTML, you can use as:

<yc-year-calendar
  [loadingData]="isLoadingData"
  (viewYearChanged)="viewYearChangedHandler($event"
  (eventDayClicked)="eventDayClickHandler($event)"
  [ycConfig]="myCalendarConfig"
  [selectedDate]="currentDate">
</yc-year-calendar>

License

MIT © IOMechs

angular-year-calendar's Issues

Question: add marks to each day

Hi! Awesome component ❤️
I would like to add color markers (change background-color) to each day cell (individually ex. one color for each day of year)

Is this possible with the current implementation?

I'm trying something like this but it doesn't work:

for (let i = 0; i <= 365; i++) {
  this.config.data.push({
    count: 1,
    color: '#FFC300',
    date: addDays(new Date(2020, 0, 0), i),
  });
}

Thanks for your time!

ycConfig.maxValue being overridden in the year calendar component

ycConfig.maxValue is being overridden which means we're mutating the maxValue right now.

style out of bound

Upgrade package to angular v16

How can we select date Range?

is there a way to select Date range? or Multiple different dates??

Module not found: Error: Can't resolve 'date-fns'

After installing this package, when I, include their configuration in App.module and run the app, I am getting this error:

ERROR in ./node_modules/@iomechs/angular-year-calendar/fesm2015/iomechs-angular-year-calendar.js
Module not found: Error: Can't resolve 'date-fns' in '/home/mquanit/Documents/Projects/Angular Typescript Practice/shiny-ivy-app/node_modules/@iomechs/angular-year-calendar/fesm2015'

before that, i am also getting this error:

ERROR in node_modules/@iomechs/angular-year-calendar/lib/components/year-calendar/year-calendar.component.d.ts:4:34 - error TS2307: Cannot find module '@angular/cdk/overlay'.
4 import { CdkOverlayOrigin } from '@angular/cdk/overlay';
ERROR in @iomechs/angular-year-calendar/iomechs-angular-year-calendar.ts(18,5): Error during template compile of 'YearCalendarModule'
Could not resolve @angular/cdk/overlay relative to [object Object]..
There is no directive with "exportAs" set to "cdkOverlayOrigin" ("_body__month__inner__week__day {{ycConfig?.dayClass}}"
cdkOverlayOrigin
[ERROR ->]#heatMapEventDayTrigger="cdkOverlayOrigin"
(click)="eventDayCick(day, heatMapEventDayTr")

but I solved it by doing yarn add @angular/cdk/overlay, but now I am getting the above issue, which is related to date-fns i guess.