Localization, local json, fixes, lint cleanup

[richardtallent]

Apologies for the massive change set all in one go. I started making a few tweaks so I could use this widget in a personal project I'm building, and the changes kinda got away from me. My primary goals were localization, allowing loading from a local JSON object, fixing some small bugs, moving to em units, and fixing various ESLint rules (I started with all ES5 rules and turned off the ones that didn't seem to add value, the config file is included in this pull). Performance was also a consideration, but I didn't micro-optimize. I made some changes simply for personal taste and legibility, particularly in the CSS, but I hope the changes add value for the most part rather than simply reflecting my personal preferences.

CSS

• Switched from px to em for all sizing other than borders.
• Fonts are defaulted to 1em--easy to override at the page or calendar level.
• Normalized whitespace after ":" in CSS
• Icon characters in CSS are now escaped Unicode
• Increased size of month-prev, month-next arrows
• Start/end time delimiter is now an en dash
• Increased event view scroll bar size
• Added CSS-based localization of various labels (Today, Month, and No Events). Defaults to English, a French version is also provided in the CSS.
• Switched media query to be based on em's, not pixels. This allows titles to show up on an iPhone, and results in better responsive layout when the display is zoomed.
• Added left-hand box shadow to event indicators that continue from the previous day. This overlaps the border between days, making the bar look more continuous. This required an additional SPAN inside the indicator to allow the box shadow and event text to be different colors.

JavaScript

• Fixed where the Today button would still be visible when switching to another month and back again.
• Removed unused "that" variable.
• Added new option "events" to allow for loading events from a local JSON/XML string rather than a remote URL.
• Added option "linkCalendarToEventUrl" to allow event indicators to be linked directly to their URL.
• Added "locale" option, defaulted to the detected user's locale.
• Added automatic localization of month and weekday names based on locale setting.
• Added "monthNames" and "dayNames" options to override said automatic localization.
• Added "monthNameFormat" and "weekdayNameFormat" options to control header formats, defaults to "short".
• Locale, both full and the first two characters, are converted into classes that are added to the main calendar element. This allows CSS-based localization for various UI labels.
• Added support for options.weekStart to "Mon", "1", or 1 for Monday. All other values result in a start on Sunday, removed error for unknown values.
• Decomposed massive setMonthly function a bit.
• Fixed bug in picker detection of days in the past -- it would mark days as past for days in the current month of a future year.
• Moved Today, Monthly, and No Events labels to be CSS-driven to ease localization.
• Added support for {month} and {year} substitution in XML/JSON URLs to assist in loading from dynamic sources.
• Added strict directive
• Minimized code duplication, cutting file size
• Added ESLint configuration
• Made adjustments to meet many common ESLint rules
• daysInMonth was unnecessarily terse and relied on &&/|| order of precedence, added some parens for legibility
• Picker mode uses locale for formatting, or optional ISO 8601 format (yyyy-mm-dd), only falls back to m/d/yyyy as a last resort.
• Safer escaping of attributes with potential text values
• Allow stylePast on event view as well

HTML

• Added CSS override to demo index.html to restore smaller default font size
• Added new event-tests.html to test various dates and ranges

[Jius]

Hi Richard,

I hope this pull will be accepted soon :)

I detect a smal bug css:
-When you call $('#mycalendar').monthly(); alone (without datas)
-> The numbers shift
WITHOUT DATAS

WITH DATAS

Is that normal ?

[richardtallent]

Oh my. Good catch! I think I know what the problem is. I'll see if I can look at it tonight and make the correction. Just in case, which browser are you using? I do my development on a Mac and work mostly in Chrome.

[kthornbloom]

@richardtallent Thank you for this! I appreciate anyone's help in reviewing this update. I don't have much spare time and I'll admit I'm self-taught in regard to javascript :) I'd like to merge this in once it's tested.

[richardtallent]

@Jius, I found the issue -- there was no default value for the "mode" option. I've modified it to default to "event" mode.

@kthornbloom, I've tested on Chrome on OS X and Windows, IE11, Safari 9.1.3, iOS Safari, and the Silk browser on my Kindle Fire tablet. I don't have Firefox and don't have access to earlier versions of IE or Android phones, so I can't do any other testing. I patched additional issues I found in testing:

• Adjusted media query so iPhone portrait mode shows event titles, not dots
• Fixed touch event on iPhone for days in event mode
• Hid titles in dot mode (my spans broke that)

[kthornbloom]

Finally had time to dig into this. I tested multiple environments using Browserstack, and aside from some minor alignment issues in IE (which were present before these changes), it looks good! Thanks again for contributing to Monthly!

[kthornbloom]

So for the localization, you're just adding a class of monthly-locale-frto the monthly div to switch to french, correct? Anything else you think should be updated in the docs relevant to your edits?

[richardtallent]

Great! Glad to be able to play a little part.

Yes, the locale option (defaulting to the user locale if not provided) results in a class monthly-locale-XX being added to the monthly div. This then applies locale-specific CSS rules (using content) to localize the phrases that aren't date parts (which are localized by JavaScript).

So, the developer wouldn't need to set that class themselves, all they need to do is rely on the default locale (or an override locale option of their choosing) to set it.

To fully support some language other than English or French, they would need to add three CSS rules:

.monthly-locale-XX .monthly-reset:after
.monthly-locale-XX .monthly-cal:after
.monthly-locale-XX .monthly-list-item:after

If they don't, the user will get English for those three phrases, but the calendar will still properly localize the weekday and month names. I would have added a few more languages, but other than Spanish, I would be trusting Google Translate. Adding a language adds very few bytes, so hopefully some other users who speak other popular languages can issue PRs and flesh out the native support.

Other changes that may need docs:
-- The new events option for loading events from a variable rather than a URL.
-- The linkCalendarToEventUrl option.
-- the monthNames, dayNames, monthNameFormat, and weekdayNameFormat options.
-- The ability to use 0 or 1 for weekStart rather than "Sun" or "Mon".
-- The ability to put {month} and {year} in your URLs so your remote server can serve only the events needed for the current view.

[hadjloo]

How can I use Persian / Jalali Calendar? the localization file, only changes the labels and text, I want to change the calendar itself, is it possible? do you have it in your roadmap?