npm install hello-week --saveyarn add hello-weekCSS
<link rel="stylesheet" type="text/css" href="hello.week.min.css" />
<link rel="stylesheet" type="text/css" href="hello.week.theme.min.css" />JS
<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>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) => {},
});- Chrome 49
- Firefox 31
- Opera 36
- Safari 9.3
- Edge 17
- iOS Safari 6.0
Hello Week is open-sourced software licensed under the MIT license