https://github.com/samcodex/petit-calendar
Angular small localization calendar
https://github.com/samcodex/petit-calendar
Last synced: 3 months 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 (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-29T21:09:01.000Z (almost 7 years ago)
- Last Synced: 2025-08-04T06:02:52.503Z (3 months ago)
- Language: TypeScript
- Size: 156 KB
- Stars: 0
- Watchers: 1
- 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