Crew Calendar

If you work with calendar that you can check your scheduled programs, tasks and events, this one is specifically for crews. in CrewCalendar package we give you this space to events that they should see and know in time.

Table of Contents

• Demo
• Install
• Usage
• Props
• License

Demo

Installation

$ npm install oms-ui-crew-calendar
$ yarn add oms-ui-crew-calendar

Usage

For use CrewCalendar component in your project

• You need to give a date props an object that contains from, to and chartTimezone properties. This prop is making header for your calendar that is columns from date you set it in from property until date that you set on to property (in gregorian and shamsi date)
• In next step you need to pass the list of the crews that is get any type of array for now.

<Calendar
  date={{
    from: moment().valueOf(),
    to: moment().add(14, "days").valueOf(),
    chartTimezone: "Asia/Tehran",
  }}
  list={[1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9]}
  theme={{
    sizes: {
      dayWidth: 165,
      dayHeight: 45,
      itemWidth: 165,
      itemHeight: 130,
    },
  }}
  disabledScroll={false}
  loading={false}
  lazyLoadingComponent={() => <></>}
  renderItem={(item) => <>{item}</>}
  onListScrollEnd={() => {}}
/>

Props

date: IDate;

This property as you earlier get a object that contains from, to and chartTimezone properties. from is for start day of your calendar and to is end day and with chartTimezone you can set your timezone.

list: I[];

It's list of items that you want to use it in sidebar item and all cell in calendar

theme: Partial<ITheme>;

For changing some style in calendar we should use theme prop that get two objects of colors and sizes

loading: boolean;

It's boolean prop for set loading of calendar

lazyLoadingComponent: React.ReactNode;

By default the loading of calendar is 'loading...', but you can customize it with this prop

ScrollContainerProps?: IScrollContainerProps;

Optional prop for change or control react-indiana-drag-scroll package's container component For ease of use package, we get ignoreElements prop of general ScrollContainerProps (in react-indiana-drag-scroll) as array

disabledScroll: boolean;

There some common situations that you want to freeze calendar's scroll, thus you can set disabledScroll prop true

renderDay: (date: number, dateTimeZone: string) => React.ReactNode;

You can use your customized component for each day in header of calendar which is give two parameter of date and dateTimeZone

renderRow?: (params: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, item: I) => JSX.Element;

With renderRow you can customize entire each row in calendar

renderItemsRow?: (item: I, daysBetween: number[]) => JSX.Element;

This props change the entire row except of item
For example if you set renderItemsRow to component with "lorem" phrase, you see items with rows as tall as days and rows that filled with lorem component

renderNoRows?: React.ReactNode;

When the list is empty and loading is set false, you can see no rows phrase and you can customize it with renderNoRows

renderItem: (item: C) => React.ReactNode;

renderCell: (date: number, item: C) => React.ReactNode;

renderStickyBox: () => React.ReactNode;

onListScrollEnd: () => void;

Basic

ICrewCalendarTheme is a type of calendar component's theme

interface ITheme {
  colors?: IThemeColors;
  sizes?: IThemeSizes;
}

Contribute

If you have a feature request, please add it as an issue or make a pull request.

v0.5.4

• Add disabledScroll prop for prevent of scroll calendar

v0.5.6

• Fix disabledScroll (not working) bug

v1.2.4

• Add ScrollContainerProps in props for control react-indiana-drag-scroll package container component
• Improve package's performance
• Fix some bugs

v1.2.5

• Update ScrollContainerProps prop's type

v1.2.6

• Delete global style of span tag from styles file

License

Copyright (c) 2023 Airtour