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.