blazor-devexpress-dot-blazor-dot-dxschedulerdatastorage-1a9ed6fd.md
Specifies an appointment label data source.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public IEnumerable AppointmentLabelsSource { get; set; }
| Type | Description |
|---|---|
| IEnumerable |
Appointment label data.
|
Users can use color labels to categorize appointments. A label is displayed as the background of an appointment. The Scheduler has a built-in collection of eleven color labels.
You can use the AppointmentLabelMappings property to create a collection of your own labels:
LabelObject) that stores label settings and an ID.LabelObject class instances) and define their settings.AppointmentLabelsSource property.MyCustomField field to the LabelObject and maps this field to the label’s MyCustomProperty.<DxScheduler DataStorage="@DataStorage">
<Views>
<DxSchedulerDayView DayCount="3"
TimeScale="@(new TimeSpan(1,0,0))"
WorkTime="new DxSchedulerTimeSpanRange(TimeSpan.FromHours(9), TimeSpan.FromHours(18))"
VisibleTime="new DxSchedulerTimeSpanRange(TimeSpan.FromHours(8), TimeSpan.FromHours(19))"
TimeIndicatorVisibility="SchedulerTimeIndicatorVisibility.Never">
</DxSchedulerDayView>
<DxSchedulerWeekView ShowWorkTimeOnly="true" />
<DxSchedulerWorkWeekView ShowWorkTimeOnly="true" />
</Views>
<AppointmentCompactFormLayout Context="formInfo">
<DxSchedulerSubjectFormLayoutItem></DxSchedulerSubjectFormLayoutItem>
<DxSchedulerDescriptionFormLayoutItem></DxSchedulerDescriptionFormLayoutItem>
<DxSchedulerLabelFormLayoutItem></DxSchedulerLabelFormLayoutItem>
</AppointmentCompactFormLayout>
</DxScheduler>
@code {
DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
// Specify appointment mappings here
// ...
AppointmentLabelsSource = LabelCollection.GetLabels(),
AppointmentLabelMappings = new DxSchedulerAppointmentLabelMappings() {
Id = "Id",
Caption = "LabelCaption",
Color = "LabelColor",
// Uncomment the line below and comment the line above to specify other background options.
//BackgroundCssClass = "BackgroundCssClass",
TextCssClass = "TextCssClass",
// Map the source object's custom field to the label's custom property.
CustomFieldMappings = new List<DxSchedulerCustomFieldMapping> {
new DxSchedulerCustomFieldMapping { Name = "MyCustomProperty", Mapping = "MyCustomField" }
}
}
};
}
.label1-background {
background-color: lightblue;
border-color: blue;
}
.label2-background {
background-color: lightgreen;
border-color: green;
}
.label1-text {
color: blue;
}
.label2-text {
color: green;
}
public class LabelObject {
public int Id { get; set; }
public string LabelCaption { get; set; }
public System.Drawing.Color LabelColor { get; set; }
public string TextCssClass { get; set; }
public string BackgroundCssClass { get; set; }
public string MyCustomField { get; set; } // A custom field
}
public static class LabelCollection {
public static List<LabelObject> GetLabels() {
DateTime date = DateTime.Today;
var dataSource = new List<LabelObject>() {
new LabelObject() {
Id = 1,
LabelCaption = "Label One",
LabelColor = System.Drawing.Color.LightBlue,
// Uncomment the line below and comment the line above to specify other background options.
// BackgroundCssClass = "label1-background",
TextCssClass = "label1-text",
MyCustomField = "Custom text for Label One",
},
new LabelObject() {
Id = 2,
LabelCaption = "Label Two",
LabelColor = System.Drawing.Color.LightGreen,
// Uncomment the line below and comment the line above to specify other background options.
// BackgroundCssClass = "label2-background",
TextCssClass = "label2-text",
MyCustomField = "Custom text for Label Two",
},
};
return dataSource;
}
}
Note
When you use templates to customize appointment appearance, the Color, BackgroundCssClass, and TextCssClass property values are not applied to appointments. In the template, you can use the context.Label parameter to access these property values.
The following code snippet (auto-collected from DevExpress Examples) contains a reference to the AppointmentLabelsSource property.
Note
The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.
blazor-scheduler-custom-form/CS/DxBlazorApplication1/Components/Pages/Index.razor.cs#L72
Storage.ResourcesSource = await ResService.GetResourcesAsync();
Storage.AppointmentLabelsSource = await LblService.GetLabelsAsync();
Storage.AppointmentStatusSource = await StsService.GetStatusesAsync();
See Also