Author: | maurovieirareis |
---|---|
Views Total: | 905 views |
Official Page: | Go to website |
Last Update: | March 25, 2023 |
License: | MIT |
Preview:

Description:
Hello Week is a zero-dependency JavaScript plugin to create a nice clean multi-language inline calendar for date selection.
See also:
How to use it:
Add references to the Hello Week’s JavaScript and CSS files.
<link href="dist/helloweek.css" rel="stylesheet"> <script src="dist/helloweek.min.js"></script>
The basic html structure for the calendar.
<div class="hello-week"> <div class="hello-week__header"> <button class="btn demo-prev">◀</button> <div class="hello-week__label"></div> <button class="btn demo-next">▶</button> </div> <div class="hello-week__week"></div> <div class="hello-week__month"></div> </div>
Initialize the calendar with default settings.
const myCalendar = new HelloWeek();
Enable the prev/next buttons.
const prev = document.querySelector('.demo-prev'); const next = document.querySelector('.demo-next');
Get current, picked, and last picked dates.
<p><strong>Today:</strong> </p> <ul class="demo-today"><span>n/a</span></ul> <p><strong>Last Picked Day:</strong></p> <ul class="demo-last"><span>n/a</span></ul> <p><strong>Picked Days:</strong></p> <ul class="demo-picked"><span>n/a</span></ul>
const today = document.querySelector('.demo-today'); const picked = document.querySelector('.demo-picked'); const last = document.querySelector('.demo-last'); function updateInfo() { if (this.today) { today.innerHTML = ''; var li = document.createElement('li'); li.innerHTML = this.today; today.appendChild(li); } if (this.lastSelectedDay) { picked.innerHTML = ''; for (days of this.selectedDays) { var li = document.createElement('li'); li.innerHTML = days; picked.appendChild(li); } last.innerHTML = ''; var li = document.createElement('li'); li.innerHTML = this.lastSelectedDay; last.appendChild(li); } } const myCalendar = new HelloWeek({ onLoad: updateInfo, onChange: updateInfo, onSelect: updateInfo });
Default plugin settings and callback functions to customize the calendar.
const myCalendar = new HelloWeek({ selector: '.hello-week', lang: 'en', langFolder: './dist/langs/', format: 'dd/mm/yyyy', weekShort: true, monthShort: false, multiplePick: false, defaultDate: false, todayHighlight: true, daysSelected: null // ['2019-02-26', '2019-03-01', '2019-03-02', '2019-03-03'] disablePastDays: false, disabledDaysOfWeek: false, disableDates: false, weekStart: 0, // 0 (Sunday) to 6 (Saturday). daysHighlight: false, range: false, rtl: false, locked: false minDate: false, maxDate: false, nav: ['◀', '▶'], onLoad: () => { /** callback function */ }, onChange: () => { /** callback function */ }, onSelect: () => { /** callback function */ }, onClear: () => { /** callback function */ }, beforeCreateDay: (node) => { /** callback function */ }, });
Create your own language strings just like the en.json
.
{ "days": [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], "daysShort": [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ], "months": [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], "monthsShort": [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] }
API methods.
// change the month to the previous myCalendar.prev(); // change the month to the next myCalendar.next(); // update the calendar myCalendar.update(); // reset the calendar myCalendar.reset(); // destroy the calendar myCalendar.destroy(); // move the calendar to the current day myCalendar.goToday(); // move the calendar to a specified day myCalendar.goToDate(date); // get the selected days myCalendar.getDays(); // get the highlighted dates myCalendar.getDaysHighlight(); // set highlighted dates myCalendar.setDaysHighlight(daysHighlight); // set the multiple picker myCalendar.setMultiplePick(Boolean); // disable past days myCalendar.setDisablePastDays(Boolean); // highlight today myCalendar.setTodayHighlight(state: Boolean); // set range myCalendar.setRange(Boolean); // set locked myCalendar.setLocked(state); // set min/max dates myCalendar.setMinDate(date: String | Number); myCalendar.setMaxDate(date: String | Number); // reset the picker myCalendar.reset(options);
Changelog:
v2.14.2 (03/25/2023)
- Update
v2.13.1 (02/09/2023)
- Bug Fixes
- add beforeCreateDay callback
v2.13.0 (09/11/2022)
- Bug Fixes
- langs: add German languages
v2.10.3 (08/02/2022)
- Fixed range option.
- Fixed timezone.
v2.10.2 (05/19/2019)
- fix: update version.
v2.10.1 (05/09/2019)
- Fix issue setDayHighlight() method.
v2.10.0 (04/16/2019)
- update
v2.9.1 (03/29/2019)
- update
v2.9.0 (03/28/2019)
- added reset method
v2.6.0 (03/28/2019)
- feat: added method setMinDate and setMaxDate.
v2.5.0 (03/27/2019)
- Bugfix
v2.4.0 (03/23/2019)
- Fixed getDays() method.
v2.3.0 (03/19/2019)
- Fixed setDaysHighlight() method.
v2.2.0 (03/19/2019)
- Added Italian translation.
- FixedgoToDate() method.
- Added daysSelected option.
v2.0.0 (02/24/2019)
- Added method setRange toggle status of range.
- Added method setLocked set calendar locked.
- Added option rtl allows layout for languages written from right to left (like Hebrew or Arabic).
- Added option locked sets all days of the week locked.
Fixed month date range.
v1.5.0 (12/11/2018)
- update
v1.4.1 (6/18/2018)
- Spanish translation.
- Fix defaultDate option also minDate and maxDate.
v1.4.0 (5/24/2018)
- Option nav show next/prev buttons.
v1.3.2 (5/22/2018)
- Fix method used in option range to ignore dates lower than the first selected date.
Hi, the version 0.0.5 its available!
This is no good, way too big javascript file and loads external files from other cdn’s
Big javascript file? 44.9 KB?
And is not use any external file.
Doesn’t work on iPhone 5. Looking for something that is compatible with most devices.
Version 2.0 its available. ?
how can I make the onselected date as a variable so I can use it in ajax, please help me. I’m new to this. Thank you
I also have this error : this.selectedDays is not iterable . help me please
I found 3 problems. but i am a beginner so correct me if i am wrong
1 There is no ‘dist’ where the style and js is stored
2 1 seems solved in the 3.x version which i found from ur github. but the style contains a ‘.’ not just helloweek.css but hello.week.css this also applies for the js file.
3 After correcting all this, i managed to disiplay the calendar but it wasnt styled. for e.g the present day is not marked, unavailable and available dates are not marked. they are all white.