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:

  • id

两种写法:一种数组,类似于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];
相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):扎实的基本功是唯一捷径
前端·javascript·程序员
摇滚侠1 小时前
Vue3 其它API toRow和markRow
前端·javascript
難釋懷1 小时前
JavaScript基础-history 对象
开发语言·前端·javascript
beibeibeiooo1 小时前
【CSS3】04-标准流 + 浮动 + flex布局
前端·html·css3
拉不动的猪1 小时前
刷刷题47(react常规面试题2)
前端·javascript·面试
浪遏1 小时前
场景题:大文件上传 ?| 过总字节一面😱
前端·javascript·面试
Bigger2 小时前
Tauri(十八)——如何开发 Tauri 插件
前端·rust·app
355984268550552 小时前
医保服务平台 Webpack逆向
前端·webpack·node.js
百锦再3 小时前
React编程的核心概念:发布-订阅模型、背压与异步非阻塞
前端·javascript·react.js·前端框架·json·ecmascript·html5
thinkQuadratic3 小时前
scss预处理器对比css的优点以及基本的使用
前端·css·scss