Bozz Calendar

It is a simple library to display a calendar with status of days using an array of objects to pass colors and status.

This library was generated with Angular CLI version 12.0.5.

How to install

1 - Run this:

npm i bozz-calendar

2 - Add BozzCalendarModule on the imports:[] in your app.module like this:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BozzCalendarModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})

3 - To show the calendar just put this tag in your HTML:

<lib-bozz-calendar></lib-bozz-calendar>

The Default Calendar

How send status from the days?

1 - In your .ts file create an object array like this:

public dates = [
    {
      date: new Date(2021, 9, 25),
      status: 'Unavailable',
      bg: '#ff4949',
      color: '#ffffff',
    },
    {
      date: new Date(2021, 9, 26),
      status: 'Unavailable',
      bg: '#ff4949',
      color: '#ffffff',
    },
];

2 - Send to lib in the HTML file like this:

<lib-bozz-calendar [dates]="dates"></lib-bozz-calendar>

And you will see the calendar with status an hint on the selected days:

Can I translate the calendar?

1 - Yes! In your .ts file you can create an array for the months and another for de week like this:

public monthsPTBR: any = [
    'Janeiro',
    'Fevereiro',
    'Março',
    'Abril',
    'Maio',
    'Junho',
    'Julho',
    'Augosto',
    'Setembro',
    'Outubro',
    'Novembro',
    'Dezembro',
];

public weekPTBR = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];

2 - Send to lib in the HTML file like this:

<lib-bozz-calendar [months]="monthsPTBR" [week]="weekPTBR"></lib-bozz-calendar>

And now your calendar will apears translated:

And the other colors "bro"?

You've already seen how to send colors for day statuses. But you can also customize the colors of the entire calendar.

1 - Create an object in your .ts file like this:

public colors: any = {
    daysMonthBgColor: '#44ccff',
    daysMonthTxColor: '#ffffff',
    noDaysMonthBgColor: '#ffff00',
    noDaysMonthTxColor: '#0000ff',
    todayTxColor: '#0000ff',
    todayBdColor: '#0000ff',
};

2 - Send to lib in the HTML file like this:

<lib-bozz-calendar [colors]="colors"></lib-bozz-calendar>

And your beautiful calendar will look like this:

GITHUB

CONTACT

Bruno Bozzetti

instagram.com/@brunobozz

[email protected]