Feat: add calendar component

[robarbms]

Pull Request

📖 Description

This adds a basic calendar component. This will be used for a date picker component.

🎫 Issues

👩‍💻 Reviewer Notes

Localization is particularly difficult because of all the market, calendar and numbering permutations. I have localization mostly baked in. I wasn't able to find an exact list of what calendar and numbering types each market uses. I haven't tested localization defaults outside of the en-US market.

📑 Test Plan

Need to figure out how to test other markets, calendar types and numbering systems.

✅ Checklist

General

• I have included a change request file using $ yarn change
• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have modified an existing component
• I have updated the definition file
• I have updated the configuration file

⏭ Next Steps

Find a solution for calendars that don't align with the Gregorian calendar system.

[EisenbergEffect]

@robarbms Would you mind dropping a few screenshots in? I probably won't get a chance to pull down the code and run it, but I'd love to see how this is looking.

[chrisdholt]

I'm having an issue running this in Safari and Firefox - can you look into what might be happening there and if we need fallbacks somewhere?

[robarbms]

I'm having an issue running this in Safari and Firefox - can you look into what might be happening there and if we need fallbacks somewhere?

This was an issue on date construction differences. Chrome and IE allow for new Date('10-7-2021'). FireFox doesn't and I had to use a more universal constructor new Date(2021, 10, 7)

[nicholasrice]

Looks great!

[chrisdholt]

I love the flexibility supported here. Thanks for the hard work getting this done!

[radium-v]

This should be a function call

[radium-v]

Suggested change

	return !!dates.find(d => d === date);
	return dates.some(d => d === date);

[radium-v]

This could be turned into an array to improve readability.

Suggested change

	let className: string = "day";
	if (todayString === `${month}-${day}-${year}`) {
	className += " today";
	}
	if (this.month !== month) {
	className += " inactive";
	}
	if (disabled) {
	className += " disabled";
	}
	if (selected) {
	className += " selected";
	}
	const today = todayString === `${month}-${day}-${year}`;
	const inactive = this.month !== month;
	return [
	"day",
	today && "today",
	inactive && "inactive",
	disabled && "disabled",
	selected && "selected",
	]
	.filter(Boolean)
	.join(" ");

[radium-v]

Suggested change

	(this as FASTElement).$emit("dateselected", day);
	this.$emit("dateselected", day);

[radium-v]

It might be safer to specify the radix here. There are possible historical bugs which can show up when omitting the radix with parseInt: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt#octal_interpretations_with_no_radix

Suggested change

	parseInt(dates[2]),
	parseInt(dates[0]) - 1,
	parseInt(dates[1])
	parseInt(dates[2], 10),
	parseInt(dates[0], 10) - 1,
	parseInt(dates[1], 10)

[radium-v]

Suggested change

	const optionsWithTimeZone = Object.assign({}, { timeZone: "utc" }, format);
	const optionsWithTimeZone = { timeZone: "utc", ...format };