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

Jul 07, 2023
8 minutes to read

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.

Tip

For a complete sample project, see the following example: View Example: Scheduler - Lesson 1 - Show appointments in read-only mode

sql

CREATE TABLE [dbo].[DBAppointments](
    [UniqueID] [int] IDENTITY(1,1) NOT NULL,
    [Type] [int] NULL,
    [StartDate] [smalldatetime] NULL,
    [EndDate] [smalldatetime] NULL,
    [AllDay] [bit] NULL,
    [Subject] [nvarchar](100) NULL,
    [Location] [nvarchar](50) NULL,
    [Description] [ntext] NULL,
    [Status] [int] NULL,
    [Label] [int] NULL,
    [ResourceID] [int] NULL,
    [ReminderInfo] [ntext] NULL,
    [RecurrenceInfo] [ntext] NULL,
    [CustomField1] [ntext] NULL,
 CONSTRAINT [PK_Appointments] PRIMARY KEY CLUSTERED 
(
    [UniqueID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[DBResources](
    [UniqueID] [int] IDENTITY(1,1) NOT NULL,
    [ResourceID] [int] NOT NULL,
    [ResourceName] [nvarchar](50) NULL,
    [Color] [int] NULL,
    [Image] [image] NULL,
    [CustomField1] [ntext] NULL,
 CONSTRAINT [PK_Resources] PRIMARY KEY CLUSTERED 
(
    [UniqueID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO

To create a simple scheduling application, do the following.

Step 1. Create a New Project
Step 2. Create Data Objects
Step 3. Provide Data for the Scheduler
Step 4. Create a Controller
Step 5. Create Views
Step 6. Observe the Result

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:

Check for namespaces in web.config file:

xml

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

Check Views\Shared_Layout.cshtml for correct stylesheets and scripts:

cshtml

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

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

Step 2. Create Data Objects

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

Step 3. Bind to Data

Add a new code file to the project. Within the file, implement a base type that will contain appointments and resources.
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.
Create the SchedulerStorageProvider class that provides default appointment storage, default resource storage and creates required mappings.

Step 4. Create a Controller.

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.
Add new actions:

Step 5. Create Views

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).
Add a line
Use the @model directive to specify a strongly-typed model:
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.
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.

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.