[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Gantt
  [Expand]Card View
   Reporting
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Collapse]Scheduler
   [Expand]Product Information
    Getting Started
   [Expand]Scheduler Elements
   [Collapse]Concepts
     Scheduling Basics
    [Expand]Appointments
    [Expand]Resources
    [Expand]Views
     Floating Action Button
    [Expand]Data Binding
    [Expand]Services
     Adaptivity
     Templates
     Client-Side Functionality
     Callback Commands
    [Expand]Reporting
     Time Zones
     iCalendar Support
     Keyboard Shortcuts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
   [Expand]Member Tables
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Gauges
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Floating Action Button

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.

Expanded 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.

Expanded Floating Action Button Object

The scheduler stores the floating action button's settings in the FloatingActionButtonProperties object that is accessed by the ASPxScheduler.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.

Expanded 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.

Expanded 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.

Is this topic helpful?​​​​​​​