Calendar and tasks components for React
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
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:
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:
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 |
Parameter |
Type |
Description |
text |
string |
A string to be rendered on the header |
Parameter |
Type |
Description |
children |
ReactNode |
A ReactNode composed of 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';
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 |
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 |
Parameter |
Type |
Description |
children |
ReactNode |
The tasks to be rendered on the list |
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 |
Parameter |
Type |
Description |
children |
ReactNode |
A node of components to be rendered as the task content |
Parameter |
Type |
Description |
children |
ReactNode |
The content to be rendered inside the title of the task |
Parameter |
Type |
Description |
children |
ReactNode |
The content to be rendered inside the message of the task |
Parameter |
Type |
Description |
children |
ReactNode |
The actions of the task |
This component also inherits from ButtonHTMLAttributes<HTMLButtonElement>
Parameter |
Type |
Description |
icon |
ElementType |
A icon to bee rendered inside the action button |