Hello-week NPM

Hello Week

Quick start

Installation

npm install hello-week --save

yarn add hello-week

Including Files:

CSS

<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="module">
    import HelloWeek from 'hello.week.esm.js';
    new HelloWeek();
</script>

HTML Markup

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

Options

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,
    minDate: null,
    maxDate: null,
    disabledDaysOfWeek: null,
    disableDates: null,
    weekStart: 0, // week start on Sunday
    timezoneOffset: new Date().getTimezoneOffset(),
    daysSelected: null,
    daysHighlight: null,
    disablePastDays: false,
    todayHighlight: true,
    range: false,
    locked: false,
    rtl: false,
    nav: ['◀', '▶'],
    onClear: () => {},
    onLoad: () => {},
    onNavigation: () => {},
    onSelect: () => {},
    beforeCreateDay: (node) => {},
});