Modern Calendar

This is a wrapper around react-modern-calendar-datepicker that also utilizes chrono, a natural language date parser for comfort.

That doesn’t mean the component will answer if you try to talk to it, but you’re welcome to do so if that helps you with self-isolation. Yet, at least it will understand what you mean, when you type Friday or Next Friday into one of the property control fields. It won’t understand _Friday After Next_, though, I tried.

The style can be customized to a certain extent. The component is usable as a standalone calendar or a dropdown triggered by a picker.

Props

/* Code only
You can use the `onValueChange` prop to pass a function. When the Calendar is used, the function will receive one argument in one of the following formats – depending on the chosen calendar type
single:   {day, month, year}
multi:    [{day, month, year}, …]
range:    {from: {day, month, year}, to: {day, month, year}}
*/

onValueChange: () => {},

// ---- Prefs ----
control: 'calendar',            // ['calendar' | 'picker']
type: 'single',                    // ['single' | 'multi' | 'range']
locale: 'en',                    // ['en' | 'fa']

startWeek: 6,                    // [6 | 0]

/* Dates
All these dates are strings and can have any format that is understood by chrono, e.g. '2020-04-01' or 'next friday
*/
minimumDate: `one week ago`,     // first selectable date
maximumDate: `in 1 year`,        // last selectable date

selectedDay: '',                // selected day in 'single' mode
selectedDays: [],                // array of selected days in 'multi' mode
selectedDayFrom: '',            // first selected day in 'range' mode
selectedDayTo: '',                // last selected day in 'range' mode

disabledDays: [],                // array of days that are not selectable

// ---- Style ----
weekdayLetters: 'M',            // ['M' | 'Mo' | 'MO']
backgroundColor: '#ffffff',
textColor: '#000000',

shouldHighlightWeekends: false,
weekendColor: '#ff2929',

selectionFill: true,            // true --> filled, false --> outline
selectionColor: 'rgba(0,128,255,1)',
rangeColor: 'rgba(0,128,255,.1)',
selectionTextColorMode: true,    // true --> automatic, false --> custom
selectionTextColor: 'rgba(255,255,255,1)',
selectedRadius: 2,                // in em

fontFamily: 'system-ui, sans-serif',
fontSize: 10,                    // in px

radius: 8,
radiusIsMixed: false,

padding: 0,
paddingIsMixed: false,

boxShadow: '0 1em 4em',        // presets or 'custom'
shadowColor: 'rgba(0, 0, 0, 0.07)', // only used for presets
boxShadowCustom: '0 1em 4em rgba(0, 0, 0, 0.07)',

To Dos

• Test Overridability
• Make Picker usable
• Avoid timeouts when editing colors
• Maker Picker customizable
• Complete customization options

Changelog

Version	Description
1.9.0	Bugfix
1.8.0	More performance improvements (this time for real, I hope)
1.7.0	Performance optimization (test)
1.6.0	More customization options, thumbnail, update docs
1.5.0	Usable Picker component, more customization options, clustered property controls, minor fixes/improvements
1.4.0	Improve color calculation, add bugs
1.3.0	Extend customizability
1.2.0	Fix description, icon
1.1.0	Improve color behavior, remove logging
1.0.0	Initial release