new Calendar(container, options)index.jsline 84
Create a calendar by DatePicker.createCalendar().
SEES
PARAMETERS
Name Type Description container
HTMLElementstring
Container or selector of the Calendar
options
[ Object ]
Calendar options
PROPERTIES
Name Type Description date
Date = newDate()
Initial date (default: today)
type
'date''month''year' = 'date'
Calendar type. Determine whether to show a date, month, or year.
language
string = 'en'
Language code. English('en') and Korean('ko') are provided as default. To use the other languages, use DatePicker.localeTexts.
showToday
boolean = true
Show today.
showJumpButtons
boolean = false
Show the yearly jump buttons (move to the previous and next year in 'date' Calendar)
usageStatistics
boolean = true
Send a hostname to Google Analytics (default: true)
weekStartDay
string = 'Sun'
Start of the week. 'Sun', 'Mon', ..., 'Sat'(default: 'Sun'(start on Sunday))
EXAMPLES
//ES6 import DatePicker from 'tui-date-picker' // CommonJS const DatePicker = require('tui-date-picker'); // Browser const DatePicker = tui.DatePicker; const calendar = DatePicker.createCalendar('#calendar-wrapper', { language: 'en', showToday: true, showJumpButtons: false, date: new Date(), type: 'date', weekStartDay: 'Mon', }); calendar.on('draw', (event) => { console.log(event.date); console.log(event.type); for (let i = 0, len = event.dateElements.length; i < len; i += 1) { const el = event.dateElements[i]; const date = new Date(getData(el, 'timestamp')); console.log(date); } });
Instance Methods
changeLanguage(language)index.jsline 458
Change language.
SEES
- To set to the other languages, use DatePicker.localeTexts.
PARAMETERS
Name Type Description language
string
Language code. English('en') and Korean('ko') are provided as default.
draw(options)index.jsline 317
Draw the calendar.
PARAMETERS
Name Type Description options
[ Object ]
Draw options
PROPERTIES
Name Type Description date
[ Date ]
Date to set
type
'date''month''year' = 'date'
Calendar type. Determine whether to show a date, month, or year.
EXAMPLES
calendar.draw(); calendar.draw({ date: new Date() }); calendar.draw({ type: 'month' }); calendar.draw({ type: 'month', date: new Date() });
Events
drawindex.jsline 348
Occur after the calendar draws.
SEES
- calendar.on() to bind event handlers.
- calendar.off() to unbind event handlers.
- Refer to CustomEvents from tui-code-snippet for more methods. Calendar mixes in the methods from CustomEvents.
PROPERTIES
Name Type Description date
Date
Calendar date
type
'date''month''year'
Calendar type
dateElements
Array.<HTMLElement>
elements for dates
EXAMPLES
// bind the 'draw' event calendar.on('draw', ({type, date}) => { console.log(`Draw the ${type} calendar and its date is ${date}.`); }); // unbind the 'draw' event calendar.off('draw');