https://github.com/samcodex/petit-calendar

Angular small localization calendar
https://github.com/samcodex/petit-calendar

Last synced: 1 day ago
JSON representation

Angular small localization calendar

• Host: GitHub
• URL: https://github.com/samcodex/petit-calendar
• Owner: samcodex
• Created: 2019-01-26T02:01:45.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-01-29T21:09:01.000Z (almost 6 years ago)
• Last Synced: 2023-11-20T15:03:52.349Z (about 1 year ago)
• Language: TypeScript
• Size: 156 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# PetitCalendar

Angular small localization calendar.



## Installation

npm install petit-calendar --save

## Usage

### * Import PetitCalendarModule in the component module

```

  import { PetitCalendarModule } from 'petit-calendar';

```

```

  imports: [

    ...

    PetitCalendarModule

  ]

```

### * To use PetitCalendar component

```

  

```

Properties:

```

  @Input()

  locale = 'en';

  // locale code

  @Input()

  viewDate = new Date();

  // the date to display

  @Input()

  indicator = false;

  // each day has two event indicators below the day number

  // true to use event indicators, set the indicators using PetitcalendarService

  @Input()

  highlightSelectedDate = false;

  // true to highlight the selected date

  @Input()

  highlightSelectedWeek = true;

  // true to highlight the selected week

  @Input()

  showWeekDayName = true;

  // true to show the name of day of the week

  @Output()

  changeViewDate = new EventEmitter();

  // emit the selected date after selecting the date

  @Output()

  changeViewMonth = new EventEmitter();

  // emit the first date of the month when clicking 'previous' or 'next'

```

### * Use PetitCalendarService to get the current calendar

* import PetitCalendarService

```

  import PetitCalendarService from 'petit-calendar';

  ...

  providers: [

    ...,

    PetitCalendarService

  ]

```

* inject PetitcalendarService

```

  ...

  constructor(

    ...,

    private calendarService: PetitCalendarService

  ){

  }

```

* get the current calendar

```

  this.calendarService.getCalendar().subscribe(

    (calendar: Calendar) => {

      // set day indicators

      calendar.days.forEach(day => {

        day.indicators.first = (condition);  // green color, indicate the day contains available time slot

        day.indicators.second = (condition); // red color, indicate the day contains booked time slot

      });

    }

  );

```

## License

MIT