Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Support for:
If given interface and controls is not enough for you, you can use callbacks to access internal state and expand functionality to your ui.
TODO:
If you have any suggestion, feel free to open discussion or contact me directly at hello@nibdo.com
npm i calend
import Calend, { CalendarView } from 'calend' // import component
import 'calend/dist/styles/index.css'; // import styles
<Calend
onEventClick={onEventClick}
onNewEventClick={onNewEventClick}
events={[]}
initialDate={new Date().toISOString()}
hourHeight={60}
initialView={CalendarView.WEEK}
disabledViews={[CalendarView.DAY]}
onSelectView={onSelectView}
selectedView={selectedView}
onPageChange={onPageChange}
/>
prop | type | default | required | desc |
---|---|---|---|---|
initialDate | string | false | starting date for calendar | |
initialView | CalendarView - day, three days, week, month | CALENDAR_VIEW.WEEK | true | starts in calendar view |
selectedView | CalendarView | false | selected view for control outside of the component | |
disabledViews | CalendarView[] | false | disable views you don't need | |
hourHeight | number | 40 | false | height for one hour column in px |
events | CalendarEvent[] | [] | true | events for calendar |
onNewEventClick | callback func | false | callback for clicking on calendar table to create new event | |
onEventClick | callback func | false | callback for clicking on event | |
onSelectView | callback func | false | callback for view change event | |
onPageChange | callback func | false | callback for navigating through calendar pages | |
showMoreMonth | callback func | false | callback for accessing events which didn't fit in month view | |
disableMobileDropdown | boolean | false | disable button for triggering mobile dropdown with views | |
timezone | string | false | IANA timezone format, if not provided, system timezone will be used |
Before passing events to calendar, adjust data to this format: Date key has to be in dd-MM-yyyy format
const events = {
'01-11-2021': [
{
id: 1,
startAt: '2021-11-21T18:00:00.000Z',
endAt: '2021-11-21T19:00:00.000Z',
timezoneStartAt: 'Europe/Berlin', // optional
summary: 'test',
color: 'blue',
}
],
'21-11-2021': [
{
id: 2,
startAt: '2021-11-21T18:00:00.000Z',
endAt: '2021-11-21T19:00:00.000Z',
timezoneStartAt: 'Europe/Berlin', // optional
summary: 'test',
color: 'blue',
}
]
}
Group events array under day when they occur and pass starting and ending date in ISO string format in UTC timezone.
According to your needs, you can set timezone for each event and also set default timezone with "timezone" prop in IANA format. If you don't provide timezone prop, your system default timezone will be used.
You can keep other event properties, those will be ignored.
Create functions and handle data from callback in your application
If you want access to type of callback data, you can import them like this
import Calend, {
OnEventClickData,
OnNewEventClickData,
ShowMoreMonthData,
OnPageChangeData,
OnSelectViewData
} from 'calend';
Passing data for creating new event
type OnNewEventClickData {
event: CalendarEvent;
day: Date;
hour: number;
}
const onNewEventClick = (data: OnNewEventClickData) => {
// do something
};
Passing data after clicking on existing event
type OnEventClickData {
startAt: string;
endAt: string;
timezoneStartAt?: string;
timezoneEndAt?: string;
summary: string;
color: string;
[key: string]: any;
}
const onEventClick = (data: OnEventClickData) => {
// do something
};
Access current selected view if you want to handle state in your app
const handleSelectView = (view: OnSelectViewData) => {
// do something
}
Callback to handle actions after page change (going back and forth)
const onPageChange = (data: OnPageChangeData) => {
// do something
}
Callback returns array of CalendarEvent which did not fit inside day column in month view
const showMoreMonth = (data: ShowMoreMonthData) => {
// do something
}
Storybook is used for visualization while improving Calend. It can be used by running npm run storybook
from the root of the project. Not all controls are fully supported so far.
FAQs
Support for:
We found that calend-dev 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.