CalendarRange KIT

    
    

        
            Copy
        
        
    

    <tui-calendar-range />

    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiCalendarRange} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example1",
    imports: [TuiCalendarRange],
    templateUrl: './index.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    <tui-calendar-range />

    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
import {TUI_CALENDAR_DATE_STREAM, TuiCalendarRange} from '@taiga-ui/kit';
import {of} from 'rxjs';
 
export const calendarStream$ = of(
    new TuiDayRange(new TuiDay(2019, 2, 11), new TuiDay(2019, 2, 14)),
);
 
@Component({
    standalone: true,
    exportAs: "Example2",
    imports: [TuiCalendarRange],
    templateUrl: './index.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        {
            provide: TUI_CALENDAR_DATE_STREAM,
            useValue: calendarStream$,
        },
    ],
})
export default class Example {}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    <tui-calendar-range [items]="items" />

    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiCalendarRange, tuiCreateDefaultDayRangePeriods} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example3",
    imports: [TuiCalendarRange],
    templateUrl: './index.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {
    protected items = tuiCreateDefaultDayRangePeriods();
}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    <tui-calendar-range />

    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiDayOfWeek} from '@taiga-ui/cdk';
import {TUI_FIRST_DAY_OF_WEEK} from '@taiga-ui/core';
import {TuiCalendarRange} from '@taiga-ui/kit';
 
@Component({
    standalone: true,
    exportAs: "Example4",
    imports: [TuiCalendarRange],
    templateUrl: './index.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        {
            provide: TUI_FIRST_DAY_OF_WEEK,
            useValue: TuiDayOfWeek.Sunday,
        },
    ],
})
export default class Example {}
    

        
            Copy
        
        
    

    
    

        
            Copy
        
        
    

    
<tui-calendar-range
    [items]="items"
    [value]="value"
    [(item)]="selected"
    (valueChange)="onValue($event)"
/>
 
<p *ngIf="isLastVisible">
    <button
        tuiLink
        type="button"
        (click)="reset()"
    >
        Reset
    </button>
</p>
 
<p *ngIf="isSelected && !isDefault">
    You are seeing {{ selected }}.
    <button
        *ngIf="!isLastVisible"
        tuiLink
        type="button"
        (click)="toggle()"
    >
        Switch to {{ opposite }}
    </button>
</p>
    

        
            Copy
        
        
    

    
import {NgIf} from '@angular/common';
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
import {TuiLink} from '@taiga-ui/core';
import {TuiCalendarRange, TuiDayRangePeriod} from '@taiga-ui/kit';
 
const today = TuiDay.currentLocal();
const startOfWeek = today.append({day: -today.dayOfWeek()});
const startOfMonth = today.append({day: 1 - today.day});
const startOfQuarter = startOfMonth.append({month: -(startOfMonth.month % 3)});
 
@Component({
    standalone: true,
    exportAs: "Example5",
    imports: [NgIf, TuiCalendarRange, TuiLink],
    templateUrl: './index.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {
    protected readonly items = [
        new TuiDayRangePeriod(
            new TuiDayRange(today.append({day: -30}), today),
            'Default',
        ),
        new TuiDayRangePeriod(new TuiDayRange(startOfWeek, today), 'Week'),
        new TuiDayRangePeriod(new TuiDayRange(startOfMonth, today), 'Month'),
        new TuiDayRangePeriod(new TuiDayRange(startOfQuarter, today), 'Quarter'),
    ];
 
    protected selected: TuiDayRangePeriod | null = this.default;
    protected value: TuiDayRange | null = this.default.range;
 
    public get default(): TuiDayRangePeriod {
        return this.items[0]!;
    }
 
    public get isDefault(): boolean {
        return this.selected === this.default;
    }
 
    public get isSelected(): boolean {
        return !!this.items.find((item) => item === this.selected);
    }
 
    public get isLastVisible(): boolean {
        return this.selected === this.items[this.items.length - 1];
    }
 
    public get opposite(): TuiDayRangePeriod | null {
        if (!this.isSelected) {
            return null;
        }
 
        switch (this.selected) {
            case this.default:
                return null;
            case this.items[1]:
                return this.items[2]!;
            case this.items[2]:
                return this.items[3]!;
            case this.items[3]:
                return null;
            default:
                return null;
        }
    }
 
    public onValue(value: TuiDayRange | null): void {
        this.value = value;
    }
 
    public reset(): void {
        this.selected = this.default;
        this.value = this.selected.range;
    }
 
    public toggle(): void {
        this.selected = this.opposite;
        this.value = this.selected?.range ?? null;
    }
}
    

        
            Copy