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.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.