The hello-week from jinseonlee1215

jinseonlee1215 / hello-week Goto Github PK

View Code? Open in Web Editor NEW

Hello Week - Lightweight and simple calendar with no dependencies in pure JavaScript

License: MIT License

JavaScript 14.30% TypeScript 74.53% CSS 5.60% HTML 5.57%

hello-week's Introduction

Quick start

Installation

npm install hello-week --save

yarn add hello-week

Including files:

<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>
<script>
  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,
    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 */ }
});