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];
相关推荐
Mintopia7 分钟前
计算机图形学学习指南
前端·javascript·计算机图形学
Mintopia7 分钟前
three.js 中的动画(animation)
前端·javascript·three.js
AI大模型顾潇9 分钟前
[特殊字符] Prompt如何驱动大模型对本地文件实现自主变更:Cline技术深度解析
前端·人工智能·llm·微调·prompt·编程·ai大模型
小小小小宇20 分钟前
React中 useEffect和useLayoutEffect源码原理
前端
AlexJee22 分钟前
在vue3中使用vue-cropper完成头像裁剪上传图片功能
前端
清晨細雨24 分钟前
uniapp微信小程序:WIFI设备配网之TCP/UDP开发AP配网
前端·物联网·小程序·uni-app
阿廖沙102425 分钟前
Rust核心概念
前端
阿廖沙102427 分钟前
🚀 从“值放哪了”聊起:Rust 内存管理通透讲解(适合前端工程师)
前端
打野赵怀真28 分钟前
如何提高前端应用的性能?
前端·javascript