ngx-month-menu dropdown

This is an Angular library that allows users to select a year and month combination from a dropdown menu. It displays options for the current year, the last four months, and the last four years, along with a list of months from January to December.

Demo

https://stackblitz.com/edit/angular-ivy-cqkjx4

Table of Contents

• Prerequisites
• Installation
• Usage
• Customization
• License
• Author

Prerequisites

Before you begin, ensure you have met the following requirements:

• Angular 12
• Angular Material 12
• material-design-icons-iconfont

Installation

1. npm i ngx-month-menu
2. npm i material-design-icons-iconfont@6.7
3. Import the library:

   1@NgModule({
   2     declarations: [
   3         ...
   4     ],
   5     imports: [
   6         ...
   7         NgxMonthMenuModule   
   8     ];
   9});

Usage

• When you run your Angular application, the ngx-month-menu will display a dropdown menu in your template.

• The dropdown menu will contain options for the current year, the last four months, and the last four years, along with the months from January to December.

• When a user selects a year and month, the (selectedYearMonth) event will be emitted with the selected item in the format year=2020&month=4.

• You can handle this event by implementing the onSelectYearMonth function in your component and extracting the selected year and month for further processing.

• In Template

1<ngx-month-menu (selectedYearMonth)="onSelectYearMonth($event)">
2</ngx-month-menu>

• In Component

1onSelectYearMonth(selectedItem: string): void {
2  // Parse the selected item and do something with it
3  const [year, month] = selectedItem.split('&').map(param => param.split('=')[1]);
4  console.log(`Selected Year: ${year}, Selected Month: ${month}`);
5  // Add your custom logic here
6}

• Output

1Selected Year: 2023, Selected Month: 9

Customization

You can customize the appearance and behavior of the ngx-month-menu by modifying its HTML template, styles, and Angular code to suit your project's needs.

License

This component is provided under the MIT License.

Author

• Sudesh A K