npx-calendar
Version:
A customizable and feature-rich calendar component for Angular applications.
231 lines (230 loc) • 9.11 kB
TypeScript
import { ElementRef } from '@angular/core';
import { CalendarEvent, CalendarEventDetails, CalendarThemes } from '../../interface/calendar.interface';
import * as i0 from "@angular/core";
export declare class CalendarComponent {
private elementRef;
popover: ElementRef;
isPopoverOpen: boolean;
popoverDay: number | null;
daysOfTheWeek: string[];
monthsOfTheYear: string[];
hours: string[];
currentWeekDays: number[];
years: number[];
viewOptions: string[];
daysInMonth: number[];
currentMonth: number;
currentYear: number;
currentDay: number;
currentMonthName: string;
currentYearName: string;
currentDate: string;
firstDayOfWeek: number;
isOpen: boolean;
isMonthPickerOpen: boolean;
isFilterOpen: boolean;
selectedView: number;
isOffCanvasOpen: boolean;
weekDay: string | null;
selectedDay: number;
selectedDayEvents: CalendarEventDetails[];
showYearPicker: boolean;
selectedEventDetail: CalendarEventDetails;
calendar_events: CalendarEvent[];
calendar_themes: CalendarThemes;
constructor(elementRef: ElementRef);
/**
* Initialize the component.
*
* Gets the current month and year, then calls
* {@link generateCalender} to generate the calender.
*/
ngOnInit(): void;
/**
* Generate the calender.
*
* This method generates the days of the month and the first day of the week.
* It also sets the current date.
*
* It is called on component initialization.
*/
private generateCalender;
handleCalenderEvent(day: number): void;
/**
* Handle the next month button click event.
*
* This will add one to the current month, taking into account the wrap-around
* from December to January.
*
* If the current month is December (11), we should increment the current year.
*/
handleNextMonth(): void;
/**
* Handle the previous month button click event.
*
* This will subtract one from the current month, taking into account the wrap-around
* from December to January.
*
* If the current month is January (0), we should decrement the current year.
*/
handlePrevMonth(): void;
/**
* Toggle the date picker dropdown.
*
* This method is called when the current month button is clicked. It toggles the
* {@link isOpen} property, which determines whether the date picker dropdown
* is visible or not.
*/
toggleDatePicker(): void;
/**
* Toggle the month picker dropdown.
*
* This method is called when the month button is clicked. It toggles the
* {@link isMonthPickerOpen} property, which determines whether the month
* picker dropdown is visible or not.
*/
toggleMonthPicker(): void;
/**
* Toggle the filter dropdown.
*
* This method is called when the filter button is clicked. It toggles the
* {@link isFilterOpen} property, which determines whether the filter dropdown
* is visible or not.
*/
toggleFilter(): void;
/**
* Handles the month change event.
*
* This method is called when a new month is selected from the month dropdown.
* It is called automatically whenever the user selects a new month from the
* month dropdown.
*
* The purpose of this method is to update the current month and regenerate
* the calender. This is necessary because the calender is rendered based on the
* current month and year, so if the user changes the month, we need to update
* the calender to reflect the new month.
*
* The method takes a single argument, `month`, which is the new month to be
* selected (0-11, January-December).
*
* The method does the following:
* 1. It updates the current month by setting the `currentMonth` property to
* the new month.
* 2. It closes the month dropdown by setting the `isOpen` property to false.
* 3. It regenerates the calender by calling the `generateCalender()` method.
*
* @param month The new month (0-11, January-December).
*/
onMonthChange(month: number): void;
/************* ✨ Codeium Command 🌟 *************/
/**
* Handles the year change event.
*
* This method is called when a new year is selected from the year dropdown.
* It updates the current year and regenerates the calender by calling
* {@link generateCalender}.
*
* @param year The new year.
*/
onYearChange(year: number): void;
/****** a23a8126-489d-4240-8c98-4a4c397bedb5 *******/
/**
* Open the off-canvas menu.
*
* This method is called when a day is clicked in the calendar. It will open the
* off-canvas menu and set the week day label to the name of the day of the week
* of the selected date.
*
* @param day The day of the month that was clicked (1-31).
* @param event The list of events associated with the day that was clicked.
*/
openOffCanvas(day: number, event: CalendarEventDetails[]): void;
/**
* Close the off-canvas menu.
*
* This method is called when the close button is clicked in the off-canvas
* menu. It sets the {@link isOffCanvasOpen} property to false, which will
* hide the off-canvas menu.
*/
closeOffCanvas(): void;
/**
* Opens the popover that displays the events for the selected day.
*
* This method is called when a day is clicked in the calendar. It will open the
* popover and position it at the location of the click event.
*
* @param event The mouse event that triggered this method.
* @param day The day of the month that was clicked (1-31).
*/
openPopover(event: MouseEvent, day: number, eventDetail: CalendarEventDetails): any;
/**
* Position the popover at the location of the click event.
*
* This function is called by the openPopover method, which is called when a day
* is clicked in the calendar. It will position the popover at the location of the
* click event.
*
* This function will wait for the popover to render before positioning it. This
* is done with setTimeout and a 0ms delay. This ensures that the popover has
* rendered and its width and height are available.
*
* It will check if the popover is too close to the edge of the screen and if so,
* will reposition it so it doesn't go off the screen.
*
* @param event The mouse event that triggered this method.
*/
positionPopover(event: MouseEvent): void;
/**
* Called when the user changes the calendar view.
*
* This function is called when the user changes the calendar view by clicking on
* one of the view options in the top right corner of the calendar. The view
* options are "Month", "Week", and "Day".
*
* When this function is called, it will update the selectedView property to the
* index of the view that was selected.
*
* @param view The index of the view that was selected (0, 1, or 2).
*/
onViewChange(view: number): void;
/**
* Toggle the year picker dropdown.
*
* This function is called when the year button is clicked. It will toggle the
* {@link showYearPicker} property, which determines whether the year picker
* dropdown is visible or not.
*
* Also, it will stop the event from propagating up the DOM tree, so that the
* event doesn't bubble up and cause the calendar to be closed.
*
* @param event The mouse event that triggered this method.
*/
toggleYearPicker(event: Event): void;
/**
* Handles the previous year button click event.
*
* This method is called when the previous year button is clicked. It will
* decrement the current year by one and regenerate the calender by calling
* {@link generateCalender}.
*
* It will also stop the event from propagating up the DOM tree, so that the
* event doesn't bubble up and cause the calendar to be closed.
*
* @param event The mouse event that triggered this method.
*/
handlePrevYear(event: Event): void;
/**
* Handles the next year button click event.
*
* This method is called when the next year button is clicked. It will
* increment the current year by one and regenerate the calender by calling
* {@link generateCalender}.
*
* @param event The mouse event that triggered this method.
*/
handleNextYear(event: Event): void;
getCurrentWeek(startFromMonday?: boolean): void;
getEventHour(eventTime: string, extraMinutes: string): string;
static ɵfac: i0.ɵɵFactoryDeclaration<CalendarComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent, "lib-calendar", never, { "calendar_events": { "alias": "calendar_events"; "required": false; }; "calendar_themes": { "alias": "calendar_themes"; "required": false; }; }, {}, never, never, true, never>;
}