react-tasks-calendar

Calendar and tasks components for React

Getting started 🚀

If you are using yarn:

yarn add react-tasks-calendar styled-components

Or if you are using npm:

npm i react-tasks-calendar styled-components

Usage

Calendar component:

import Calendar from 'react-tasks-calendar';

function CalendarComponent() {
  function handleSelection(date) {
    alert(date);
  }

  return (
    <Calendar.Container onSelectionChanged={handleSelection}>
      <Calendar.Header text="Current period" />
      <Calendar.ColumnsContainer>
        <Calendar.Column weekDay="1" />
        <Calendar.Column weekDay="2" />
        <Calendar.Column weekDay="3" />
        <Calendar.Column weekDay="4" />
        <Calendar.Column weekDay="5" />
      </Calendar.ColumnsContainer>
      <Calendar.ItemsContainer
        startDate={new Date('2023-09-23')}
        endDate={new Date('2023-10-27')}
        fillEmptySlots={true}
      />
    </Calendar.Container>
  );
}

The code above will result in someting like:

Tasks list

import Task, { TasksContainer } from 'react-tasks-calendar';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faCircleInfo,
  faSquareArrowUpRight,
  faPenSquare
} from '@fortawesome/free-solid-svg-icons';

function TasksList() {
  return (
    <TasksContainer>
      <Task.Container
        icon={() => (
          <FontAwesomeIcon
            icon={faCircleInfo}
            color="#ffffff"
            style={{ fontSize: '2.5rem' }}
          />
        )}
      >
        <Task.Content>
          <Task.Title>Task header</Task.Title>
          <Task.Message>Task content</Task.Message>
        </Task.Content>
        <Task.Actions>
          <Task.Action
            icon={() => (
              <FontAwesomeIcon
                icon={faPenSquare}
                color="#ffffff"
                style={{ fontSize: '2rem' }}
              />
            )}
            title="edit"
            onClick={() => alert('edit task')}
          />
          <Task.Action
            icon={() => (
              <FontAwesomeIcon
                icon={faSquareArrowUpRight}
                color="#ffffff"
                style={{ fontSize: '2rem' }}
              />
            )}
            title="Open"
            onClick={() => alert('open task')}
          />
        </Task.Actions>
      </Task.Container>
      <Task.Container>
        <Task.Content>
          <Task.Title>Task header</Task.Title>
          <Task.Message>Task content</Task.Message>
        </Task.Content>
        <Task.Actions>
          <Task.Action
            icon={() => (
              <FontAwesomeIcon
                icon={faSquareArrowUpRight}
                color="#ffffff"
                style={{ fontSize: '2rem' }}
              />
            )}
            title="Open"
            onClick={() => alert('open task')}
          />
        </Task.Actions>
      </Task.Container>
    </TasksContainer>
  );
}

The code above will result in someting like:

Calendar API

Calendar.Container

| Parameter | Type | Description | | ---------------------------------- | ------------------------------------ | ------------------------------------------------------------- | | children | ReactNode | A node of components to be rendered inside the calendar | | initialSelectedDate (optional) | Date | The initial date to be selected on the calendar | | onSelectionChanged (optional) | (selectedDate: Date | null) => void | A callback to be called every time the selected date changes |

Calendar.Header

| Parameter | Type | Description | | ------------------- | ----------- | ------------------------------------------------------------- | | text | string | A string to be rendered on the header |

Calendar.ColumnsContainer

| Parameter | Type | Description | | ------------------- | ----------- | ------------------------------------------------------------- | | children | ReactNode | A ReactNode composed of Calendar.Column |

Calendar.Column

| Parameter | Type | Description | | ------------------------- | -------------------------------------------------------- | ------------------------------------------------------------- | | weekDay | CalendarLabelsIndex | The index of the week day the column corresponds | | renderText (optional) | (weekDay: CalendarLabelsIndex) => string | ReactElement | A function that renders the label of a column |

type CalendarLabelsIndex = '0' | '1' | '2' | '3' | '4' | '5' | '6';

Calendar.ItemsContainer

| Parameter | Type | Description | | ----------------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------ | | startDate | Date | The start of the range of dates to be displayed | | endDate | Date | The end of the range of dates to be displayed | | fillEmptySlots (optional) | boolean | Defines if the calendar will render dates outside of the defined | | renderItem (optional) | (itemData: CalendarItemProps, key: number | string) => ReactElement | A function responsible for rendering the items within the calendar |

Calendar.Item

| Parameter | Type | Description | | ------------------- | ------------------------------------------------------ | ------------------------------------------------------------------ | | itemDate | Date | The date of the item | | disabled | boolean | Defines if the user can interact with the item | | status | 'normal' | 'pending' | 'alert' | 'done' | 'hidden' | The status of the item. This change the style according the status | | renderText | (date: Date) => string | ReactElement | A function responsible for rendering the item text |

Tasks API

TasksContainer

| Parameter | Type | Description | | ------------------- | ----------- | ------------------------------------------------------------- | | children | ReactNode | The tasks to be rendered on the list |

Task.Container

| Parameter | Type | Description | | ------------------- | ----------- | ------------------------------------------------------------- | | children | ReactNode | A node of components to be rendered inside the task component | | icon (optional) | ElementType | A icon element to be rendered on the left corner of the task |

Task.Content

| Parameter | Type | Description | | ------------------- | ----------- | ------------------------------------------------------------- | | children | ReactNode | A node of components to be rendered as the task content |

Task.Title

| Parameter | Type | Description | | ------------------- | ----------- | ------------------------------------------------------------- | | children | ReactNode | The content to be rendered inside the title of the task |

Task.Message

| Parameter | Type | Description | | ------------------- | ----------- | ------------------------------------------------------------- | | children | ReactNode | The content to be rendered inside the message of the task |

Task.Actions

| Parameter | Type | Description | | ------------------- | ----------- | ------------------------------------------------------------- | | children | ReactNode | The actions of the task |

Task.Action

This component also inherits from ButtonHTMLAttributes<HTMLButtonElement>

| Parameter | Type | Description | | ------------------- | ----------- | ------------------------------------------------------------- | | icon | ElementType | A icon to bee rendered inside the action button |