The requested page is not available for the requested platform. You are viewing the content for Default platform.

Floating Action Button

  • 3 min to read

The Floating Action Button (FAB) is a circular button with an image that appears in front of the scheduler's content and provides access to the most frequently used actions. The floating action button's actions depend on the triggered element in the scheduler. For example, the floating action button provides the "Open", "Edit", and "Delete" actions if a user selects an appointment or provides the "Create new Appointment" action if a user selects a time cell.

ASPxScheduler-FAB

Concept

The floating action button provides two types of actions.

  • Action - Executes the action once an end-user clicks the floating action button.
  • Action group - The floating action button serves as a container for multiple actions. When pressed, the floating action button expands nested actions.

ASPxScheduler-FAB-Concept

Floating Action Button Object

The scheduler stores the floating action button's settings in the FloatingActionButtonProperties object that is accessed by the SchedulerSettings.FloatingActionButton property.

Property Description
FloatingActionButtonProperties.TextVisibilityMode Specifies whether the floating action button's text should be displayed.
FloatingActionButtonProperties.HorizontalMargin Specifies the floating action button element's horizontal margin.
FloatingActionButtonProperties.VerticalMargin Specifies the floating action button element's vertical margin.

The floating action button stores its items in the FloatingActionButtonProperties.Items collection that is accessed at the FloatingActionButtonProperties object level.

Action

The following types of actions are available.

Object Description
FABAction Represents a custom action.
FABCreateAppointmentAction Represents the "Create an appointment" action.

Use the following settings to customize an action.

Property Description
FABCollectionItemBase.ActionName Specifies the action name.
FABActionBase.ContextName Specifies the context name.
FABCollectionItemBase.Text Specifies the floating action button's text.
FABAction.Image Provides access to the floating action button's image settings.

Action Group

The following types of an action group are available.

Object Description
FABActionGroup Represents a custom group of actions.
FABCreateAppointmentActionGroup Represents a group of action items that allow you to create an appointment.
FABEditAppointmentActionGroup Represents a group of action items that allow you to edit an appointment.

Use the following settings to customize an action group.

Property Description
FABActionGroup.ActionName Specifies the action group's name.
FABActionBase.ContextName Specifies the context name.
FABCollectionItemBase.Text Specifies the action group's text.
FABActionGroup.CollapseImage Provides access to the collapse image settings.
FABActionGroup.ExpandImage Provides access to the expand image settings.
FABCollectionItemBase.CssClass Specifies the cascading style sheet's (CSS) class name that specifies the action group's style.

Action Item

Each action group stores its action items in the Items collection. An action item can be an instance of the following type.

Object Description
FABActionItem Represents a custom action item.
FABEditAppointmentActionItem Represents an action item that allows you to edit an appointment.
FABDeleteAppointmentActionItem Represents an action item that allows you to delete an appointment.
FABCreateRecurringAppointmentActionItem Represents an action item that allows you to create a recurring appointment.
FABCreateAppointmentActionItem Represents an action item that allows you to create an appointment.

You can change the following characteristics of an individual action item.

Property Description
FABCollectionItemBase.ActionName Specifies the action item's name.
FABCollectionItemBase.Text Specifies the action item's text.
FABActionItem.Image Provides access to the action item's image settings.
FABCollectionItemBase.CssClass Specifies the cascading style sheet's (CSS) class name that specifies the action item's style.