TavoCalendar is a calendar display and selects dates (single or range). Tavo Calendar is a built-in calendar based on Vanilla JavaScrip where users can select a date or view events with the click of a mouse button.
javascript event calendar source code, how to create dynamic event calendar in html, dynamic calendar in javascript with example, add event to calendar javascript
More features:
- Pre-set dates.
- Mark and ignore dates.
- Multiple languages.
- Custom date formats.
- API methods and event handlers.
How to make use of it:
1. Load the required moment.js library within the doc.
<!-- 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 fundamental calendar on the web page.
const myCalendar = new TavoCalendar('#my-calendar', { // settings here })
5. Set the date the calendar should focus on.
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 or to not highlight Sunday and/or Saturday.
const myCalendar = new TavoCalendar('#my-calendar', { highligh_sunday: false, highlight_saturday: false })
13. API strategies.
// 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'); })
Available options:
format
 (optional) — defaults toÂYYYY-MM-DD
locale
 (optional) — display of weekday names, month (defaultsÂen
)date
 (optional) — calendar focus date (defaults to absolute date),date_start
 (optional) — range end date (defaults toÂnull
),date_end
 (optional) — range start date (defaults toÂnull
),selected
 (optional) — mark dates selected (defaults toÂ[]
)highlight
 (optional) — special dates (defaults toÂ[]
)blacklist
 (optional) — disable dates (defaults toÂ[]
)range_select
 (optional) — range select mode (defaults toÂfalse
)multi_select
 (optional) — mltiple date mode (defaults toÂfalse
)future_select
 (optional) — disable selecting days afterÂdate
 (defaults toÂtrue
)past_select
 (optional) — disable selecting days beforeÂdate
 (defaults toÂfalse
)frozen
 (optional) — disable all interactions (defaults toÂfalse
)highligh_sunday
 (optional) — highlight sundays (defaults toÂtrue
)
Selecting
getSelected()
 — returns an array of selected dates (in multiselect mode) or singleaddSelected(date)
 — add date to selectedclearSelected()
 — clear all selected datesgetStartDate()
 — range startsetStartDate(date)
 — set range startgetEndDate()
 — range endsetEndDate(date)
 — set range endgetRange()
 – range object { start: ‘2012-12-10’, end: ‘2012-12-15’}clearRange()
 – clear rangesetRange(date1, date2)
 – set full rangeclear()
 – clear all selections
Moving calendar window
getFocusYear()
 — calendar focus yearsetFocusYear(year)
 — set calendar focus yeargetFocusMonth()
 — calendar focus monthsetFocusMonth(month)
 — set calendar focus monthnextMonth()
 — move to next monthprevMonth()
 — move to prev month
Other
sync(other_calendar)
 — sync two or more calendarsÂcalendarA.sync(calendarB)
Events
calendar-change
 — fired when month changescalendar-range
 — fired on day changecalendar-select
 — fired on day changecalendar-reset
 — fired on range reset
Tiny Event Calendar & Date Picker, TavoCalendar Plugin/Github, js calendar example code, responsive event calendar jquery, how to add events in calendar using javascript
See Demo And Download
Official Website(beinoriusju): Click Here
This superior jQuery/javascript plugin is developed by beinoriusju. For extra advanced usage, please go to the official website.
Be First to Comment