ess-calendar-control v8.0.5
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/ess-calendar-control@8.0.5.js"></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>
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago