blazor-scheduler-custom-form/CS/DxBlazorApplication1/Components/Pages/Index.razor at 25.2.3+ · DevExpress-Examples/blazor-scheduler-custom-form · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
@page "/"
<PageTitle>Welcome</PageTitle>

<style>
    .my-scheduler {
        height: 700px;
        width: 70%;
    }
</style>

<div class="main-content">
    <DxGridLayout CssClass="welcome-gridlayout" RowSpacing="3rem">
        <Rows>
            <DxGridLayoutRow Height="auto" Areas="header"></DxGridLayoutRow>
            <DxGridLayoutRow Height="auto" Areas="cards"></DxGridLayoutRow>
        </Rows>
        <Items>
            <DxGridLayoutItem Area="header" CssClass="title">
                <Template>
                    <div class="title-header-text">Scheduler Examples</div>
                </Template>
            </DxGridLayoutItem>
            <DxGridLayoutItem Area="cards" CssClass="welcome-cards">
                <Template>
                    @using DxBlazorApplication1.Models.UIModels
                    @rendermode InteractiveServer

                    <DxScheduler @ref="Scheduler" @bind-StartDate="@StartDate"
                                 GroupType="SchedulerGroupType.Resource"
                                 DataStorage="@Storage"
                                 AppointmentFormShowing="OnAppointmentFormShowing"
                                 AppointmentInserted="OnAppointmentInserted"
                                 AppointmentRemoved="OnAppointmentRemoved"
                                 AppointmentUpdated="OnAppointmentUpdated"
                                 CssClass="my-scheduler">
                        <Views>
                            <DxSchedulerDayView></DxSchedulerDayView>
                            <DxSchedulerWeekView></DxSchedulerWeekView>
                            <DxSchedulerWorkWeekView></DxSchedulerWorkWeekView>
                            <DxSchedulerMonthView></DxSchedulerMonthView>
                            <DxSchedulerTimelineView></DxSchedulerTimelineView>
                        </Views>
                        <AppointmentCompactFormHeaderTemplate Context="ctx">
                            <div style="flex-grow: 1; text-align: end;">Time Zone: @ctx.SourceAppointment.TimeZoneId</div>
                            <DxSchedulerSaveAppointmentChangesButton />
                            <DxSchedulerDiscardAppointmentChangesButton />
                            <DxSchedulerShowAppointmentEditFormButton />
                        </AppointmentCompactFormHeaderTemplate>
                        <AppointmentCompactFormLayout Context="ctx">
                            <DxSchedulerSubjectFormLayoutItem />
                            <DxSchedulerStartDateFormLayoutItem />
                            <DxSchedulerStartTimeFormLayoutItem />
                            <DxSchedulerAllDayFormLayoutItem />
                            <DxSchedulerEndDateFormLayoutItem />
                            <DxSchedulerEndTimeFormLayoutItem />
                            <DxSchedulerLocationFormLayoutItem />
                            <DxSchedulerDescriptionFormLayoutItem />
                            <DxSchedulerCustomFormLayoutItem ShowIcon="true" Caption="Degree Level">
                                <Template>
                                    <DxComboBox Data='new List<string>() { "Bachelor", "Master", "PhD" }' @bind-Value='((CustomAppointmentFormInfo)ctx).DegreeLevel'></DxComboBox>
                                </Template>
                            </DxSchedulerCustomFormLayoutItem>
                        </AppointmentCompactFormLayout>
                        <AppointmentFormLayout Context="ctx">
                            <DxSchedulerSubjectFormLayoutItem />
                            <DxSchedulerStartDateFormLayoutItem />
                            <DxSchedulerStartTimeFormLayoutItem />
                            <DxSchedulerAllDayFormLayoutItem />
                            <DxSchedulerEndDateFormLayoutItem />
                            <DxSchedulerEndTimeFormLayoutItem />
                            <DxSchedulerRepeatFormLayoutItem Visible="false" />
                            <DxSchedulerLocationFormLayoutItem Caption="Building" />
                            <DxSchedulerLabelFormLayoutItem ColSpanXl="6" />
                            <DxSchedulerStatusFormLayoutItem ColSpanXl="6" />
                            <DxSchedulerResourceFormLayoutItem Caption="Lecturer" />
                            <DxSchedulerDescriptionFormLayoutItem />
                            <DxSchedulerCustomFormLayoutItem ShowIcon="true" Caption="Degree Level" ColSpanXl="6">
                                <Template>
                                    <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>
                                </Template>
                            </DxSchedulerCustomFormLayoutItem>
                        </AppointmentFormLayout>
                    </DxScheduler>

                </Template>
            </DxGridLayoutItem>
        </Items>
    </DxGridLayout>
</div>

@code {
    [SupplyParameterFromQuery(Name = UrlGenerator.ToggleSidebarName)]
    public bool ToggledSidebar { get; set; }
}