Lightweight and simple calendar in pure JavaScript – Hello Week

by Posted on

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.

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

<div class="hello-week">
    <div class="navigation">
        <button class="prev">Prev</button>
        <div class="period"></div>
        <button class="next">Next</button>
    </div>
    <div class="week"></div>
    <div class="month"></div>
</div>

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.

DEMO | DOWNLOAD

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


Published by admin