18.0.1 • Published 10 months ago

@xirenec/ngx-weekday-picker v18.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

NgxWeekdayPicker

npm.io npm.io

A lightweight plugin to a pick weekday.

Features

  • highly customizable
  • very easy to implement

Demo

npm.io

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)DefaultDescription
weekStartWeekDay.MondaySelect 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
dayWidth40pxThe width of the days
fontSize14pxThe font size of the days
borderRadius6pxThe border radius
borderWidth1pxThe border width
activeColor#fffThe color of the selected days
activeBgColor#2196f3The background color of the selected days
activeBorderColor#008effThe border color of the selected days
inactiveColor#000The color of the not selected days
inactiveBgColor#fffThe background color of the not selected days
inactiveBorderColor#dddThe border color of the not selected days

Events

  • selectedChanged - triggered on change the selection

Other Projects

NameLinkDescription
ngx-i24-circular-progressLinkA lightweight plugin to render a simple, animated circular progress bar.
ngx-i24-progress-barLinkA lightweight plugin to render a simple, animated progress bar.
ngx-weekday-pickerLinkLightweight plugin to a pick weekday.
ngx-i24-color-pickerLinkA lightweight plugin to pick a color.
ngx-i24-checkboxLinkA lightweight plugin to display a modern checkbox.

Support

npm.io

Copyright

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

16.1.0

10 months ago

18.0.1

10 months ago

18.0.0

10 months ago

17.0.1

10 months ago

17.0.0

10 months ago

16.0.0

2 years ago

1.0.0

2 years ago