Calendar

The FktCalendar component provides a comprehensive date selection interface with multiple view modes and extensive customization options. Built with Angular signals for optimal performance and reactivity, it supports date, month, and year selection with configurable styling and behavior.

Import

import {FktCalendarComponent} from "frakton-ng/calendar";

Basic calendar

Basic calendar with date selection functionality and month/year navigation.

Borderless calendar

Calendar displayed without border for seamless integration into containers.

With disabled dates

Calendar with disabled dates to restrict user selection to valid date ranges.


	
	
		
			
			Past dates
		
		
			
			Weekends
		
		
			
			Blackout dates (15th of month, Dec 24-26)
		
	

	
		Disabled Date Rules:
		
			All past dates are disabled
			Weekends (Saturday & Sunday) are disabled
			15th of every month (maintenance day)
			December 24-26 (holiday period)

With events

Calendar displaying events and highlighting dates with special significance.


	
	
		
			
				Click History
				
			
			
				@if (clickHistory().length === 0) {
					Click on any date to see interaction history
				} @else {
					@for (item of clickHistory(); track item) {
						{{ item }}
					}
				}

Custom styling

Calendar with custom styling and visual indicators for different date states.


	
	
		
			
			Weekends
		
		
			
			Holidays
		
		
			
			Past dates