10、Gantt 休息日部分 calendar

1、在甘特图中添加日历

https://docs.dhtmlx.com/gantt/api__gantt_addcalendar.html

task.calendar_id = 'default';
// adding a previously created calendar
var calendarId = gantt.addCalendar(calendar);
 
// adding a calendar with a new config
var calendarId = gantt.addCalendar({
    id:"default", // optional
    worktime: {
        hours: ["8:00-17:00"],
        days: [ 1, 1, 1, 1, 1, 1 ,1]
    }
});
 
var calendar = gantt.getCalendar(calendarId);

2、计算任务的结束日期

https://docs.dhtmlx.com/gantt/api__gantt_calculateenddate.html

gantt.config.work_time = true;
gantt.init("gantt_here");
 
// calculate the end date using global worktime settings
gantt.calculateEndDate({start_date: new Date(2013,02,15), duration: 48});
// or
gantt.calculateEndDate(new Date(2013,02,15), 48);
 
// calculate end date for a specific task calendar
gantt.calculateEndDate({start_date: new Date(2013,02,15), duration: 48, task:task});
// or, a short form:
// will use calendar currently assigned to a task, task.start_date and task.duration
gantt.calculateEndDate(task);

您还可以使用calculateEndDate方法计算开始日期

//calculate the start date:
task.start_date = gantt.calculateEndDate({
    start_date: task.end_date,
    duration: -task.duration
});

3、允许在工作时间而不是日历时间计算任务的持续时间

https://docs.dhtmlx.com/gantt/api__gantt_duration_unit_config.html

https://docs.dhtmlx.com/gantt/api__gantt_work_time_config.html

https://docs.dhtmlx.com/gantt/api__gantt_duration_step_config.html

gantt.config.duration_unit = 'day'; //工期计算的基本单位 hour
gantt.config.duration_step = 1; //工期计算的倍数
gantt.config.work_time = true; // 允许在工作时间而不是日历时间计算任务的持续时间

4、指定将应用于时间轴区域单元格的 CSS 类

https://docs.dhtmlx.com/gantt/api__gantt_timeline_cell_class_template.html

gantt.templates.timeline_cell_class = function (task, date) {
  // console.log(gantt.isWorkTime({ date: date, task: task }), task, date);
  if (!gantt.isWorkTime({ date: date, task: task })) return 'weekend';
  return '';
};

.weekend {
  background: #f4f7f4;
}
.gantt_selected .weekend {
  background: rgba(191, 28, 45, 0.08);
}

<Select
  mode="multiple"
  :maxTagCount="1"
  v-model:value="calendarTypeValue"
  style="width: 160px; margin-right: 10px"
  placeholder="请选择休息日"
  @change="handleCalendarTypeChange"
>
  <Option
    v-for="item in calendarTypeList"
    :key="item.value"
    :value="item.value"
    :id="item.value"
    :name="item.label"
    :disabled="
      calendarTypeValue.length > 5 &&
      calendarTypeValue.indexOf(item.value + '') === -1
    "
  >
    {{ item.label }}
  </Option>
</Select>

// 日历类型
const calendarTypeList = ref([]);
const calendarTypeValue = ref([]);


/**
 * 选择日历类型
 * @param e
 * @param option
 */
function handleCalendarTypeChange(e, option) {
  console.log(e, option, e.length < 6);
  renderCalendar();
}

function renderCalendar() {
  const ganttObj = gantt;
  console.log('fjd===========================================', calendarTypeValue.value);
  // 每天都是工作日
  ganttObj.addCalendar({
    id: 'default', // optional
    worktime: {
      days: [
        calendarTypeValue.value.indexOf('7') == -1 ? 1 : 0,
        calendarTypeValue.value.indexOf('1') == -1 ? 1 : 0,
        calendarTypeValue.value.indexOf('2') == -1 ? 1 : 0,
        calendarTypeValue.value.indexOf('3') == -1 ? 1 : 0,
        calendarTypeValue.value.indexOf('4') == -1 ? 1 : 0,
        calendarTypeValue.value.indexOf('5') == -1 ? 1 : 0,
        calendarTypeValue.value.indexOf('6') == -1 ? 1 : 0,
      ],
    },
  });
  ganttObj.batchUpdate(function () {
    ganttObj.eachTask(function (task) {
      task.calendar_id = 'default';
      console.log(task);
      task.start_date = ganttObj.getClosestWorkTime({
        dir: 'future',
        date: task.start_date,
        unit: ganttObj.config.duration_unit,
        task: task,
      });
      task.end_date = ganttObj.calculateEndDate(task);
      ganttObj.updateTask(task.id);
    });
  });
}