ak-calendar
Advanced tools
The ak-calendar component is a generic calendar that can be used standalone or together with a form field to make a datepicker.
Interact with a live demo of the ak-calendar component with code examples.
npm install ak-calendar
The ak-calendar package exports the a web component.
Import the component in your JS resource:
import 'ak-calendar';
Now you can use the defined tag in your HTML markup:
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<!-- ... -->
<ak-calendar></ak-calendar>
</body>
</html>
You can also use it from within another JavaScript resource:
import Calendar from 'ak-calendar';
const component = new Calendar();
document.body.appendChild(component);
This is a standard web component, if you want to use it in your React app, use the Skate.js React integration.
import Calendar from 'ak-calendar';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(Calendar, {});
ReactDOM.render(<ReactComponent />, container);
When using it as a react component, you should set the camelCased version of the HTML attribute:
HTML:
<ak-calendar some-prop="something" />
React JSX:
<ReactComponent someProp="something" />
As with all web components, the calendar is given safe defaults and no parameters are required.
Any prop that takes multiple dates will expect the dates in yyyy-mm-dd without leading zeroes. Any prop that takes more than one date can be specified as an attribute as an array.
disabledApplies the disabled styles to the specified dates.
Default: [].
This doesn't not prevent the select event from being emitted.
<ak-calendar disabled="['1906-4-18', '1908-10-17']" />
focusedA single number that tells the calendar which day is focused. If a screen reader is turned on, this will announce the date that is currently focused. It also applies the correct styles to indicate visually to the user which day is selected. If no focus should be applied, this should be 0.
Default: 0
<ak-calendar focused="29" />
monthTells the calendar which month to display. The number is specified as the month number, not index. This is divergent to the JavaScript Date()` constructor which has 0-indexed months, but standard 1-indexed for the rest. This is to make the entire API consistent and intuitive.
Default: current month.
<!-- December -->
<ak-calendar month="12" />
previouslySelectedTells the calendar which dates were last selected. This visually indicates to the user which dates were selected, but doesn't offer any additional behaviour.
Default: [].
<ak-calendar previously-selected="['1906-4-18', '1908-10-17']" />
selectedThe dates that should be selected.
Default: [].
<ak-calendar selected="['1906-4-18', '1908-10-17']" />
yearTells the calendar which month to display.
Default: current year.
<!-- Displays the current month in 1984 -->
<ak-calendar year="1984" />
Let us know what you think of our components and docs, your feedback is really important for us.
Ask a question in our forum.
Check if someone has already asked the same question before.
Are you in trouble? Let us know!
FAQs
A React component that is a generic calendar
The npm package ak-calendar receives a total of 6 weekly downloads. As such, ak-calendar popularity was classified as not popular.
We found that ak-calendar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now lets you customize pull request alert headers, helping security teams share clear guidance right in PRs to speed reviews and reduce back-and-forth.
Product
Socket's Rust support is moving to Beta: all users can scan Cargo projects and generate SBOMs, including Cargo.toml-only crates, with Rust-aware supply chain checks.
Product
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.