<h1 align="center">gantt-schedule-timeline-calendar</h1>

<h2 align="center">Gantt, schedule, timeline and calendar components all in one!</h2>

<p align="center">
  <img src="https://neuronet.io/screenshots/mainapp.jpg" alt="gantt-schedule-timeline-calendar">
</p>

<h3>gantt-schedule-timeline-calendar is all-in-one component that you can use in different scenarios.</h3>
Keywords: [ gantt, javascript gantt, typescript gantt, project manager, js gantt, js scheduler, js timeline, javascript timeline, javascript schedule, js scheduler, javascript calendar ]
<br/><br/><br/>
<p align="center">
  <img src="https://img.shields.io/npm/v/gantt-schedule-timeline-calendar.svg">
  <img src="https://snyk.io/test/github/neuronetio/gantt-schedule-timeline-calendar/badge.svg">
  <img src="https://app.codacy.com/project/badge/Grade/732e0ef156344594b48584af97ba1e4a">
  <img src="https://neuronet.io/screenshots/typescript.svg">
  <img src="https://neuronet.io/screenshots/eslint.svg">
  <img src="https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/qdqmtw/master&style=flat&logo=cypress">
  <img src="https://api.travis-ci.com/neuronetio/gantt-schedule-timeline-calendar.svg?branch=master">
  <img src="https://img.shields.io/npm/dm/gantt-schedule-timeline-calendar.svg">
  <!--<img src="https://img.badgesize.io/neuronetio/gantt-schedule-timeline-calendar/master/dist/gstc.esm.min.js?compression=gzip">-->
</p>
<br>
<br />
<h3 align="center">And always remember, to leave a <a href="https://github.com/neuronetio/gantt-schedule-timeline-calendar">star :star:</a></h3>
<br />

<h2 align="center">FEATURES</h2>

- elastic - you can change almost everything from DOM tree to logic (without any compilation, without modifying original code - with config, state or plugin)
- super fast! even with large dataset
- multiple items/tasks in one row - suitable for various applications like booking, reservation, resource manager, multimedia editor etc.
- tree like structures - collapsible / expandable groups
- moveable / resizable items with ability to configure which items can move at the moment and how
- secure html templates
- snap to specified time when resizing / moving
- templates & slots support to easily change html content of each component
- background grid on which you can place your html content
- selectable cells and items with a choice of what can be selected at the moment
- gradual time zoom up to seconds
- resizable list columns (in realtime)
- sortable and searchable list columns
- BEM based CSS rules (easy to change appearance)
- you can easily add third party libraries
- highly configurable
- mobile ready
- Daylight saving time (DST) support
- plugins support
- attractive visually
- written in typescript
- offline license key (after purchase)

<p>
You can use it in <strong>react</strong>, <strong>vue</strong>, <strong>angular</strong>, <strong>svelte</strong> or any other projects.
</p>

<p>
You can use it as <strong>schedule</strong> for reservation system. You can use it for organizing <strong>events</strong>. You can use it as <strong>gantt chart</strong>. You can use it as <strong>calendar</strong> for different purposes.
You can even use it as a <strong>multimedia timeline editor</strong>!
</p>

<p>
<strong>gantt-schedule-timeline-calendar</strong> is very extensible and elastic. You can make your own plugins or modify configuration in couple of ways to achieve your goals.
You can control almost everything. You can change html structure, stylize every html element and even override original components without any compilation stage!
</p>

## When to choose gantt-schedule-timeline-calendar?

Choose this component if:

- you need a battle-tested component trusted by global enterprises
- you need **high-performance Gantt charts with hundreds of thousands of items** (faster than competitors)
- you want a fully customizable JavaScript/Typescript component with extensive control over appearance and behavior
- you want **advanced scheduling or resource booking UI**
- you want to define your own rules for moving tasks
- your project is written in **TypeScript**
- you want a **timeline** with ability to show **multiple tasks in one row**
- you need a component that works **on mobile devices**
- you need integration with React, Vue 3 (Composition API), Angular or Svelte
- your use case includes **zoomable timelines** down to seconds
- you need a background grid to place custom HTML content
- you want to hide non working hours/days
- you need Daylight Saving Time (DST) support

<br />

GSTC is a powerful, highly customizable JavaScript component that offers full control over both its visual presentation and behavior, allowing developers to tailor it precisely to their needs.
Gantt Schedule Timeline Calendar is a **high-performance** TypeScript library designed to work on mobile devices also. Use it when traditional Gantt charts are too rigid. Perfect for project management applications,reservation systems, Enterprise Resource Planning (ERP, MES, APS) software, any resource management or booking apps.
GSTC can handle large datasets (**hundreds of thousands of tasks**) with ease (using **virtual scroll**), making it suitable for complex scheduling and timeline visualization tasks.
It is the **most extensible** tool on the market – you can override any DOM element on the fly - without recompiling the source.
Most importantly, if you require custom constraints and flexible, dynamic rules for task updates, this tool is the perfect fit for your needs.
Powering **global enterprises** with a proven track record of excellence and user satisfaction.
From startups to global conglomerates, our component is the go-to solution for high-performance scheduling, backed by exceptional feedback from our users.

<h2 align="center">EXAMPLES</h2>

<a href="https://gantt-schedule-timeline-calendar.neuronet.io/examples" target="_blank">Online examples</a>

You can checkout [examples folder](https://github.com/neuronetio/gantt-schedule-timeline-calendar/tree/master/examples) too.
To run examples locally, clone this repository and run `npm run examples` in the root folder.
```bash
git clone https://github.com/neuronetio/gantt-schedule-timeline-calendar.git
cd gantt-schedule-timeline-calendar
npm i
npm run examples
```

<h2 align="center">REACT, NEXTJS, ANGULAR, SVELTE AND VUE EXAMPLES</h2>

- [react gantt-schedule-timeline-calendar usage example](https://github.com/neuronetio/react-gantt-schedule-timeline-calendar-example)
- [nextjs/react gantt-schedule-timeline-calendar usage example](https://github.com/neuronetio/nextjs-gantt-schedule-timeline-calendar-example)
- [angular gantt-schedule-timeline-calendar usage example](https://github.com/neuronetio/angular-gantt-schedule-timeline-calendar-example)
- [vue gantt-schedule-timeline-calendar usage example](https://github.com/neuronetio/vue-gantt-schedule-timeline-calendar-example)
- [vue3 composition api with vite gantt-schedule-timeline-calendar example](https://github.com/neuronetio/vue3-vite-gantt-schedule-timeline-calendar-example)
- [svelte gantt-schedule-timeline-calendar usage example](https://github.com/neuronetio/svelte-gantt-schedule-timeline-calendar-example)

<h2 align="center">SCREENSHOTS</h2>

<p align="center">
  <img src="https://neuronet.io/screenshots/item-types.png" alt="gantt-schedule-timeline-calendar item types">
  <br />
  <img src="https://neuronet.io/screenshots/item-types-selected.png" alt="gantt-schedule-timeline-calendar item types">
  <br />
  <img src="https://neuronet.io/screenshots/item-types-selected-2.png" alt="gantt-schedule-timeline-calendar item types">
  <br />
  <img src="https://neuronet.io/screenshots/select-cells.gif" alt="gantt-schedule-timeline-calendar select cells">
  <br />
  <img src="https://neuronet.io/screenshots/linked-items-2.gif" alt="gantt-schedule-timeline-calendar linked items">
  <br />
  <img src="https://neuronet.io/screenshots/select-items.gif" alt="gantt-schedule-timeline-calendar select items">
  <br />
  <img src="https://neuronet.io/screenshots/linked-items.gif" alt="gantt-schedule-timeline-calendar linked-items 2">
</p>
<hr />

<h2 align="center">INSTALL</h2>

`npm i gantt-schedule-timeline-calendar`

or

`<script src="https://cdn.jsdelivr.net/npm/gantt-schedule-timeline-calendar/dist/gstc.wasm.umd.min.js"></script>`

<h2 align="center">DOCUMENTATION</h2>

[Documentation can be found here](https://gantt-schedule-timeline-calendar.neuronet.io)

<h2 align="center">NEED HELP?</h2>

Let us know neuronet.io@gmail.com

<h2 align="center">LICENSE</h2>

[NEURONET Free / Trial License Terms](https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)

You can generate [free or trial license key here](https://gstc.neuronet.io/free-key).
If you need a full commercial license, please visit [pricing page](https://gantt-schedule-timeline-calendar.neuronet.io/pricing).
