nw-calendar - npm

nw-calendar  -  npm

Nw Calendar

Table of contents


nw-calendar is an angular & ionic library,, supports week and month views, and more than 100 locales

Getting Started

First install through npm:

npm install nw-calendar

Next import the calendar module into your app module:

      declarations: [  
      imports: [  
      providers: [],  
      bootstrap: [AppComponent]  
    export class AppModule { }

Finally, use the nw-calendar component in your template:


then enjoy :)


  1. Month View [default]

    <nw-calendar viewType="month"></nw-calendar>
  2. Week View

    <nw-calendar viewType="week"></nw-calendar>



Property Description Valid Values Default
[viewType] the view type of calendar 'week' , 'month' 'month'
[locale] the default language used in calendar Locales 'en'
[dir] the direction of calendar 'ltr' , 'rtl' 'ltr'
[(selectedDate)] Selected Date Date
[range] Available dates range to allow selection within {start?: Date , end?: Date }
[isDisabled] a function returns a boolean to disable specific dates regarding to custom conditions () => boolean (date:Date) => { return false; }


Property Description Data
(navigate) Navigation Event handler {start?: Date , end?: Date }
(selectedDateChange) On Date select Event Handler Date


Locale Language
en English
af Afrikaans
ar-dz Arabic (Algeria)
ar-kw Arabic (Kuwait)
ar-ly Arabic (Libya)
ar-ma Arabic (Morocco)
ar-sa Arabic (Saudi Arabia)
ar-tn Arabic (Tunisia)
ar Arabic
az Azerbaijani
be Belarusian
bg Bulgarian
bm Bambara
bn Bengali
bo Tibetan
br Breton
bs Bosnian
ca Catalan
cs Czech
cv Chuvash
cy Welsh
da Danish
de-at German (Austria)
de-ch German (Switzerland)
de German
dv Divehi
el Greek
en-au English (Australia)
en-ca English (Canada)
en-gb English (United Kingdom)
en-ie English (Ireland)
en-nz English (New Zealand)
eo Esperanto
es-do Spanish (Dominican Republic)
es-us Spanish (United States)
es Spanish
et Estonian
eu Basque
fa Persian
fi Finnish
fo Faroese
fr-ca French (Canada)
fr-ch French (Switzerland)
fr French
fy Western Frisian
gd Scottish Gaelic
gl Galician
gom-latn gom (Latin)
gu Gujarati
he Hebrew
hi Hindi
hr Croatian
hu Hungarian
hy-am Armenian (Armenia)
id Indonesian
is Icelandic
it Italian
ja Japanese
jv Javanese
ka Georgian
kk Kazakh
km Khmer
kn Kannada
ko Korean
ky Kirghiz
lb Luxembourgish
lo Lao
lt Lithuanian
lv Latvian
me me
mi Maori
mk Macedonian
ml Malayalam
mr Marathi
ms-my Malay (Malaysia)
ms Malay
mt Maltese
my Burmese
nb Norwegian Bokmål
ne Nepali
nl-be Dutch (Belgium)
nl Dutch
nn Norwegian Nynorsk
pa-in Punjabi (India)
pl Polish
pt-br Portuguese (Brazil)
pt Portuguese
ro Romanian
ru Russian
sd Sindhi
se Northern Sami
si Sinhala
sk Slovak
sl Slovenian
sq Albanian
sr-cyrl Serbian (Cyrillic)
sr Serbian
ss Swati
sv Swedish
sw Swahili
ta Tamil
te Telugu
tet Tetum
th Thai
tl-ph Tagalog (Philippines)
tlh Klingon
tr Turkish
tzl tzl
tzm-latn tzm (Latin)
tzm tzm
uk Ukrainian
ur Urdu
uz-latn Uzbek (Latin)
uz Uzbek
vi Vietnamese
x-pseudo x-pseudo
yo Yoruba
zh-cn Chinese (China)
zh-hk Chinese (Hong Kong SAR China)
zh-tw Chinese (Taiwan)



developed with ❤ by Ahmed M. Elewa

angular npm web-development typescript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Complete beginner guide to publishing an Angular library to npm.

In this article, I will be sharing my experience of publishing my first Angular library to NPM. This post will cover steps right from creating the library to detailed NPM publishing steps.

Wondering how to upgrade your skills in the pandemic? Here's a simple way you can do it.

Corona Virus Pandemic has brought the world to a standstill. Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public