Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
calendar-set
Advanced tools
Readme
Framework agnostic calendar components (demo)
The components are implemented with Svelte, so they can be used with Svelte component API. The following is a simple example how you can use DateCalendar
component.
import { en, DateCalendar } from 'calendar-set'
// Set the locale object to the component
DateCalendar.setLocale(en)
// Instantiate the calendar component
const calendar = new DateCalendar({
// Pass a DOM element which the component mount to
target: document.querySelector('#calendar'),
// Pass initial data of the component
data: {
selected: new Date()
}
})
// Observe calendar events
calendar.on('select', selected => {
console.log(selected)
})
// Set calendar data
calendar.set({
selected: new Date(2018, 0, 1)
})
// Destroy the component
calendar.destroy()
All components have a static method setLocale
to specify localized string shown in the calendar. You need to call the method before instantiating components. calendar-set
provides built in locales en
and ja
.
If you want to use with Vue.js, you may interested in vue-svelte-adapter.
{
current: {
year: number
month: number
}
selected: Date | Date[] | undefined
isHighlighted: (target: Date, selected: Date | Date[] | undefined) => boolean
getClass: (target: Date) => string
locale: Locale
}
fire('select', selectedDate)
fire('hover', hoveredDate)
Similar to DateCalendar but can be selected range of two dates.
{
current: {
year: number
month: number
}
selected: Date | Date[] | undefined
hovered: Date | undefined
getClass: (target: Date) => string
second: boolean // `true` if it is going to select the second date
locale: Locale
}
fire('select', selectedDate)
: selectedDate
is an array and always sorted with ASC order by date.fire('hover', hoveredDate)
{
currentYear: number
selected: Date | Date[] | undefined
isHighlighted: (target: Date, selected: Date | Date[] | undefined) => boolean
getClass: (target: Date) => string
locale: Locale
}
fire('select', selectedMonth)
fire('hover', hoveredMonth)
Similar to MonthCalendar but can be selected range of two months.
{
currentYear: number
selected: Date | Date[] | undefined
hovered: Date | undefined
getClass: (target: Date) => string
second: boolean // `true` if it is going to select the second month
locale: Locale
}
fire('select', selectedMonth)
: selectedMonth
is an array and always sorted with ASC order by month.fire('hover', hoveredMonth)
There is a default style at calendar-set/dist/calendar-set.css
. If you want to use it, import it by appropriate way of your project setup.
Example of webpack:
// Import calendar default style
import 'calendar-set/dist/calendar-set.css'
// Import calendar component
import { DateCalendar, en } from 'calendar-set'
DateCalendar.setLocale(en)
Example loading from CDN:
<!-- Import calendar default style -->
<link rel="stylesheet" href="https://unpkg.com/calendar-set/dist/calendar-set.css">
<!-- Import calendar script -->
<script src="https://unpkg.com/calendar-set"></script>
MIT
FAQs
Framework agnostic calendar components
The npm package calendar-set receives a total of 43 weekly downloads. As such, calendar-set popularity was classified as not popular.
We found that calendar-set 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.