Author: | beinoriusju |
---|---|
Views Total: | 7,055 views |
Official Page: | Go to website |
Last Update: | May 23, 2021 |
License: | MIT |
Preview:

Description:
TavoCalendar is a Vanilla JavaScrip based inline calendar where the users are able to select a date (or a date range) or view events with mouse click.
More Features:
- Pre-selected dates.
- Highlight & ignore dates.
- Multiple languages.
- Custom date formats.
- API methods and event handlers.
How to use it:
1. Load the required moment.js library in the document.
<!-- With locals--> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" ></script> <!-- Without locals--> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" ></script>
2. Load the TavoCalendar’s JavaScript and CSS files.
<link rel="stylesheet" href="./dist/tavo-calendar.css" /> <script src="./dist/tavo-calendar.js"></script>
3. Create a container to hold the calendar view.
<div id="my-calendar"></div>
4. Initialize the library to generate a basic calendar on the page.
const myCalendar = new TavoCalendar('#my-calendar', { // settings here })
5. Set the date the calendar should focus.
const myCalendar = new TavoCalendar('#my-calendar', { date: "2020-03-15" })
6. Set an array of preselected dates.
const myCalendar = new TavoCalendar('#my-calendar', { date: "2020-03-15", selected: ['2020-03-20', '2020-03-21'] })
7. Enable date range selection.
const myCalendar = new TavoCalendar('#my-calendar', { date: "2020-12-21", date_start: "2020-12-20", date_end: "2020-12-25", range_select: true })
8. Determine the date format. Defaults to ‘YYYY-MM-DD’.
const myCalendar = new TavoCalendar('#my-calendar', { format: "MM-DD-YYYY" })
9. Create a multi-language calendar. Requires moment-with-locales.min.js
as noticed above.
const myCalendar = new TavoCalendar('#my-calendar', { locale: "de" })
10. Enable/disable interactions.
const myCalendar = new TavoCalendar('#my-calendar', { multi_select: false, future_select: true, past_select: false, frozen: false })
11. Specify an array of dates to highlight or ignore.
const myCalendar = new TavoCalendar('#my-calendar', { highlight: [/*2012-12-23*/], blacklist: [/*2012-12-24*/] })
12. Determine whether or not to highlight Sunday and/or Saturday. Default: true.
const myCalendar = new TavoCalendar('#my-calendar', { highligh_sunday: false, highlight_saturday: false })
13. API methods.
// get selected date(s) myCalendar.getSelected(); // get start date myCalendar.getStartDate(); // get end date myCalendar.getEndDate(); // get date range // { start: '2012-12-10', end: '2012-12-15'} myCalendar.getRange(); // get focus year myCalendar.getFocusYear(); // get focus month myCalendar.getFocusMonth(); // get focus date myCalendar.getFocusDay(); // get config object myCalendar.getConfig(); // get current state myCalendar.getState(); // set both config and sync myCalendar.sync(obj);
14. Event handlers.
myCalendar.addEventListener('calendar-range', (ev) => { const range = myCalendar.getRange(); console.log('Start', range.start) console.log('End', range.end) }); myCalendar.addEventListener('calendar-change', (ev) => { const m = myCalendar.getFocusMonth(); alert(`Month change to ${m}`); }) myCalendar.addEventListener('calendar-select', (ev) => { alert(myCalendar.getSelected()); }) myCalendar.addEventListener('calendar-reset', (ev) => { alert('reset'); })
Changelog:
v0.1.0 (05/23/2021)
- Fix offset
12/16/2020
- Add setters
Hello! Thanks for the pretty and versatile calendar. It’s exactly what I was looking for.
However, I must point out 1 issue: it seems that every locale whose week doesn’t start with Sunday (for instante ‘es’, which starts with Monday), the last week of the month always shows a displacement towards the right. I believe it’s because of the week generation, where by default Sunday comes first. Is there any way to adjust it?
This issue has been fixed in the last update (23/05/2021). Thanks!