angular-kalendar

Angular (Angular 2) Kalendar

Getting Started

Npm Install

$ npm install angular-kalendar

Importing the module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AngularKalendarModule } from 'angular-kalendar';

@NgModule({
    imports: [AngularKalendarModule, BrowserModule],
    exports: [],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [],
})
export class AppModule { }

Using the Component

Basic Usage

<angular-kalendar></angular-kalendar>

Using NgModel

<angular-kalendar [(ngModel)]="date" (ngModelChange)="doSomething()"></angular-kalendar>
...
export class Component implements OnInit {
    date: Date;
}

Using Model Driven Forms

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <angular-kalendar [formControl]="formGroup.get('date')"></angular-kalendar>
  <button type="submit">SUBMIT</button>
  <button type="button" (click)="reset()">Reset</button>
</form>
...
export class FormGroupComponent implements OnInit {
    formGroup: FormGroup;

    ngOnInit() { 
        this.formGroup = new FormGroup({
            'date': new FormControl(new Date())
        });
    }

    onSubmit(): void {
		//do something
    }

    reset(): void {
        this.formGroup.reset({
            'date': new Date()
        });
    }
}

Calendar Options

Angular Kalendar accepts an input called 'options'

<angular-kalendar [options]="myOptions"></angular-kalendar>
...
import { KalendarOptions } from 'angular-kalendar';

export class Hours12Component implements OnInit {
    options: KalendarOptions = {
        format: 'dd.mm.yyyy',
        showTimepicker: false
    }
}

Options

interface KalendarOptions {
    format?: string,
    hours24?: boolean,
    showTimepicker?: boolean
}

format

DEFAULT: 'yyyy-mm-dd H:MM'

Format string accepts the following values

Format String	Description
d	day of the month
dd	day of the month, zero padded
m	month (eg. 3)
mm	month, zero padded (eg. 03)
mmm	month text, short (eg. Mar)
mmmm	month text, long (eg. March)
yy	double digit year (eg. 2007 becomes 07)
yyyy	full year (eg. 2007)
H	hour value
HH	hour value, zero padded
MM	minute value
Examples:

• dd.mm.yyyy -> 03.01.1997
• m/d/yy -> 1/3/97
• yyyy-mm-dd H:MM -> 1997-01-03 15:38

hours24

DEFAULT: true.

If true, display hours 0-23 If false, display hours 1-12 AM, 1-12 PM

showTimepicker

DEFAULT: true.

If true, show the timepicker under the calendar If false, don't

CSS

Don't like the way it looks? You can override the existing styles in the following manners

Inline Styles:

@Component({
    selector: 'my-component',
    template: `
    <angular-kalendar class="kalendar"></angular-kalendar>
    `,
    styles: [`
        :host /deep/ .kalendar .ang2cal-btn:hover {
            background-color: blue;
            color: white;
            border-radius: 0;
        }
    `]
})

Global Styles (angular-cli example)

In angular-cli.json

styles: [
	"styles.css"
]

In styles.css

.kalendar .ang2cal-day {
	background-color: pink;
    border: 1px solid grey;
    border-radius: 0;
}