Built-in Forms

In MindFusion.Scheduling for JavaScript interactive creating, modifying and deleting of items in a calendar view is facilitated by using the built-it popup Forms:

• NewForm - for quickly creating items,
• EditForm - for detailed creation of items or editing,
• RecurrenceForm - for specifying/editing/removing a recurrence pattern for an item,
• CueForm - a container form, used for displaying items, which are not visible in a time cell.

To disable the forms set the calendar.useForms property to false. You can style the default forms and customize them to your liking. More information on the CSS classes used to style forms can be found in the CSS Classes topic.

All of the included forms derive from the BaseForm class, and share some similar functionality. When a form is about to be opened in a Calendar, the formShow event is raised, where the FormEventArgs argument, contains information about the opening form - its type, its header text, the item it's associated with and so on. By handling the formShow event, you can choose to not show a particular form, or to show a modified or completely different version of it.

When a form is closed the formClose event is raised. The event provides data for the event through the FormEventArgs argument.

Through the BaseForm.controls property you can obtain references to the HTML elements, used in a particular form.

The code below handles itemDoubleClick event to render a custom form for editing holiday items:

JavaScript

// handle the itemDoubleClick event to show the custom form for item editing
calendar.itemDoubleClick.addEventListener(handleItemDoubleClick);function handleItemDoubleClick(sender, args)
{
 // create and show the custom form
 var form = new CustomForm(sender, args.item, "edit");
 form.showForm();
}

And the form looks like this:

Custom form for editing holidays in MindFusion.Scheduling for JavaScript