About ARS Calendar
Interactive calendar component for date selection and event management. Fully customizable with CSS styling and localization support.
🎯 Basic Calendar
To add events set the event and color, then cick the date in the calendar.
Event Preview: Enter event details above
🌍 Localized Calendar (Portuguese)
Localization Features:
Days: Dom, Seg, Ter, Qua, Qui, Sex, Sab
Months: Janeiro, Fevereiro, Março, etc.
🎨 CSS Customization
Customization Features:
CSS Variables: Theme using CSS custom properties
Custom CSS: Add your own styles
Custom Template: Completely override HTML structure
Current CSS Variables:
⚡ Interactive Features
Calendar Controls:
📡 Event Monitoring
All calendar interactions are logged below.
Event Log:
📖 Usage Instructions
HTML Usage:
<ars-calendar id="myCalendar"></ars-calendar>
Event Handling:
Event: ars-calendar:daySelected
Detail: { day: number, month: number, year: number }
Localization Attributes:
localized_abbreviated_days: JSON array of abbreviated day names
localized_months: JSON array of month names
Methods:
addEvent(eventData): Add event to selected date
Event Data: { text: string, color: string, day: number, month: number, year: number }
📅 Attribute-based Localization (ars-calendar)
Demo: The calendar below is localized using <localized-mixin> and the data-localize-map convention.
Use the language selector below to see the calendar update its day and month names!
Language Selector:
Current Language: English
How it works:
- The
<ars-calendar>component declares which attributes it wants localized and which translation keys to use viadata-localize-map. - The
<localized-mixin>detects this and sets the appropriate attributes based on the current language. - This pattern is generic and works for any component that follows the convention.
<ars-calendar
data-localize-map='{"localized_abbreviated_days":["days.sun","days.mon","days.tue","days.wed","days.thu","days.fri","days.sat"],
"localized_months":["months.jan","months.feb","months.mar","months.apr","months.may","months.jun","months.jul","months.aug","months.sep","months.oct","months.nov","months.dec"],
"localized_today":"today"}'></ars-calendar>
</localized-mixin>