Lightweight and simple calendar in pure JavaScript – Hello Week

by

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.
javascript-calender


Libraries

Include the following css and javascript library files on page.

HTML

Write html markup to display calender.

JS

Finally call the plugin and done.!




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.

DEMO | DOWNLOAD

This awesome plugin is developed by mauroreisvieira. Visit their official github repository for more information and follow for future updates.


Published by Rohit