Custom Types like the Milestones and Project Tasks

Is it possible to create a custom type milestone1 it works like milestone but with different colors and a customtype phase it works like the type project?

I’m not sure I completely understand what do you mean as “a customtype phase”.
As far as I understand you want to create your custom task type. You can read more about it in the article:
Please note, that custom types will work like regular tasks.
If you want your custom type to work like the project or a milestone, you’ll need to customize it with your code.
Here are general steps of how I did it:

  1. I used the types config for creating a custom type:

    gantt.config.types["milestone_task"] = "milestone_task";

  2. I specified the task style via CSS and add class to the task node using task_class template:

     gantt.templates.task_class = function (start, end, task) {
       if (task.type == gantt.config.types.milestone_task) {
         return "milestone_task";
       return "";
  3. Then configured the lightbox for my custom type:

     gantt.config.lightbox["milestone_task"] = [

Here is a related sample:

Another approach is to use default types and to have some custom properties which will serve as ‘subtypes’ of the main type.

{ id: 1, test: "Phase 1", type: "milestone", subtype: "phase",...}

And change the styling of such items using task_class template. Also, you can specify different styles and configurations of the lightbox for different subtypes.

Here is a sample:

You can check the related discussion in the comments under the article

1 Like

Hi Ales

Thanks for your Answer, this solve my problem.

best regards