In this post I am going to share simple javascript library to integrate calendar feature in your web page. It is Lightweight and simple calendar in pure JavaScript. Hello Week is a zero-dependency JavaScript plugin to create a nice clean multi-language inline calendar for date selection.
Libraries
Include the following css and javascript library files on page.
<link rel="stylesheet" type="text/css" href="hello.week.min.css" /> <link rel="stylesheet" type="text/css" href="hello.week.theme.min.css" /> <script type="text/javascript" src="hello.week.min.js">script> |
HTML
Write html markup to display calender.
|
JS
Finally call the plugin and done.!
<script> new HelloWeek(); script> |
Following are the list of options you can use to customize the plugins. HelloWeek comes with a few (optional) settings that you can change by passing an object as an argument. Default values are presented below.
new HelloWeek({ selector: '.hello-week', lang: 'en', langFolder: './dist/langs/', format: 'dd/mm/yyyy', weekShort: true, monthShort: false, multiplePick: false, defaultDate: null, todayHighlight: true, disablePastDays: false, disabledDaysOfWeek: null, disableDates: null, weekStart: 0, daysHighlight: null, range: false, rtl: false, locked: false, minDate: null, maxDate: null, nav: ['◀', '▶'], onLoad: () => { /** callback function */ }, onChange: () => { /** callback function */ }, onSelect: () => { /** callback function */ }, onClear: () => { /** callback function */ } }); |
Date Format
| Input | Example | Description |
|---|---|---|
dd |
1..31 |
Day of the month without leading zeros. |
DD |
01..31 |
Day of the month, 2 digits with leading zeros. |
mm |
1..12 |
Numeric representation of a month, without leading zeros |
MM |
01..12 |
Month number, with leading zeros. |
mmm |
Jan..Dec |
Month name with short textual representation. |
MMM |
January..December |
A full textual representation of a month. |
yyyy or YYYY |
2018 |
A full numeric representation of a year, 4 digits. |
yy or YY |
18 |
A two digit representation of a year. |
See live demo and download source code.
This awesome plugin is developed by mauroreisvieira. Visit their official github repository for more information and follow for future updates.
