@sabasayer/calendar

Basic one day calendar.

Usage

Use calendar-day component for one day.

``html
@item-click="itemClicked"
@item-drop="itemDrop"
@item-resize="itemResize"
@area-select="areaSelect"
header="My Day"
:start-time="startTime"
:end-time="endTime"
:events="events"
:hour-height="hourHeight"
:minute-interval="minuteInterval"
:hour-padding-right="20"
:is-area-selectable="true"
:minutes-render-start-time="minutesRenderStartTime"
/>
`

events:

`typescript
interface CalendarEvent {
id: string | number;
/**
* timeSpan
*/
from: string;
/**
* timeSpan
*/
to: string;
title: string;
/**
* valid css color
*/
color: string;
borderColor?: string;
textColor?: string;
isBordered?: boolean;
borderRadius?: string;
/**
* Effects render with collided items
*/
position: EnumCalendarDayItemPosition;
/**
* Must be bigger then zero
*/
zIndex: number;

isClickable?: boolean;
isDraggable?: boolean;
isResizable?: boolean;

/**
* Data for customization
*/
detail?: T;
}
`

Props

`typescript

hasHeader: boolean;
startTime?: string;
endTime?: string;
hourHeight: number;
isHoursVisible: boolean;
isMinutesVisible: boolean;
Header?: string;
events: CalendarEvent[];
horizontalMarginBetweenItems: number;
minuteInterval: number;
hourPaddingRight: number;
isActionsDisabled: boolean;
isMinutesClickable: boolean;
isAreaSelectable: boolean;
newItemPosition: EnumCalendarDayItemPosition;
minutesRenderStartTime?: string;
`

Slots

Project setup

`
yarn install
`

$3

`
yarn serve
`

$3

`
yarn build
`

$3

`
yarn test:unit
``