Skip to content

Latest commit

 

History

History
43 lines (28 loc) · 1.43 KB

README.md

File metadata and controls

43 lines (28 loc) · 1.43 KB

primeng-calendar-mode-toggle-directive-using-renderer

Angular Directive that adds Selection Mode toggle to PrimeNG Calendar component


Working StackBlitz:

https://stackblitz.com/edit/primeng-calendar-demo-with-selectionmode-toggle-directive?file=src%2Fapp%2Fcalendar-mode-toggle.directive.ts


It just toggles between 'range' mode and 'single' mode but feel free to take the code and enhance it however you want. (The component also supports a 'multiple' mode but I didn't need to support that.)


Here's what the calendar looks like. I put the toggle buttons in the middle of the button bar because it seemed like a convenient and nice place for them.

Single-select Mode

Calendar in Single-select Mode

Range-select Mode

Calendar in Range-select Mode


And here's what the Directive looks like applied to the p-calendar component.

<p-calendar 
    [(ngModel)]="rangeDates"
    selectionMode="single"
    calendarModeToggle <------- boom
    [showButtonBar]="true"
    calendarModeToggle
    [readonlyInput]="true"
    inputId="range">
</p-calendar>

If you'd rather define the toggle buttons in the parent component's template instead of creating them programmatically, see this version of the directive:

https://github.com/mikejacobson/primeng-calendar-mode-toggle-directive