Add readme

CS/DxBlazorApplication1/Components/Pages/Index.razor

@@ -55,9 +55,9 @@
                             <DxSchedulerEndTimeFormLayoutItem />
                             <DxSchedulerLocationFormLayoutItem />
                             <DxSchedulerDescriptionFormLayoutItem />
-                            <DxSchedulerCustomFormLayoutItem ShowIcon="true" Caption="Grade">
+                            <DxSchedulerCustomFormLayoutItem ShowIcon="true" Caption="Degree Level">
                                 <Template>
-                                    <DxComboBox Data='new List<string>() { "Bachelor", "Master", "PhD" }' @bind-Value='((CustomAppointmentFormInfo)ctx).Grade'></DxComboBox>
+                                    <DxComboBox Data='new List<string>() { "Bachelor", "Master", "PhD" }' @bind-Value='((CustomAppointmentFormInfo)ctx).DegreeLevel'></DxComboBox>
                                 </Template>
                             </DxSchedulerCustomFormLayoutItem>
                         </AppointmentCompactFormLayout>
@@ -74,14 +74,14 @@
                             <DxSchedulerStatusFormLayoutItem ColSpanXl="6" />
                             <DxSchedulerResourceFormLayoutItem Caption="Lecturer" />
                             <DxSchedulerDescriptionFormLayoutItem />
-                            <DxSchedulerCustomFormLayoutItem ShowIcon="true" Caption="Grade" ColSpanXl="6">
+                            <DxSchedulerCustomFormLayoutItem ShowIcon="true" Caption="Degree Level" ColSpanXl="6">
                                 <Template>
-                                    <DxComboBox Data='new List<string>() { "Bachelor", "Master", "PhD" }' @bind-Value='((CustomAppointmentFormInfo)ctx).Grade'></DxComboBox>
+                                    <DxComboBox Data='new List<string>() { "Bachelor", "Master", "PhD" }' @bind-Value='((CustomAppointmentFormInfo)ctx).DegreeLevel'></DxComboBox>
                                 </Template>
                             </DxSchedulerCustomFormLayoutItem>
                             <DxSchedulerCustomFormLayoutItem ShowIcon="true" Caption="Origin Time Zone" ColSpanMd="6">
                                 <Template>
-                                    <div>@ctx.SourceAppointment.TimeZoneId"</div>
+                                    <div>@ctx.SourceAppointment.TimeZoneId</div>
                                 </Template>
                             </DxSchedulerCustomFormLayoutItem>
                         </AppointmentFormLayout>

CS/DxBlazorApplication1/Components/Pages/Index.razor.cs

@@ -37,7 +37,7 @@ public partial class Index : ComponentBase {
                 ResourceId = "LecturerIds",
                 TimeZoneId = "TimeZoneId",
                 CustomFieldMappings = new List<DxSchedulerCustomFieldMapping> {
-                    new DxSchedulerCustomFieldMapping { Name = "Grade", Mapping = "Grade" }
+                    new DxSchedulerCustomFieldMapping { Name = "DegreeLevel", Mapping = "DegreeLevel" }
                 }
             },
             ResourceMappings = new DxSchedulerResourceMappings() {

CS/DxBlazorApplication1/Models/UIModels/CustomAppointmentFormInfo.cs

@@ -7,9 +7,9 @@ public class CustomAppointmentFormInfo : SchedulerAppointmentFormInfo {
         public CustomAppointmentFormInfo(DxSchedulerAppointmentItem AppointmentItem,
                 DxSchedulerDataStorage DataStorage, DxScheduler scheduler) : base(AppointmentItem, DataStorage, scheduler) { }
 
-        public string? Grade {
-            get { return CustomFields["Grade"]?.ToString(); }
-            set { CustomFields["Grade"] = value; }
+        public string? DegreeLevel {
+            get { return CustomFields["DegreeLevel"]?.ToString(); }
+            set { CustomFields["DegreeLevel"] = value; }
         }
     }
 }

CS/DxBlazorApplication1/Models/UniversityClass.cs

@@ -25,6 +25,6 @@ public class UniversityClass {
         public string? RecurrenceInfo { get; set; }
         public string? ReminderInfo { get; set; }
         public string? TimeZoneId { get; set; }
-        public string? Grade { get; set; }
+        public string? DegreeLevel { get; set; }
     }
 }

CS/DxBlazorApplication1/Services/DataHelpers/LabelDataHelper.cs

@@ -14,7 +14,7 @@ public class LabelDataHelper {
         private static readonly List<LectureType> lectureTypes = new List<LectureType>() {
             new(){ Id = 1, Name = "Lecture", Color = Color.Coral, BackgroundCssClass = "label-1", TextCssClass = "label-1" },
             new(){ Id = 2, Name = "Seminar", Color = Color.ForestGreen, BackgroundCssClass = "label-2", TextCssClass = "label-2" },
-            new(){ Id = 3, Name = "Laboratory", Color = Color.LightSkyBlue, BackgroundCssClass = "label-3", TextCssClass = "label-3" },
+            new(){ Id = 3, Name = "Lab", Color = Color.LightSkyBlue, BackgroundCssClass = "label-3", TextCssClass = "label-3" },
         };
     }
 }

README.md

@@ -1,38 +1,40 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/1027761813/25.1.4%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1304528)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
 <!-- default badges end -->
-# Product/Platform - Task
+# Blazor Scheduler - Customize Appointment Forms
 
-This is the repository template for creating new examples. Describe the solved task here.
+This example creates custom extended and compact appointment forms for DevExpress Blazor Scheduler. In addition to standard content, custom forms display appointment time zone and an extra layout item (**Degree Level**).
 
-Put a screenshot that illustrates the result here.
+Refer to the following help topic for information on how to create custom appointment forms: [Custom Appointment Forms and Tooltips](https://docs.devexpress.com/Blazor/404564/components/scheduler/customization/appointment-forms-and-tooltips#custom-appointment-form).
 
-Then, add implementation details (steps, code snippets, and other technical information in a free form), or add a link to an existing document with implementation details. 
+Both standard and customized appointment forms support [CRUD operations](/CS/DxBlazorApplication1/Components/Pages/Index.razor.cs). For your convenience, we created a data source that contains different appointment types: one-time or recurring, all-day or with specific start/end times, assigned to a single or multiple resources. Our example generates the data source at runtime and binds it to the Scheduler via [services](/CS/DxBlazorApplication1/Services/). To bind a Scheduler in your own application, you can use the same code-behind, but you must implement your own [interfaces](/CS/DxBlazorApplication1/Services/Interfaces).
+
+![Custom Appointment Forms](./result.png)
 
 ## Files to Review
 
-- link.cs (VB: link.vb)
-- link.js
-- ...
+- [Index.razor](/CS/DxBlazorApplication1/Components/Pages/Index.razor)
+- [Index.razor.cs](/CS/DxBlazorApplication1/Components/Pages/Index.razor.cs)
+- [Models](/CS/DxBlazorApplication1/Models/) 
+- [Services](/CS/DxBlazorApplication1/Services/)
 
 ## Documentation
 
-- link
-- link
-- ...
+- [Custom Appointment Forms and Tooltips](https://docs.devexpress.com/Blazor/404564/components/scheduler/customization/appointment-forms-and-tooltips#custom-appointment-form)
 
 ## More Examples
 
-- link
-- link
-- ...
+- [Load appointments for visible interval only (lazy loading)](https://github.com/DevExpress-Examples/blazor-scheduler-load-appointments-range)
+- [Implement CRUD operations with a Web API Service](https://github.com/DevExpress-Examples/blazor-scheduler-bind-to-web-api-service)
+
 <!-- feedback -->
-## Does this example address your development requirements/objectives?
-
-[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-scheduler-custom-form&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-scheduler-custom-form&~~~was_helpful=no)
-
+## Does this example address your development requirements/objectives?
+
+[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-scheduler-custom-form&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-scheduler-custom-form&~~~was_helpful=no)
+
 (you will be redirected to DevExpress.com to submit your response)
 <!-- feedback end -->
+
+