Overview

Elevate your Mendix applications with the Scaletech Calendar Widget, powered by the @event-calendar library. This versatile and interactive tool brings robust scheduling and resource management to your fingertips, offering multiple views—Day Grid, Time Grid, List, Resource Timeline, and Resource Time Grid—to suit any planning need. Seamlessly integrate dynamic event scheduling, resource allocation, and task tracking into your app with features like drag-and-drop functionality, real-time data binding, and customizable event styling. Whether managing appointments, allocating resources, or optimizing workflows, this widget delivers a rich, user-friendly experience with performance optimized for efficiency. Transform how you plan and visualize with Scaletech Calendar—your all-in-one solution for smarter scheduling in Mendix.

Documentation

Scaletech Calendar Widget

The Scaletech Calendar Widget leverages the @event-calendar library to provide a versatile and interactive calendar interface. It supports multiple views such as Day Grid, Time Grid, List, Resource Timeline, and Resource Time Grid, enabling users to manage events and resources efficiently. This widget is designed for seamless integration into Mendix applications, offering dynamic event scheduling and resource management with a rich set of interactive features.

Typical Usage Scenarios

The Scaletech Calendar Widget is ideal for various scheduling and resource management needs, such as:

• Event Scheduling: Use Day Grid or Time Grid views to plan and visualize events over days, weeks, or months.
• Resource Allocation: Utilize Resource Timeline or Resource Time Grid views to assign events to specific resources (e.g., employees, rooms, or equipment).
• Task Tracking: Display tasks or appointments with start/end times, descriptions, and custom colors for quick identification.
• Interactive Planning: Enable drag-and-drop functionality to reschedule events or adjust durations dynamically.

Features and Limitations

Features

• Multiple Calendar Views: Switch between Day Grid, Time Grid, List, Resource Timeline, and Resource Time Grid views to suit different needs.
• Dynamic Data Binding: Connects to Mendix data sources for real-time event and resource data.
• Event Customization: Supports custom colors, icons, and descriptions for events, enhancing visual distinction.
• Interactive Features: Drag-and-drop events, resize durations, click to view details, and select time slots to create new events.
• Resource Hierarchy: Manage parent and child resources with associations, ideal for complex scheduling scenarios.
• Modal Interfaces: Includes modals for creating/editing events, viewing event details, and managing resources.
• Event Actions: Trigger custom Mendix actions on event drop, save, or resource updates.
• Performance Optimization: Efficiently handles moderate event and resource datasets with smooth rendering.

Limitations

• Date Format: Start and end dates are handled as strings, requiring careful formatting to ensure compatibility.
• Resource View Dependency: Resource-specific views (e.g., Resource Time Grid) require properly structured resource data, which may need additional setup.
• Icon Rendering: Custom icons rely on FontAwesome (https://fontawesome.com/v4/icon) integration, limiting flexibility to predefined icon sets.
• Large Datasets: Dense schedules with many overlapping events may reduce readability in certain views.

Installation

1. Download the Widget: Obtain the widget package from the Mendix Marketplace or your project repository.
2. Import into Your App: Import the .mpk file into your Mendix application via the Mendix Studio Pro interface.
3. Add to a Page: Drag and drop the Scaletech Calendar Widget onto a page where you want to display the calendar.

Configuration

General Properties

Event Data

• Event Data (Datasource): Connect to a list of event objects from your Mendix data model. This is a required property defining the events to display.
• Event Id (Attribute, Long): Optional attribute for uniquely identifying events.
• Start Date (Attribute, String): Required attribute specifying the event start date/time.
• End Date (Attribute, String): Required attribute specifying the event end date/time.
• Title (Attribute, String): Required attribute for the event title displayed on the calendar.
• Description (Attribute, String): Required attribute for additional event details.
• Parent Resource Id (Attribute, Long): Required attribute linking the event to a parent resource.
• Children Resource Id (Attribute, Long): Required attribute linking the event to a child resource.
• Event Color (Attribute, String): Required attribute defining the event’s background color (e.g., hex code like #007bff).
• Icon Class (Attribute, String): Required attribute specifying a FontAwesome icon class for the event.

Resource Data

• Children Data (Datasource): Required datasource for child resources in a hierarchical structure.
• Children Id (Attribute, Long): Required attribute identifying child resources.
• Children Title (Attribute, String): Required attribute for child resource names.
• Parent-Child Association (Association): Association linking child resources to parent resources (supports Reference or ReferenceSet types).
• Resource Data (Datasource): Required datasource for parent resources.
• Parent Id (Attribute, Long): Required attribute identifying parent resources.
• Parent Title (Attribute, String): Required attribute for parent resource names.

Event Description Settings

• Show Event Description (Boolean): Enable to display event descriptions in the calendar (default: false).

Event Settings

• New Event ID (Attribute, Long): Optional attribute to store the ID of a newly created event.
• New Event Start Date (Attribute, String): Optional attribute for the start date of a new event.
• New Event End Date (Attribute, String): Optional attribute for the end date of a new event.
• New Event Title (Attribute, String): Optional attribute for the title of a new event.
• New Event Description (Attribute, String): Optional attribute for the description of a new event.
• New Event ParentId (Attribute, Long): Optional attribute linking a new event to a parent resource.
• New Event ChildrenId (Attribute, Long): Optional attribute linking a new event to a child resource.
• New Event Color (Attribute, String): Optional attribute for the background color of a new event.
• New Icon Class (Attribute, String): Optional attribute for the FontAwesome icon class of a new event.

Resource Settings

• New Parent ID (Attribute, Long): Optional attribute to store the ID of a new parent resource.
• New Parent Name (Attribute, String): Optional attribute for the name of a new parent resource.
• New Child ID (Attribute, Long): Optional attribute to store the ID of a new child resource.
• New Child Name (Attribute, String): Optional attribute for the name of a new child resource.

Action Properties

• Event Drop Action (Action): Optional microflow or nanoflow triggered when an event is dragged and dropped.
• Save Event Action (Action): Optional microflow or nanoflow triggered when an event is saved.
• Save Resource Action (Action): Optional microflow or nanoflow triggered when a resource is saved.

Frequently Asked Questions

Q1: What calendar views are supported?

A: The widget supports Day Grid (Month), Time Grid (Week/Day), List (Week), Resource Timeline (Day), and Resource Time Grid (Week) views.

Q2: Can users create or edit events directly on the calendar?

A: Yes, users can click a date to create an event, drag to reschedule, resize to adjust duration, or click an event to view/edit details via modals.

Q3: How do I assign events to resources?

A: Events are linked to resources via the Parent Resource Id and Children Resource Id attributes, which map to the resource hierarchy defined in the Resource Data section.

Q4: Can I customize the appearance of events?

A: Yes, use the Event Color attribute for background colors and the Icon Class attribute for FontAwesome icons.

Demo Project:-  https://scaletechcalendar-sandbox.mxapps.io/login.html?profile=Responsive

User id:- demo_administrator

Password:- 6ARLkG28mp2k

Contributors:- Avinash Pansuriya