npm i ss-ngx-calendar
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { BrowserModule } from "@angular/platform-browser"; import { NgxCalendarModule } from "ss-ngx-calendar"; import { AppComponent } from "./app.component"; @NgModule({ declarations: [ AppComponent ], imports: [ CommonModule, BrowserModule, NgxCalendarModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import { Component, ViewChild, AfterViewInit } from "@angular/core"; import { NgxCalendarComponent } from "ss-ngx-calendar"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.scss"] }) export class AppComponent implements AfterViewInit { @ViewChild("ngxCalendar1") ngxCalendar1: NgxCalendarComponent; ngAfterViewInit() { // Use this.ngxCalendar1 to access additional functionality. } //1: calendarOptions = {}; calendarValue = null; onChooseDate(date: any) { this.calendarValue = date; } //2: calendarOptions2 = { isWeek: true }; calendarRange = null; onChangeDate(date: any) { this.calendarRange = date; } //3: calendarOptions3 = { isWeek: true, isWithTime: true }; } |
app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<div class="container"> <h2> Demo for <b><a target="_blank" href="https://github.com/Shad1ks/ngx-calendar">ngx-calendar</a></b> </h2> <hr /> <h3>Month:</h3> <label>Value (To choose date click on day.):</label> <p> <code> {{calendarValue | date:'full'}} </code> </p> <p style="max-width: 500px"> <ngx-calendar #ngxCalendar1 [options]="calendarOptions" (onChooseDate)="onChooseDate($event)"></ngx-calendar> </p> <label>Data:</label> <p> <code> calendarOptions = {{calendarOptions | json}}; </code> </p> <label>Code:</label> <p> <code> <ngx-calendar #ngxCalendar1 [options]="calendarOptions" (onChooseDate)="onChooseDate($event)"></ngx-calendar> </code> </p> <div style="margin-top: 50px"></div> <h3>Week (No time.):</h3> <label>Value (To change range click on arrows.):</label> <p> <code> {{calendarRange?.fromDate | date:'full'}} - {{calendarRange?.toDate | date:'full'}} </code> </p> <p style="max-width: 500px"> <ngx-calendar [options]="calendarOptions2" (onChangeDate)="onChangeDate($event)"></ngx-calendar> </p> <label>Data:</label> <p> <code> calendarOptions2 = {{calendarOptions2 | json}}; </code> </p> <label>Code:</label> <p> <code> <ngx-calendar [options]="calendarOptions2" (onChangeDate)="onChangeDate($event)"></ngx-calendar> </code> </p> <div style="margin-top: 50px"></div> <h3>Week (With time.):</h3> <p style="max-width: 500px"> <ngx-calendar [options]="calendarOptions3"></ngx-calendar> </p> <label>Data:</label> <p> <code> calendarOptions3 = {{calendarOptions3 | json}}; </code> </p> <label>Code:</label> <p> <code> <ngx-calendar [options]="calendarOptions3"></ngx-calendar> </code> </p> <div style="margin-top: 50px"></div> </div> |
FULL SOURCE CODE
