react-tasks-calendar

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