Leonezz / tasks-timeline-view

tasks-timeline-view

Made with create-react-library

Install

npm install --save tasks-timeline-view

Usage

See example/.

Data preparation:

import moment from "moment"
import { BasicTaskItemPriority, BasicTaskItemStatus, TaskItem } from "tasks-timeline-view"

export const TodoList: TaskItem[] = [
    {
        status: BasicTaskItemStatus.Done,
        priority: BasicTaskItemPriority.High,
        text: "- [x] Unchecked ✅ 2023-11-14",
        visual: "Unchecked",
        tags: new Set(["tag1"]),
        dateTime: {
            completion: moment("2023-11-14", "YYYY-MM-DD"),
            misc: new Map()
        },
        position: {
            visual: "test theme-defined markers.md",
        },
        meta: {}
    }, {
        status: BasicTaskItemStatus.Done,
        priority: BasicTaskItemPriority.Medium,
        text: "- [x] Checked",
        visual: "Checked",
        tags: new Set(["tag2"]),
        dateTime: {
            created: moment("2023-12-14", "YYYY-MM-DD"),
            misc: new Map()
        },
        position: {
            visual: "test theme-defined markers.md",
        },
        meta: {}
    }, {
        status: BasicTaskItemStatus.Overdue,
        priority: BasicTaskItemPriority.Low,
        text: "- [>] Rescheduled",
        visual: "Rescheduled",
        dateTime: {
            due: moment(),
            misc: new Map()
        },
        tags: new Set(["tag3"]),
        position: {
            visual: "test theme-defined markers.md",
        },
        meta: {}
    }
]

render the view with data:

import React from 'react'

import { TimelineView } from 'tasks-timeline-view'
import 'tasks-timeline-view/dist/index.css'
import { TodoList } from './taskList'

const App = () => {
  return <TimelineView taskList={TodoList} />
}

export default App

And the result:

Status change popup:

Task item edit:

Recurrence mode edit:

License

MIT © Leonezz