gantt-schedule-timeline-calendar 的使用要点

基础用法

docs:Getting started gantt-schedule-timeline-calendar javascript (typescript) component

如何看到最基础的效果文档里都有。最容易踩坑的点：就是

javascript 复制代码

xxx 前面省略一些配置
const element = document.getElementById("your-element");
// 就是传入到GSTC 中的 {}  第一个参数一定是 element， 传入 别的变量名都会报错！！！ 
if(!element) throw new Error("Element not found");

// Create an instance and mount the component
const gstc = GSTC({
  element,
  state,
});

config.list.column

required key:

id
data
width
header

js 复制代码

const columnsFromDB = [
  {
    id: 'id',
    // row 这里应该获取的是本条数据的记录
    data: ({ row }) => GSTC.api.sourceID(row.id), // show original id (not internal GSTCID)
    // sortable  用于排序，类似于table 中的点击表头，排序的那种效果！！
    sortable: ({ row }) => Number(GSTC.api.sourceID(row.id)), // sort by id converted to number
    width: 80,
    header: {
      content: 'ID', // 类似于 table组件 column label|name
    },
  },
  {
    id: 'label',
    data: 'label',
    sortable: 'label',
    isHTML: false,
    width: 230,
    header: {
      content: 'Label',
    },
  },
];

config.list.rows

required key:

两种写法：一种数组，类似于table data,这时候id可以直接传数字, 一种是传入一个对象，然后key 就是 GSTCID('id') $必须是这个格式$ ,value包含{id|GSTCID('id'),label}

js 复制代码

one:
{
   // row with source ID === '1'
   [GSTCID('123')]: {
     id: 123, // 这里的id可以是数字123以及GSTCID('123')
     label: 'Row 122',// 非必需属性
   },
 },
 
 two:
const rowsFromDB = [
  {
    id: "1",
    label: "Row 1",
  },
  {
    id: "2",
    label: "Row 2",
  },
];

config.chart.time

// calculatedZoomMode: true, 表示跟随可视区的resize事件去显示不同的calendar title

config.chart.calendarLevels

时间跨度由下面的period字段去设定！！！

js 复制代码

const calendarLevel0 = [
  {
    zoomTo: 16,
    period: 'hour',
    main: true,
    periodIncrement: 1,
    format({ timeStart }) {
      return timeStart.format('HH:mm');
    },
  },
  {
    zoomTo: 17,
    period: 'hour',
    main: true,
    periodIncrement: 1,
    format({ timeStart }) {
      return timeStart.format('HH');
    },
  },
  {
    zoomTo: 19,
    period: 'day',
    main: true,
    periodIncrement: 1,
    classNames: ['gstc-date-medium'],
    format({ timeStart, className, vido }) {
      return vido.html`<span class="${className}-content gstc-date-bold">${timeStart.format(
        'DD'
      )}</span> <span class="${className}-content gstc-date-thin">${timeStart.format('dddd')}</span>`;
    },
  },
  {
    zoomTo: 20,
    period: 'day',
    main: true,
    periodIncrement: 1,
    format({ timeStart, vido, className }) {
      return vido.html`<div class="${className}-content gstc-date-top">${timeStart.format(
        'DD'
      )}</div><div class="${className}-content gstc-date-small">${timeStart.format('dddd')}</div>`;
    },
  },
  {
    zoomTo: 21,
    period: 'day',
    main: true,
    periodIncrement: 1,
    format({ timeStart, vido, className }) {
      return vido.html`<div class="${className}-content gstc-date-top">${timeStart.format(
        'DD'
      )}</div><div class="${className}-content gstc-date-small">${timeStart.format('ddd')}</div>`;
    },
  },
  {
    zoomTo: 22,
    period: 'day',
    main: true,
    periodIncrement: 1,
    classNames: ['gstc-date-vertical'],
    format({ timeStart, className, vido }) {
      return vido.html`<div class="${className}-content gstc-date-top">${timeStart.format(
        'DD'
      )}</div><div class="${className}-content gstc-date-extra-small">${timeStart.format('ddd')}</div>`;
    },
  },
  {
    zoomTo: 23,
    period: 'week',
    main: true,
    periodIncrement: 1,
    format({ timeStart, timeEnd, className, vido }) {
      return vido.html`<div class="${className}-content gstc-date-top">${timeStart.format('DD')} - ${timeEnd.format(
        'DD'
      )}</div><div class="${className}-content gstc-date-small gstc-date-thin">${timeStart.format(
        'ddd'
      )} - ${timeEnd.format('dd')}</div>`;
    },
  },
  {
    zoomTo: 25,
    period: 'week',
    main: true,
    periodIncrement: 1,
    classNames: ['gstc-date-vertical'],
    format({ timeStart, timeEnd, className, vido }) {
      return vido.html`<div class="${className}-content gstc-date-top gstc-date-small gstc-date-normal">${timeStart.format(
        'DD'
      )}</div><div class="gstc-dash gstc-date-small">-</div><div class="${className}-content gstc-date-small gstc-date-normal">${timeEnd.format(
        'DD'
      )}</div>`;
    },
  },
  {
    zoomTo: 26,
    period: 'month',
    main: true,
    periodIncrement: 1,
    classNames: ['gstc-date-month-level-1'],
    format({ timeStart, vido, className }) {
      return vido.html`<div class="${className}-content gstc-date-top">${timeStart.format(
        'MMM'
      )}</div><div class="${className}-content gstc-date-small gstc-date-bottom">${timeStart.format('MM')}</div>`;
    },
  },
  {
    zoomTo: 27,
    period: 'month',
    main: true,
    periodIncrement: 1,
    classNames: ['gstc-date-vertical'],
    format({ timeStart, className, vido }) {
      return vido.html`<div class="${className}-content gstc-date-top">${timeStart.format(
        'MM'
      )}</div><div class="${className}-content gstc-date-extra-small">${timeStart.format('MMM')}</div>`;
    },
  },
  {
    zoomTo: 28,
    period: 'year',
    main: true,
    periodIncrement: 1,
    classNames: ['gstc-date-big'],
    format({ timeStart }) {
      return timeStart.format('YYYY');
    },
  },
  {
    zoomTo: 29,
    period: 'year',
    main: true,
    periodIncrement: 1,
    classNames: ['gstc-date-medium'],
    format({ timeStart }) {
      return timeStart.format('YYYY');
    },
  },
  {
    zoomTo: 30,
    period: 'year',
    main: true,
    periodIncrement: 1,
    classNames: ['gstc-date-medium'],
    format({ timeStart }) {
      return timeStart.format('YY');
    },
  },
  {
    zoomTo: 100,
    period: 'year',
    main: true,
    periodIncrement: 1,
    format() {
      return null;
    },
  },
];
const calendarLevels = [calendarLevel0];