Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Collapse]Scheduler
   [Expand]Overview - SchedulerControl
    Main Features - Scheduler
   [Collapse]Getting Started - Scheduler
     Lesson 1 - Use Scheduler to Display Appointments in Read-Only Mode
     Lesson 2 - Implement Insert-Update-Delete Appointment Functionality
     Lesson 3 - Use Scheduler in Complex Views
     Use Project Template to Create a Fully Functional Application
   [Expand]Concepts - Scheduler
   [Expand]Visual Elements - Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [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]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 1 - Use Scheduler to Display Appointments in Read-Only Mode

This step-by-step guide demonstrates how to create a simple application that uses the Scheduler MVC Extension to display appointments, and how to provide data for it.

In this tutorial, a standalone MS SQL database file (*.mdf) is used. The database is created using the script listed below. Sample appointments and resources are added by connecting the database to a WinForms XtraScheduler sample application.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3971.

To create a simple scheduling application, do the following.

Expanded Step 1. Create a New Project

Create a new C# MVC Application using New - Project - DevExpress ASP .NET MVC Empty Web Application.

All required references are already included in the project template. If you upgrade an existing project, check for the following lines.

Check for references in web.config file:

<add assembly="DevExpress.XtraScheduler.v17.2.Core, Version=17.2.1.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.Web.ASPxScheduler.v17.2, Version=17.2.1.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />

Check for namespaces in web.config file:

<add namespace="DevExpress.XtraScheduler" / >
<add namespace="DevExpress.XtraScheduler.Native" / >
<add namespace="DevExpress.Web.ASPxScheduler" / >

Check Views\Shared\_Layout.cshtml for correct stylesheets and scripts:

@Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler }
)
@Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.Scheduler }
)

Expanded Step 2. Create Data Objects

  1. Add a new item using Linq to SQL Classes template. You can find it under the Data branch of the Installed Templates tree. Name it SchedulingDataClasses. The file SchedulingDataClasses.dbml is created. Place it in the Models folder.
  2. Use Server Explorer to establish a new data connection to the SchedulerCars database (file SchedulerCars.mdf). This file is contained in the E3971 sample project, however you can use a database created as described in the beginning of this document.
  3. Drag tables DBAppointments and DBResources to the SchedulingDataClasses.dbml designer window. Click Yes when asked whether to copy the data file to your project and modify the connection.

Expanded Step 3. Bind to Data

  1. Add a new code file to the project. Call it Scheduling.cs.
  2. Within the code file, implement a base type that will contain appointments and resources.

    Show Me

    A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3971.

  3. Create a public class SchedulerDataHelper. It contains methods to get appointments and resources from the data model. Create a method that will return data to the scheduler. These methods are static and reside within the SchedulerDataHelper class.

    Show Me

    A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3971.

    Note

    The SchedulingDataClassesDataContext is the name of the class created automatically by Linq to SQL classes template.

  4. Create the SchedulerStorageProvider class that provides default appointment storage, default resource storage and creates required mappings.

    Show Me

    A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3971.

Expanded Step 4. Create a Controller.

  1. Add a controller to the project. To accomplish this, select Add New Item and navigate to the Web->MVC 4 branch in a tree of installed templates. Select MVC 4 Controller Class and name it HomeController.cs.
  2. Add new actions:

    Show Me

    A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3971.

Expanded Step 5. Create Views

  1. Create a default view. To accomplish this, right-click the Views folder, add a subfolder named Home, select Add->View and specify the name ("Index") and a view engine (Razor).
  2. Add a line
    @Html.Partial("SchedulerPartial", Model)
    to the newly created default view represented by a file Views\Home.cshtml.
  3. Use the @model directive to specify a strongly-typed model:
    @model SchedulerDataObject
  4. Add a new view SchedulerPartial to the project. Right-click in the Project Explorer and select Views - Add View. Name it SchedulerPartial and click the checkbox indicating that this is a partial view (Create as a partial view). A SchedulerPartial.cshtml file is created.
  5. Implement a view using SchedulerSettings. To accomplish this, copy the following code to the SchedulerPartial.cshtml file. The code prevents appointment creation, deletion and editing. It also hides appointments which meet certain conditions.

Expanded Step 6. Observe the Result

Run the project. You will see the scheduler with appointments on a page as illustrated in the following page. Appointment modifications are not allowed so there are no corresponding commands. You can navigate dates and switch between views.

How would you rate this topic?​​​​​​​