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:
Theme Toggle
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.