mv-calendar
MvCalendar is a Meveo calendar component (based on lit-element) that renders a datepicker component that can display a simple calendar, a calendar with date range, or a datepicker popup in an input field.
Features
- Renders the calendar using a single component tag
- Renders a simple calendar
- Renders a calendar with date range
- Renders a datepicker popup in an input field
- Written in vanilla javascript
Quick Start
To experiment with the MvCalendar component.
-
Clone this repo.
-
Serve the project from the root directory with some http server (best served with meveo itself)
Sample usage
The mv-calendar has 3 type variants:
default, dropdown, and range
The default calendar will display a simple calendar on the page.
<mv-calendar
name="singleCalendar" // name that is returned in select-date event details
placeholder="Single Calendar" // the placeholder text when input is empty
inline-input // displays an inline input at the top of the calendar
monday-first // changes the first column to Monday instead of Sunday
allow-partial // allows entering and selecting partial dates(year only, year and month only)
min-year="2010" // minimum year allowed in the year input
max-year="2030" // maximum year allowed in the year input
pattern="MM/DD/YYYY" // the date pattern used for masking and formatting the date
pattern-matcher="MDY" // specify which characters in the pattern are editable
pattern-regex="\\d" // specify regex used for characters allowed in the pattern
?has-error="${this.hasError}" // optional - boolean to indicate if the input date has an error
.theme="${theme}" // theme used in displaying the calendar (light or dark)
.selected="${this.selectedDate}" // the Date object that specifies the value of the calendar
@select-date="${this.changeDate}" // custom event dispatched when a date is selected/entered
></mv-calendar>The dropdown calendar will display an input field which pops out a calendar dropdown when focused.
<mv-calendar
name="singleCalendar" // name that is returned in select-date event details
dropdown // specifies that this is a dropdown calendar
placeholder="Dropdown Calendar" // the placeholder text when input is empty
monday-first // changes the first column to Monday instead of Sunday
allow-partial // allows entering and selecting partial dates(year only, year and month only)
min-year="2010" // minimum year allowed in the year input
max-year="2030" // maximum year allowed in the year input
pattern="MM/DD/YYYY" // the date pattern used for masking and formatting the date
pattern-matcher="MDY" // specify which characters in the pattern are editable
pattern-regex="\\d" // specify regex used for characters allowed in the pattern
?has-error="${this.hasError}" // optional - boolean to indicate if the input date has an error
.theme="${theme}" // theme used in displaying the calendar (light or dark)
.selected="${this.selectedDate}" // the Date object that specifies the value of the calendar
@select-date="${this.changeDate}" // custom event dispatched when a date is selected/entered
></mv-calendar>The range calendar will display a component with two calendars that allow the user to choose a start and end date range.
<mv-calendar
name="rangeCalendar" // name that is returned in select-date event details
range-calendar // specifies that this is a range calendar
inline-input // displays an inline input at the top of the calendar
.start="${this.start}" // contains the start values and properties
.end="${this.end}" // contains the end values and properties
monday-first // changes the first column to Monday instead of Sunday
allow-partial // allows entering and selecting partial dates(year only, year and month only)
pattern="MM/DD/YYYY" // the date pattern used for masking and formatting the date
pattern-matcher="MDY" // specify which characters in the pattern are editable
pattern-regex="\\d" // specify regex used for characters allowed in the pattern
.theme="${theme}" // theme used in displaying the calendar (light or dark)
@select-date="${this.changeDate}" // custom event dispatched when a date is selected/entered
></mv-calendar>Input values
The selected attribute's value should have the following details:
{
date, // optional - the javascript Date object if a full date is selected
year, // the full year value
month, // the month value (0-11)
day // the day value (0-31)
}The for range calendars, the start and end attributes' values should have the following details:
{
selected: {
date, // optional - the javascript Date object if a full date is selected
year, // the full year value
month, // the month value (0-11)
day // the day value (0-31)
},
placeholder, // the placeholder text when input is empty
hasError, // optional - boolean to indicate if the input date has an error
minYear, // minimum year allowed in the year input
maxYear, // maximum year allowed in the year input
}Return values
For single calendars, the select-date custom event's detail has the following values:
const {
detail: {
name, // the value of the name attribute declared in the component
selected: {
date, // the javascript Date object if a full date is selected
year, // the full year value
month, // the month value (0-11)
day // the day value (0-31)
},
}
} = event;For range calendars, the select-date custom event's detail has the following values:
const {
detail: {
name, // the value of the name attribute declared in the component
selected: {
start: {
date, // the javascript Date object if a full date is selected
year, // the full year value
month, // the month value (0-11)
day // the day value (0-31)
},
end: {
date, // the javascript Date object if a full date is selected
year, // the full year value
month, // the month value (0-11)
day // the day value (0-31)
},
}
}
} = event;You can also check this demo
Acknowledgements
- MvCalendar uses moment.js for formatting.