Using Built-In Forms

In MindFusion.Scheduling for ASP.NET interactive creating, modifying and deleting of items in a calendar view is facilitated by using the built-it popup Forms - namely NewForm - for quickly creating items, EditForm - for detailed creation of items or editing, RecurrenceForm - for specifying / editing / removing a recurrence pattern for an item, ItemsCueForm - 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 in different Themes 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.

The following example shows how you can modify an opening form by handling the FormShow event.

ASPX

<MindFusion:Calendar ID="Calendar1" runat="server" FormShowScript="onFormShow" />

JavaScript

<script type="text/javascript">

function onFormShow(sender, args) {
    var form = args.get_form();
    
    if (form.getId() == 'EditForm') {
        if (!form.customizedForm) {
            args.set_cancel(true);

            var customForm = new MindFusion.Scheduling.EditForm(sender, form.getItem());
            customForm.customizedForm = true;
            customForm.setHeaderText('my custom form!');

            customForm.showForm();
        }
    }
}

</script>

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

For example, you may wish to forbid interactive recurrence pattern creation through forms. In order to do that, you can hide the Recurrence button, used to show the RecurrenceForm in the EditForm:

JavaScript

function onFormShow(sender, args) {
    var form = args.get_form();
    if (form.getId() == 'EditForm') {
        var btnRec = form.getControls()['btnRecurrence'].element;
        btnRec.style.display = 'none';
    }
}

The following tables show a complete list of the ids and types of the HTML elements, used in the built-in forms.

NewForm

Id of the element	Element type	Description
headerElement	div	The header of the form.
headerClose	a	The header close button in the upper right corner of the form.
subject	textarea	The subject text area of the form.
btnSave	a	The Save button.
btnOptions	a	The Options button.

EditForm

Id of the element	Element type	Description
InfoDiv	div	Div showing information about recurrence patterns.
TimeDiv	div	The area containing start and end time related elements.
allDayEvent	checkbox	The 'All day event' checkbox.
btnCancel	a	The Cancel button.
btnRecurrence	a	The Recurrence button.
btnSave	a	The Save button.
contacts	div	The Contacts area.
details	textarea	The Details area.
endDate	div	The end time date component.
endTime	div	The end time time component.
headerClose	a	The header close button in the upper right corner of the form.
headerElement	div	The header of the form.
location	select	The Location drop-down.
reminder	select	The Reminder drop-down.
reminderCheck	checkbox	The Reminder checkbox.
startDate	div	The start time date component.
startTime	div	The start time time component.
subject	text	The Subject area.

RecurrenceForm

Id of the element	Element type	Description
DayDiv	div	The daily recurrence pattern area.
IntervalDiv	div	The time interval recurrence pattern area.
MonthDiv	div	The monthly recurrence pattern area.
WeekDiv	div	The weekly recurrence pattern area.
YearDiv	div	The yearly recurrence pattern area.
btnCancel	a	The Cancel button.
btnSave	a	The Save button.
btnDelete	a	The Delete button.
daily	radio	The 'Daily' pattern selection radio button
weekly	radio	The 'Weekly' pattern selection radio button
monthly	radio	The 'Monthly' pattern selection radio button
yearly	radio	The 'Yearly' pattern selection radio button
interval	radio	The 'By time interval' pattern selection radio button
startDate	div	The start date element.
noEnd	radio	The RecurrenceEnd.Never radio button.
endAfter	radio	The End after radio button.
numOccurences	div	The number of occurrences up/down.
endDate	div	The end date element.
endBy	radio	The End by radio button.
dailyEvery	radio	The every day radio button. (Daily pattern)
dailyEveryDay	div	The every day up/down. (Daily pattern)
dailyWeekDay	radio	The weekday radio button. (Daily pattern)
dailyWeekendDay	radio	The weekend radio button. (Daily pattern)
weekEvery	div	The every week up/down. (Weekly pattern)
dayOfWeek0	checkbox	The first day of week. (Weekly pattern)
dayOfWeek1	checkbox	The second day of week. (Weekly pattern)
dayOfWeek2	checkbox	The third day of week. (Weekly pattern)
dayOfWeek3	checkbox	The fourth day of week. (Weekly pattern)
dayOfWeek4	checkbox	The fifth day of week. (Weekly pattern)
dayOfWeek5	checkbox	The sixth day of week. (Weekly pattern)
dayOfWeek6	checkbox	The seventh day of week. (Weekly pattern)
monthDate	radio	The BySpecificDate radio button. (Monthly pattern)
monthDateEdit	div	The day of month up/down. (Monthly pattern)
monthDateMonth	div	The months up/down. (Monthly pattern)
monthWeekDay	radio	The ByDayType radio button. (Monthly pattern)
monthWeekDayOptions	select	The occurrence drop-down. (Monthly pattern)
monthWeekDayExactOptions	select	The day of week drop-down. (Monthly pattern)
monthWeekDayMonth	div	The months up/down. (Monthly pattern)
yearExact	radio	The BySpecificDate radio button. (Yearly pattern)
yearExactOption	select	The month of year drop-down. (Yearly pattern)
yearExactEdit	div	The day up/down. (Yearly pattern)
yearWeekDay	radio	The ByDayType radio button. (Yearly pattern)
yearWeekDayPosOptions	select	The occurrence drop-down. (Yearly pattern)
yearWeekDayExactOptions	select	The day of week drop-down. (Yearly pattern)
yearMonthExactOptions	select	The month of year drop-down. (Yearly pattern)
intervalDays	div	The days up/down. (ByTimeInterval pattern)
intervalHours	div	The hours up/down. (ByTimeInterval pattern)
intervalMinutes	div	The minutes up/down. (ByTimeInterval pattern)
intervalSeconds	div	The seconds up/down. (ByTimeInterval pattern)

ItemsCueForm

Id of the element	Element type	Description
headerElement	div	The header of the form.
headerClose	a	The header close button in the upper right corner of the form.