MindFusion.Scheduling for ASP.NET Programmer's Guide
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  Copy Code

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

JavaScript  Copy Code

<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  Copy Code

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.