Quick start

Installation

# Using NPM
npm install hello-week --D

# Using Yarn
yarn add hello-week

Including files:

<link rel="stylesheet" type="text/css" href="hello.week.css" />
<link rel="stylesheet" type="text/css" href="default.theme.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: './langs/',
  format: 'DD/MM/YYYY',
  defaultDate: null,
  todayHighlight: true,
  weekStart: 0,
  monthShort: false,
  weekShort: true,
  minDate: null,
  maxDate: null,
  daysSelected: null,
  daysHighlight: null,
  multiplePick: false,
  disableDaysOfWeek: null,
  disableDates: null,
  disablePastDays: false,
  range: false,
  locked: false,
  rtl: false,
  nav: ['◀', '▶'],
  timezoneOffset: new Date().getTimezoneOffset(),
  onLoad: () => void;
  onNavigation: () => void;
  onSelect: (data: IDayOptions) => IDayOptions;
  beforeLoad: () => void;
  beforeCreateDay: (data: IDayOptions) => IDayOptions;
});

new HelloWeek({
+   timezoneOffset: new Date().getTimezoneOffset(),
-   onClear: () => {}
-   onSelect: () => {}
+   onSelect: (data: IDayOptions) => data
+   beforeLoad: () => {}
+   beforeCreateDay: (data: IDayOptions) => data
});

Useful links

• Examples
• Changelog
• Contributing

Supported Browsers:

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

License

Hello Week is open-sourced software licensed under the MIT license