NgxWeekdayPicker

A lightweight plugin to a pick weekday.

Features

• highly customizable
• very easy to implement

Demo

• Link

Get started

Installation

$ npm i ngx-weekday-picker

Example

TS

Module

import { NgxWeekdayPickerModule } from 'ngx-weekday-picker';
@NgModule({
  declarations: [ AppComponent ],
  imports: [BrowserModule, NgxWeekdayPickerModule  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component

import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent {
options = {
   weekStart: WeekDay.Saturday,
   inactiveColor: '#f2f2f2',
   inactiveBgColor: '#2a2a2a',
   inactiveBorderColor: '#000',
   daysNames: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
   selected: [WeekDay.Saturday, WeekDay.Sunday],
 };
 options1 = { 
   weekStart: WeekDay.Saturday,
   activeBgColor:'#e91e63',
   activeBorderColor:'#e91e63',
   inactiveColor: '#f2f2f2',
   inactiveBgColor: '#2a2a2a',
   inactiveBorderColor: '#000',
   daysNames: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
   selected: [WeekDay.Saturday, WeekDay.Sunday],
 };
}

HTML

 <ngx-weekday-picker></ngx-weekday-picker>
  <ngx-weekday-picker
    [daysNames]="options.daysNames"
    [weekStart]="options.weekStart"
    [selected]="options.selected"
    [inactiveColor]="options.inactiveColor"
    [inactiveBgColor]="options.inactiveBgColor"
    [inactiveBorderColor]="options.inactiveBorderColor"
  ></ngx-weekday-picker>
  <ngx-weekday-picker
    [daysNames]="options1.daysNames"
    [activeBgColor]="options1.activeBgColor"
    [activeBorderColor]="options1.activeBorderColor"
    [weekStart]="options1.weekStart"
    [selected]="options1.selected"
    [inactiveColor]="options1.inactiveColor"
    [inactiveBgColor]="options1.inactiveBgColor"
    [inactiveBorderColor]="options1.inactiveBorderColor"
  ></ngx-weekday-picker>

Options

| Property (Type) | Default | Description| | - | - | - | | weekStart | WeekDay.Monday | Select the first day in the list | | daysNames | ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'] | The labels of the days | | disabledList | [] | The disabled days list | | selected | [] | The default selected days | | dayWidth | 40px | The width of the days | | fontSize | 14px | The font size of the days | | borderRadius | 6px | The border radius | | borderWidth | 1px | The border width | | activeColor | #fff | The color of the selected days | | activeBgColor | #2196f3 | The background color of the selected days | | activeBorderColor | #008eff | The border color of the selected days | | inactiveColor | #000 | The color of the not selected days | | inactiveBgColor | #fff |The background color of the not selected days | | inactiveBorderColor | #ddd | The border color of the not selected days |

Events

• selectedChanged - triggered on change the selection

Other Projects

| Name | Link | Description| | - | - | - | | ngx-i24-circular-progress | Link | A lightweight plugin to render a simple, animated circular progress bar. | | ngx-i24-progress-bar | Link | A lightweight plugin to render a simple, animated progress bar. | | ngx-weekday-picker | Link | Lightweight plugin to a pick weekday. | | ngx-i24-color-picker | Link | A lightweight plugin to pick a color. | | ngx-i24-checkbox | Link | A lightweight plugin to display a modern checkbox. |

Support

Copyright

Copyright (c) 2022 Yaseen Alrefaee, contributors. Released under the MIT