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
Moment.js alternatives (date-fns) #816
Comments
@amkoehler I think it's a good idea to allow other alternatives like |
@amkoehler @arecvlohe I tried to implement RBC localizer for date-fns v1.29.0. I've found the next issues:
Therefore probably it's better to wait for date-fns v2. Let's help date-fns community to update locales for v2: https://github.com/date-fns/date-fns/blob/master/outdatedLocales.json |
I would also really like to see support for different packages. I need to use luxon, which is going to be moment's predecessor. Moment.js is taboo here because of optimization.. |
We aren't likely to support a lot of options out of box, but the API is pluggable specifically so folks can use whatever they want @GavinThomas1192 can you give a Luxon localizer a shot and if there are api failings please report back. |
Yes, this will be my priority tomorrow! I’ve spent about a week implementing a super custom react big calendar and would really like to be able to use all of my work. So this is a high priority. My company absolutely won’t allow me to use moment |
Inspired by some conversation in #118, Here's a first swag at a luxon localizer. Hasn't been tested enough for me to call it bulletproof, but it seems to work so far in a quick smoke test. import { set } from 'react-big-calendar/lib/formats'
import { set as setLocalizer } from 'react-big-calendar/lib/localizer'
import dates from 'react-big-calendar/lib/utils/dates'
const dateRangeFormat = ({ start, end }, culture, local) =>
`${local.format(start, 'D', culture)} — ${local.format(end, 'D', culture)}`
const timeRangeFormat = ({ start, end }, culture, local) =>
`${local.format(start, 't', culture)} — ${local.format(end, 't', culture)}`
const timeRangeStartFormat = ({ start }, culture, local) =>
`${local.format(start, 't', culture)} — `
const timeRangeEndFormat = ({ end }, culture, local) => ` — ${local.format(end, 't', culture)}`
const weekRangeFormat = ({ start, end }, culture, local) =>
`${local.format(start, 'MMMM dd', culture)} - ${local.format(
end,
dates.eq(start, end, 'month') ? 'dd' : 'MMMM dd',
culture
)}`
export const formats = {
dateFormat: 'dd',
dayFormat: 'dd EEE',
weekdayFormat: 'ccc',
selectRangeFormat: timeRangeFormat,
eventTimeRangeFormat: timeRangeFormat,
eventTimeRangeStartFormat: timeRangeStartFormat,
eventTimeRangeEndFormat: timeRangeEndFormat,
timeGutterFormat: 't',
monthHeaderFormat: 'MMMM yyyy',
dayHeaderFormat: 'dddd MMM dd',
dayRangeHeaderFormat: weekRangeFormat,
agendaHeaderFormat: dateRangeFormat,
agendaDateFormat: 'EEE MMM dd',
agendaTimeFormat: 't',
agendaTimeRangeFormat: timeRangeFormat,
}
export default function(DateTime, { firstDayOfWeek }) {
const locale = (d, c) => (c ? d.reconfigure(c) : d)
set(formats)
return setLocalizer({
firstOfWeek() {
return firstDayOfWeek
},
parse(value, format, culture) {
return locale(DateTime.fromFormat(value, format), culture).toJSDate()
},
format(value, format, culture) {
return locale(DateTime.fromJSDate(value), culture).toFormat(format)
},
})
} LuxonLocalizer(DateTime, { firstDayOfWeek: 0 }) |
Thank you @ltegman, really hoping this works well. I really would love to be able to display a calendar based on a set time zone, and not the time zone of the client's browser. (ie. issue #118) Could you please provide a bit more detail about how exactly you use this with Right now I am using moment like this:
then on my calendar component:
How exactly would I import the code and attach the Thanks for the help if possible. 🙇 |
@steph4nc Not sure how clean this, but I actually made a work around that works great for me. I am adjusting the date/times in all the events based on the offset from the the timezone in the client's browser.
This can also be applied to the clicking and dragging creation of events, to adjust their times accordingly
|
Can't personally vouch for it but have read about ⏰ Day.js 2KB immutable date library alternative to Moment.js with the same modern API https://github.com/iamkun/dayjs reference: moment/moment#2373 (comment) |
@xxyuk We are planning to migrate to https://github.com/dmtrKovalenko/date-io as interop layer which supports day.js and date-fns. |
@TrySound do you have a timeline on that? |
Not yet. Would you like to help? |
I do have a day week our company donates to open source :) How big of a project is it? |
Are there plans to support Luxon for localization? |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
PR for Luxon localizer is RFR here: #1574 |
@jquense I don't know what your availability is but I would love to see this PR reviewed and released! (just a nudge to help get it over the finish line) |
Do you want to request a feature or report a bug?
Feature
This library supports Moment.js and Globalize.js for localization. I was wondering if you had any plans to add other localization libraries, specifically date-fns. Moment is a very powerful library, but it does not offer the same bundle size optimizations as date-fns. There's a great discussion on the differences here. The main benefits of date-fns over Moment are performance and a more optimized bundle.
If this isn't really on your radar, no worries. I may still make an attempt at a PR if that's the case.
The text was updated successfully, but these errors were encountered: