基础用法
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];