Customisation of the left Column in the timeline view

Event Calendar
#1

Hi all, I need to customise the left column of the event calendar when in a timelineView. The general idea would be to have the left column divided in three different sections, each with their own information about that row.

Something like this

Screenshot 2023-11-24 at 10.08.11

#2

Hello,

You can use a timelineSection template, it might look something like this:

function timelineSection({section}) {
    return `
        <div class='wx-section-template-wrapper'>
            <div class='wx-event-section'>${section.chassis}</div>
            <div class='wx-event-section'>${section.model}</div>
            <div class='wx-event-section'>${section.colour}</div>
        </div>
    `;
}

const templates = {
    timelineSection
};

const eventCalendarInstance = new eventCalendar.EventCalendar('#root', {
    events,
    mode: 'timeline',
    config: { 
        views,
        timeRange: [8, 21],
        tableHeaderHeight: 30,
    },
    date: new Date('2023-02-28T00:00:00'),
    templates,
});

Unfortunately, at the moment there is no template for the header, but you can try to draw your html over the existing one:

(function () {
    const calendarElement = document.getElementById('root');
    const sectionHeaderHeight = eventCalendarInstance.config.config.tableHeaderHeight;
    const toolbarHeight = document.querySelector('.wx-event-calendar-toolbar_wrapper.svelte-1rx91km').offsetHeight;
    const sectionWidth = eventCalendarInstance.config.config.views[3].config.sectionWidth;
    const sidebarWidth = document.querySelector('.wx-event-calendar-wrapper.svelte-1fnsmxv.wx-event-calendar-show').offsetWidth;
    const sectionHeader = document.createElement('div');

    sectionHeader.className = 'section-header';
    sectionHeader.style.position = 'absolute';
    sectionHeader.style.top = toolbarHeight + 'px';
    sectionHeader.style.left = sidebarWidth + 'px';
    sectionHeader.style.width = sectionWidth + 'px';
    sectionHeader.style.height = sectionHeaderHeight * 2 + 4 + 'px';

    const descriptionHTML = `
        <div class='wx-section-header-wrapper'>
            <div class='timeline-item-cell'>Chassis</div>
            <div class='timeline-item-cell'>Model</div>
            <div class='timeline-item-cell'>Colour</div>
        </div>
    `;

    sectionHeader.innerHTML = descriptionHTML;
    calendarElement.appendChild(sectionHeader);
})();

Styles:

.wx-event-calendar-timeline-section {
    height: 100px;
}

.wx-section-template-wrapper {
    height: 100%;
    display: flex;
}

.wx-event-section {
    flex: 1;
    border-right: 1px solid #dfdfdf;
}

.wx-event-section:last-child {
    border-right: none;
}

.section-header {
    line-height: 30px;
    z-index: 2;
}

.wx-section-header-wrapper {
    height: 100%;
    display: flex;
}

.timeline-item-cell {
    text-align: center;
    flex: 1;
    border-right: 1px solid #dfdfdf;
}

.wx-event-calendar-timeline-header-placeholder {
    font-size: 0;
}

Here is an example: DHTMLX Snippet Tool . Please note that this is not a complete example, but based on it, you can modify it to suit your needs.

1 Like