The Schedule control fits perfectly in desktop and tablet views, by default. When it is rendered on smaller screens such as mobile devices, the default views and navigation buttons collapse when navigating between dates. To overcome this, the Schedule control can be adaptively rendered on mobile devices. With this adaptive feature enabled, the Schedule control can be rendered on all kinds of screen resolutions, and provides additional user-friendly interactions when rendered on smaller screens.
This adaptive feature also allows the Schedule control to be accessed on any mobile device, regardless of the screen size. To enable this feature, the isResponsive property needs to be set to true. When this property is set to true, the Schedule control automatically adapts to the screen size in mobile and desktop environments. All the default functions of the Schedule control are supported by this feature, except for horizontal orientation.
Enabling Adaptive Layout
The following code samples demonstrate how to enable the adaptive layout of the Schedule control in JavaScript, ASP.NET MVC, and ASP.NET Web Forms.
Dependencies
To make use of the adaptive schedule rendering in applications, refer to the CSS file that can be downloaded from https://www.syncfusion.com/downloads/support/directtrac/general/Responsive.zip.
[JS]
[MVC]
[Razor]
@(Html.EJ().Schedule("AdaptiveSchedule")
.Width("100%")
.Height("500px")
.IsResponsive(true)
.AppointmentSettings(eve=>eve.DataSource((IEnumerable)ViewBag.dataSource)
.Id("Id")
.Subject("Subject")
.StartTime("StartTime")
.EndTime("EndTime")
.Description("Description")
.AllDay("AllDay")
.Recurrence("Recurrence")
.RecurrenceRule("RecurrenceRule"))
)
[Controller]
namespace MVCSampleBrowser.Controllers
{
public partial class ScheduleController : Controller
{
public ActionResult Default()
{
var DataSource = new ScheduleDataContext().DefaultSchedules.ToList();
ViewBag.datasource = DataSource;
return View();
}
}
}
[ASP]
[ASPX]
The following screenshot shows the Schedule control’s default view.
Figure 1: Default schedule view on a mobile device
Adaptive Schedule Appearance
When adaptively rendered on mobile devices, the Schedule control provides more user interaction facilities like spacious work cells to make it easier and more convenient to create events. For the schedule to fit the screen appropriately, the header bar also has a modified design. The view navigation is performed with the help of the Navigation Drawer control, which is displayed after touching the menu icon at the top-right corner of the schedule.
CRUD Operations
In the adaptive schedule, CRUD operations like add, edit, and delete can be performed with appointments the same way they’re done in the default schedule. Drag and drop operations can also be performed with appointments in the adaptive schedule.
Figure 2: Edit window in mobile view
Multiple Resources
The Schedule control’s adaptive layout is capable of displaying multiple resources in the mobile view as shown in the following figure. While swiping to the right or left, you can navigate to the other available resources, and on reaching the last resource, the appropriate date navigation takes place. Other behaviors involving multiple resources are similar to those provided in the default schedule.
Figure 3: Adaptive schedule with multiple resources
View Navigation
In order to navigate between the available schedule views, the Navigation Drawer control is used. The control also includes options for creating new events. The appointment window displayed within the Schedule control has also been made adaptive to adjust its size based on the size of the schedule.
Figure 4: Schedule with navigation drawer in mobile view
A sample of enabling the adaptive layout in the Schedule control can be downloaded at http://www.syncfusion.com/downloads/support/directtrac/general/Adaptive.zip. Simply by referring an additional CSS file dependency to the sample application, you can successfully create a schedule control that automatically adapts to the size of the screen it is rendered on.
