New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Localization, local json, fixes, lint cleanup #41

Merged
merged 4 commits into from Jan 16, 2017

Conversation

Projects
None yet
4 participants
@richardtallent
Contributor

richardtallent commented Dec 8, 2016

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

This comment has been minimized.

Show comment
Hide comment
@Jius

Jius Dec 8, 2016

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
without

WITH DATAS
with

Is that normal ?

Jius commented Dec 8, 2016

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
without

WITH DATAS
with

Is that normal ?

@richardtallent

This comment has been minimized.

Show comment
Hide comment
@richardtallent

richardtallent Dec 8, 2016

Contributor

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.

Contributor

richardtallent commented Dec 8, 2016

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

This comment has been minimized.

Show comment
Hide comment
@kthornbloom

kthornbloom Dec 8, 2016

Owner

@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.

Owner

kthornbloom commented Dec 8, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@richardtallent

richardtallent Dec 9, 2016

Contributor

@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)
Contributor

richardtallent commented Dec 9, 2016

@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 kthornbloom merged commit 1ba73c5 into kthornbloom:master Jan 16, 2017

@kthornbloom

This comment has been minimized.

Show comment
Hide comment
@kthornbloom

kthornbloom Jan 16, 2017

Owner

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!

Owner

kthornbloom commented Jan 16, 2017

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

This comment has been minimized.

Show comment
Hide comment
@kthornbloom

kthornbloom Jan 16, 2017

Owner

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?

Owner

kthornbloom commented Jan 16, 2017

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

This comment has been minimized.

Show comment
Hide comment
@richardtallent

richardtallent Jan 17, 2017

Contributor

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.

Contributor

richardtallent commented Jan 17, 2017

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

This comment has been minimized.

Show comment
Hide comment
@hadjloo

hadjloo Feb 19, 2018

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?

hadjloo commented Feb 19, 2018

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment