ess-calendar-control

ESS Calendar Control

v7.0.0

An interactive calendar component for displaying time/date-based data.

Getting Started

Build process

• Ensure that dependencies are installed: npm install
• Run the build statement: npm run build

Dependencies (replace with relevant version)

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://common.essolutions.com.au/ess-calendar-control/[e-mail]"></script>

Important notes

• System must be capable of running a 'getdata' (Web Integration) call
• getdata call is run with 'MODE=SUMMARY'. This means only 'summary' question types will be delivered. You must ensure any answers to be displayed on the calendar must have a 'summary' question type.

Usage

<div class="ess-calendar-root" id="jobsCalendar"></div>
<script>
    const initialiseReactApp = (targetId, data) => {
        // Create custom build event
        const buildEvent = new CustomEvent('build', {
            detail: {
                data: data,
            },
        });

        // Dispatch the event.
        const target = document.getElementById(targetId);
        target.dispatchEvent(buildEvent);
    };
</script>
<script>
    const CONFIG = {
        title: 'Jobs Calendar', // Calendar title (only visible if isFullScreen = true)
        fid: 147, // Form FID (e.g. 'Jobs' Form)
        height: '100vh', // Calendar height (defaults to 450px, or 100vh if isFullScreen = true)
        isCompact: false, // Enable reduced padding to minimise calendar height
        isViewOnly: false, // Disable add/edit entry UI
        isMonthOnly: false, // Disable week view
        isFullScreen: true, // Enable fullscreen view with sidebar
        isEntryLinkHidden: false,  // Disable edit/view entry buttons in popover
        fields: {
            title: 'JobTitle',
            info: 'JobDescription', // Only relevant for add/edit UI (when isViewOnly = false)
            image: 'Images',
            start: 'ScheduledStartDate',
            end: 'ScheduledEndDateIfMoreThanOneDay',
            group: { label: 'Status', fid: 135, isRelateMany: false }, // Form details to group and colour entries
            filter: { label: 'Strategy', fid: 529 }, // Additional form used for further filtering (only if isFullScreen = true)
            popover: ['FieldStaffAssignedToTask', 'Strategy', 'JobDescription'], // Fields to display in popover
        },
    };

    // Initialise calendar
    document.addEventListener('DOMContentLoaded', () => {
        initialiseReactApp('jobsCalendar', CONFIG);
    });
</script>

(back to top)