Dynamic Calendar in Javascript Code with Demo – Calender.js

Are you looking for a Lightweight, Dynamic and no dependencies Calendar in Javascript? Let’s have a look the complete source code with the demo.

It is a creative design calendar which is easy to customize. That’s why We did a little customization to make it more beautiful.

With the help of CSS, You can change its entire design and make it perfect according to your web design need.

You may be thinking about responsive, right? Don’t you worry, It’s mobile friendly and work well with mobile, laptop and tablet devices.

It has built-in four different language translation and supports RTL layout for languages written from right to left (like Arabic, Urdu, Hebrew, etc).

How to Create Dynamic Calendar in Javascript

To make work the calendar on your website, You need to download the source code.

Next, You need to add both CSS files and a Javascript file into your webpage.

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

Next, the HTML markup Which is very easy and only needs to define a div with class name hello-week. To show the week and month, We will place two another divs.

<div class="week"></div>
<div class="month"></div>
<div class="hello-week"></div>

Finally, we will Initialize the calendar with default settings.

<script>
  new HelloWeek();
</script>

Javascript Calendar Options

The plugin comes with a few optional settings which allow you to easily customize it. You can change the settings by passing an object as an argument.

Let’s have a look at the default values:

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, // week start on Sunday
    daysHighlight: null,
    daysSelected: null,
    range: false,
    rtl: false,
    locked: false,
    minDate: null,
    maxDate: null,
    nav: ['◀', '▶'],
    onLoad: () => { /** callback function */ },
    onChange: () => { /** callback function */ },
    onSelect: () => { /** callback function */ },
    onClear: () => { /** callback function */ }
});

Supported Browsers:

It supports all the major browsers which include the iOS Safari.

• Chrome 49
• Firefox 31
• Opera 36
• Safari 9.3
• Edge 17
• iOS Safari 6.0