[{"id":"53ae7f99-150b-4b50-9f72-02f7f2ea5efe","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e371599e-67ae-4635-802b-0ada531e5b5b","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f309ec90-559b-42bf-955b-492431019196","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"28d36d47-c582-4210-a848-5ba48491bb80","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"9d13df60-758a-4cc3-9cda-8d6234e00821","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2e473c2c-8b35-40de-bdce-f21478f434bc","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e19a99e0-5b6f-4c8b-b872-47b3e78011bf","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2f718a98-6d54-4dc1-89c3-6b87cfabd16b","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"df066912-4ce1-4484-b00c-86b34a6e977b","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"1fcab497-8c1f-413e-bce0-f3ae72229e85","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"3d90b977-451c-42ce-a26a-1e32c1082471","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6433ad22-3173-436a-8ff9-355a17142bc5","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e82311a5-f99e-4075-8710-9a76a2da67a7","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7bebaae0-d5e2-4db3-ab34-644272d2aed6","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2c77a1e3-7af7-4dca-88aa-ee59b41d7896","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"5a3f52b5-5b23-473e-bdbc-906381b9a948","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"299d63a8-7f0b-46a4-a152-9a7ca85a2170","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"906b4555-b1b6-4ddb-a290-c13cb8a153a0","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"efa3eb50-4277-46ee-b451-c5096e889fff","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"1d9b7a41-588f-47d1-bb81-f46146e062fb","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"c1687a0f-e3a0-4074-996c-94cbacf49f29","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"269fc082-c3b5-4208-a987-c1a3c1dee620","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"cb76b7de-9b29-4d6b-b644-de3c3c0a1262","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"4dc9d5da-9bf3-4baf-9fae-6b34511062a4","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e4e74cf8-8702-45a6-a536-86d03b66af49","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"abe88d62-9eb6-4113-89f3-abb0cff27c3a","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f3751417-d894-4cf1-8a8c-c2e7391dd4b1","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"49ae1d04-aba0-4311-8548-df297a5aedc0","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"861d71ff-44db-4563-a24c-e1a389708c19","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2f6715bc-8b05-4653-8ec5-0dd835dc6035","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"d2f5c978-f4e4-4c18-ab43-e8fbbc6ad92b","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e183d612-0813-4e0f-b217-308d71c14637","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"f8f319ea-ec97-4d69-a862-c6a17191f0f7","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"d895fc4b-55bb-46ee-bd74-7a0abb51650c","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"680fba3c-ad50-41a6-bc56-acd4f229de8f","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"1234e85c-d175-4f94-ac83-b53b5e3596d2","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"8fb554aa-3192-402b-9d6b-1ec2b4b99ea0","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"aff9d5e3-7e18-4287-892f-8d7844e9ddf2","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6a23926e-a2ac-4c07-ba79-2f7751f098ee","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"51c9c955-8c66-45d8-bb0c-718aee1073da","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6174a29f-1d15-4a80-a860-d28fdecca505","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"51709a04-b2cd-4465-b2a2-da7beb2e4f15","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"897b8725-abb5-428a-bd7a-a610fae8e28c","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"c00c0609-ac23-4859-8442-be43ed745ad3","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"0996d76b-b253-49a7-9ea8-89d81ce0d42f","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"3c007776-7473-4203-8cc1-9ed79bb512df","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"4bb1ced3-7a10-4719-854b-513729b31e53","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"53155f14-d53e-4d53-a087-0a32d9b088e8","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"279e57c0-0954-49d6-9076-2133a204e24f","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e9c38f09-cfd3-4a78-b2cf-412e3c1b5945","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"754efafe-744e-452e-9e46-833c9b36c763","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"be5fe8a1-1660-4dc4-b7fb-ceb038047086","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]}]
        
(Showing Draft Content)

Calendar Settings

GanttSheets use different calendars to determine the working hours and non-working hours for accurate scheduling and resource allocation. Each calendar is created with a work week, workday, and work time that you can customize.

When you create a project, it uses the default base calendar to schedule tasks. If your project has workdays and times that are outside the default hours, you can change to a different base calendar or adjust the work times for the project calendar to meet your needs.

Apply Built-In Calendar

SpreadJS has the following built-in calendars for GanttSheets.

  • Standard (Monday to Friday, 8:00 AM to 5:00 PM)

  • Night Shift (Monday to Friday, 11:00 PM to 4:00 AM; Saturday, 11:00 PM to 8:00 AM)

  • 24 Hours (24 hours a day, seven days in a week)

The following code sample shows how to assign the hours24 calendar to a project, which refers to a continuous 24-hour working day.

var calendar = GC.Spread.Sheets.GanttSheet.Calendar.hours24;
ganttSheet.project.calendar = calendar;

Create Default Calendar

SpreadJS enables you to define and customize the project calendar, workweek, and working hours. Use the GC.Spread.Sheets.GanttSheet.Calendar API to create a default project calendar. To do this, you need to give a calendar name as shown in the following code sample.

GC.Spread.Sheets.GanttSheet.Calendar("defaultCalendar") 

Once created, you can define the regular workweek in the calendar using the GC.Spread.Sheets.GanttSheet.WorkWeek API. A workweek is a list of working days, where you can specify the working hours for each day. On the other hand, a workday is an array that sets the start and end times for each work period. Using the GC.Spread.Sheets.GanttSheet.WorkTime and GC.Spread.Sheets.GanttSheet.Time APIs, you can set the working time within the days defined by the workweek.

Additionally, SpreadJS provides GC.Spread.Sheets.GanttSheet.CustomWorkWeek API to create a custom workweek, which is an extension of the regular workweek. It allows you to mark special times, such as holidays or leaves, by setting specific dates and adjusting the working hours for those periods.

Customize Calendar Settings

Calendar Settings define some properties mainly for calculation duration. You can configure the below settings of a calendar.

Setting

Description

Default Value

Sample Code

Week start

First day of the week

Sunday

ganttSheet.project.calendarSettings.weekStartOn = GC.Spread.Sheets.GanttSheet.DayOfWeek.Sunday;

Default start/end time

Daily work start/end time

Start time: 8:00 AM

End time: 5:00 PM

ganttSheet.project.calendarSettings.defaultStartTime = { hour: 8, minute: 0 };

ganttSheet.project.calendarSettings.defaultFinishTime = { hour: 17, minute: 0 };

Hours per day

Length of hours in a workday

8 hours

ganttSheet.project.calendarSettings.hoursPerDay = 8;

Hours per week

Length of the work week

40 hours

ganttSheet.project.calendarSettings.hoursPerWeek = 40;

Days per month

Length of the work month

20 days

ganttSheet.project.calendarSettings.daysPerMonth = 20;

Duration unit

[Note that the duration unit can be changed only for summary tasks. Common tasks always use the 'day' as duration unit in the Gantt chart view]

Unit of measurement for working hours

Days

ganttSheet.project.calendarSettings.defaultDurationUnit = "Day";

Default duration decimal digits

Time precision reserved for calculation

3

ganttSheet.project.calendarSettings.defaultDurationDecimalDigits = 3;

Change Working Time

If a project's usual work schedule does not match any of the available base calendars, you can also change the working hours for your project to schedule the tasks properly.

To make changes to work time, first you need to get the default workweek either from the project's current calendar or from the built-in namespace. After that, you can make changes to the calendar and then apply the edited calendar to the project. The following code sample shows how to change working time on a calendar:

// Get the default workweek from project current calendar.
var calendar = ganttSheet.project.calendar;
console.log(calendar.defaultWorkWeek);

// or

// Get the default workweek from built-in namespace.
console.log(GC.Spread.Sheets.GanttSheet.Calendar.standard);
console.log(GC.Spread.Sheets.GanttSheet.Calendar.hours24);
console.log(GC.Spread.Sheets.GanttSheet.Calendar.nightShift);

// Change the working time.
var calendar = GC.Spread.Sheets.GanttSheet.Calendar.standard;
var defaultWorkWeek = calendar.defaultWorkWeek;
var workday = defaultWorkWeek.getWorkDay(GC.Spread.Sheets.GanttSheet.DayOfWeek.Monday);

// The Working Day is formed with time range:
    /*
    [
        { start: { hour: 8, minute: 0 }, end: { hour: 12, minute: 0 } },
        { start: { hour: 13, minute: 0 }, end: { hour: 17, minute: 0 } }
    ]
        // 8:00~12:00 13:00~17:00
    */
workday[1].end.hour = 13;

// Apply the edited calendar
ganttSheet.project.calendar = GC.Spread.Sheets.GanttSheet.Calendar.standard;
}

You can change the working time and set the selected calendar information in the SpreadJS Designer. To do so, you can use the PROJECT tab after adding a GanttSheet and select the Change Working Time button in the Properties group. In the Change Working Time dialog, you need to select which calendar information you want to modify from the For Calendar dropdown and check the specific working times of the day by selecting different dates.

Following that, click the Work Weeks tab to select a period of time and then click Details to change the default working hours. If you choose Set day(s) to these specific working times, use the From and To columns to set the working times for the selected days.

change working time

Notes:

  • Working hours can only be changed if you select Set day(s) to these specific working times.

  • The changed date will be marked as a Nondefault work week.

Furthermore, you can also create your own base calendar by selecting Create New Calendar... on the top right corner of the Change Working Time dialog.