Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@lion/calendar
Advanced tools
lion-calendar
is a reusable and accessible calendar view.
import { html, css } from '@lion/core';
import './lion-calendar.js';
export default {
title: 'Others/Calendar',
};
const calendarDemoStyle = css`
.demo-calendar {
border: 1px solid #adadad;
box-shadow: 0 0 16px #ccc;
max-width: 500px;
}
`;
export const main = () => {
return html`
<style>
${calendarDemoStyle}
</style>
<lion-calendar class="demo-calendar"></lion-calendar>
`;
};
npm i --save @lion/calendar
import '@lion/calendar/lion-calendar.js';
<lion-calendar></lion-calendar>
The selectedDate
is the date which is currently marked as selected.
You usually select a date by clicking on it with the mouse or hitting Enter on the keyboard.
The selectedDate
might not be within the dates in the current month view.
export const selectedDate = () => html`
<style>
${calendarDemoStyle}
</style>
<lion-calendar class="demo-calendar" .selectedDate=${new Date(1988, 2, 5)}></lion-calendar>
`;
The centralDate
defines which day will be focused when keyboard moves the focus to the current month grid.
By default it is set to today, or the enabled day of the current month view that is closest to today's date.
The next and previous months' buttons work by changing the centralDate
with plus or minus one month.
Changing the centralDate
may mean a different view will be displayed to your users if it is in a different month.
Usually if you change only the day, "nothing" happens as it's already currently in view.
The centralDate
can be different from selectedDate
as you can have today as actively selected but still look at date that is years ago.
When the selectedDate
changes, it will sync its value to the centralDate
.
export const centralDate = () => {
const today = new Date();
const centralDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
return html`
<style>
${calendarDemoStyle}
</style>
<lion-calendar class="demo-calendar" .centralDate="${centralDate}"></lion-calendar>
`;
};
You can control the focus by calling the following methods
focusCentralDate()
focusSelectedDate()
focusDate(dateInstanceToFocus)
Be aware that the central date changes when a new date is focused.
export const controllingFocus = () => {
const today = new Date();
const selectedDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
const centralDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
return html`
<style>
${calendarDemoStyle}
</style>
<lion-calendar
id="js-demo-calendar"
class="demo-calendar"
.selectedDate="${selectedDate}"
.centralDate="${centralDate}"
></lion-calendar>
<p>
Focus
<button @click="${() => document.querySelector('#js-demo-calendar').focusCentralDate()}">
Central date
</button>
<button @click="${() => document.querySelector('#js-demo-calendar').focusSelectedDate()}">
Selected date
</button>
<button @click="${() => document.querySelector('#js-demo-calendar').focusDate(today)}">
Today
</button>
</p>
`;
};
To give a lower limit you can bind a date to the minDate
property.
export const providingLowerLimit = () => {
const minDate = new Date();
return html`
<style>
${calendarDemoStyle}
</style>
<lion-calendar class="demo-calendar" .minDate="${minDate}"></lion-calendar>
`;
};
To give a higher limit you can bind a date to the maxDate
property. In this example, we show how to create an offset of + 2 days.
export const providingHigherLimit = () => {
const today = new Date();
const maxDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2);
return html`
<style>
${calendarDemoStyle}
</style>
<lion-calendar class="demo-calendar" .maxDate="${maxDate}"></lion-calendar>
`;
};
In some cases a specific date or day of the week needs to be disabled, supply those days to the disableDates
property.
export const disabledDates = () => html`
<style>
${calendarDemoStyle}
</style>
<lion-calendar
class="demo-calendar"
.disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
></lion-calendar>
`;
To limit the scope of possible dates further, combine the methods mentioned above.
export const combinedDisabledDates = () => {
const today = new Date();
const maxDate = new Date(today.getFullYear(), today.getMonth() + 2, today.getDate());
return html`
<style>
${calendarDemoStyle}
</style>
<lion-calendar
class="demo-calendar"
.disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
.minDate="${new Date()}"
.maxDate="${maxDate}"
></lion-calendar>
`;
};
FAQs
Standalone calendar
The npm package @lion/calendar receives a total of 435 weekly downloads. As such, @lion/calendar popularity was classified as not popular.
We found that @lion/calendar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.