Skip to content

Commit 37104b7

Browse files
svdimitrdimodi
svdimitr
and
dimodi
authored
[3.4.0] Calendar Header Template (#989)
* docs(calendar): header template * add examples for DatePicker and DateTimePicker * link header template articles, remove datetimepicker header template * remove access modifiers * Document methods * document methods * fix table layout Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
1 parent 3fcf22e commit 37104b7

File tree

8 files changed

+319
-28
lines changed

8 files changed

+319
-28
lines changed

‎components/calendar/overview.md‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,10 @@ The Calendar navigation allows the user to navigate through several views that r
5959

6060
The Calendar allows you to configure every aspect of the date selection. You can control whether the user can select only one or more dates. You can create a collection of disabled dates so that the user cannot select from them or define selectable ranges of days. [Read more about the Calendar selection...]({%slug components/calendar/selection%})
6161

62+
## Templates
63+
64+
The Calendar provides different types of templates to customize the component's content and styling. These include [month cell, year cell, decade cell, century cell and header templates]({%slug calendar-templates-overview%}).
65+
6266
## Multiple Views
6367

6468
You can display a wider range of dates by rendering multiple instances of the Calendar so that the users can find the desired date easier. [Read more about the multiple views in the Calendar...]({%slug components/calendar/multiview%})
@@ -67,20 +71,44 @@ You can display a wider range of dates by rendering multiple instances of the Ca
6771

6872
The Calendar generates events that you can handle and further customize ist behavior. [Read more about the Blazor Calendar events...]({%slug components/calendar/events%}).
6973

70-
## Calendar Reference
74+
## Calendar Reference and Methods
75+
76+
Add a reference to the component instance to use the [Calendar methods](/blazor-ui/api/Telerik.Blazor.Components.TelerikCalendar).
7177

72-
Add a reference to an instance of the Blazor Calendar to use its methods.
78+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
79+
80+
| Method | Description |
81+
| --- | --- |
82+
| `NavigateTo` | Navigates to a specified date and view. The method expects a `DateTime` and `CalendarView` arguments. |
83+
| `Refresh` | Re-renders the Calendar. |
7384

7485
````CSHTML
75-
@using Telerik.Blazor.Components
86+
<p>
87+
<TelerikButton OnClick="@GoToPreviousMonth">Go To Previous Month</TelerikButton>
88+
<TelerikButton OnClick="@GoToNextMonth">Go To Next Month</TelerikButton>
89+
</p>
7690
77-
<TelerikCalendar @ref="myCalendarReference">
78-
</TelerikCalendar>
91+
<TelerikCalendar @ref="@Calendar"
92+
@bind-Value="@CalendarValue"
93+
@bind-Date="@CalendarDate" />
7994
8095
@code {
81-
Telerik.Blazor.Components.TelerikCalendar myCalendarReference;
96+
TelerikCalendar Calendar { get; set; }
97+
DateTime CalendarValue { get; set; } = DateTime.Now;
98+
DateTime CalendarDate { get; set; } = DateTime.Now;
99+
100+
void GoToPreviousMonth()
101+
{
102+
Calendar.NavigateTo(CalendarDate.AddMonths(-1), CalendarView.Month);
103+
}
104+
105+
void GoToNextMonth()
106+
{
107+
Calendar.NavigateTo(CalendarDate.AddMonths(1), CalendarView.Month);
108+
}
82109
}
83110
````
111+
84112
## Next Steps
85113

86114
* [Configuring the Date Selection]({%slug components/calendar/selection%})

‎components/calendar/templates/header-template.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
title: Header Template
3+
page_title: Calendar - Header Template
4+
description: Use custom custom rendering in the header of the Calendar for Blazor.
5+
slug: calendar-templates-header
6+
tags: telerik,blazor,calendar,templates,header
7+
published: True
8+
position: 10
9+
---
10+
11+
# Header Template
12+
13+
The `<HeaderTemplate>` allows you to customize the header of the calendar. If the application defines this template, the component will not render any of the built-in buttons and labels in the header area.
14+
15+
The example below is using a [Calendar reference and methods]({%slug components/calendar/overview%}#calendar-reference-and-methods).
16+
17+
>caption Use custom rendering in the Calendar header
18+
19+
````CSHTML
20+
<TelerikCalendar @bind-Value="@CalendarValue" @bind-Date="@CalendarDate">
21+
<HeaderTemplate>
22+
23+
<TelerikButton OnClick="@GoToPrevious" Icon="arrow-60-left" Title="Go to Previous Month"></TelerikButton>
24+
<TelerikButton OnClick="@SelectToday">Today</TelerikButton>
25+
<TelerikButton OnClick="@GoToNext" Icon="arrow-60-right" Title="Go to Next Month"></TelerikButton>
26+
27+
<TelerikIcon Icon="parameter-date-time" /> @CalendarValue.ToShortDateString()
28+
29+
</HeaderTemplate>
30+
</TelerikCalendar>
31+
32+
@code {
33+
DateTime CalendarValue { get; set; } = DateTime.Now;
34+
DateTime CalendarDate { get; set; } = DateTime.Now;
35+
36+
void GoToPrevious()
37+
{
38+
CalendarDate = CalendarDate.AddMonths(-1);
39+
}
40+
41+
void SelectToday()
42+
{
43+
CalendarValue = DateTime.Today;
44+
CalendarDate = DateTime.Today;
45+
}
46+
47+
void GoToNext()
48+
{
49+
CalendarDate = CalendarDate.AddMonths(1);
50+
}
51+
}
52+
````
53+
54+
55+
## See Also
56+
57+
* [Calendar Templates Overview]({%slug calendar-templates-overview%})
58+
* [Live Demo: Calendar Templates](https://demos.telerik.com/blazor-ui/calendar/templates)

‎components/calendar/templates/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ The Calendar component provides templates for:
2222

2323
* [Century Cell]({%slug calendar-templates-century%}) - the rendering of each cell in the Century view.
2424

25-
25+
* [Header Template]({%slug calendar-templates-header%}) - the header segment of the Calendar.
2626

2727
## See Also
2828

‎components/datepicker/header-template.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Header Template
3+
page_title: DatePicker - Header Template
4+
description: Use custom rendering in the calendar header of the DatePicker for Blazor.
5+
slug: datepicker-header-template
6+
tags: telerik,blazor,datepicker,template
7+
published: True
8+
position: 15
9+
---
10+
11+
# Header Template
12+
13+
The `<HeaderTemplate>` allows you to customize the header of the calendar popup. If the application defines this template, the component will not render any of the built-in buttons and labels in the calendar header area.
14+
15+
The example below is using a [DatePicker reference and methods]({%slug components/datepicker/overview%}#datepicker-reference-and-methods).
16+
17+
>caption Header template with custom content in the DatePicker Calendar header
18+
19+
````CSHTML
20+
<TelerikDatePicker @bind-Value="@PickerValue" @ref="Picker">
21+
<HeaderTemplate>
22+
23+
<span>
24+
<TelerikButton OnClick="@GoToPrevious" Icon="arrow-60-left" Title="Go to Previous Month"></TelerikButton>
25+
<TelerikButton OnClick="@SelectToday">Today</TelerikButton>
26+
<TelerikButton OnClick="@GoToNext" Icon="arrow-60-right" Title="Go to Next Month"></TelerikButton>
27+
</span>
28+
<span style="padding-right: .6em;">
29+
<TelerikIcon Icon="parameter-date-time" /> @ViewDate.Month / @ViewDate.Year
30+
</span>
31+
</HeaderTemplate>
32+
</TelerikDatePicker>
33+
34+
@code {
35+
TelerikDatePicker<DateTime> Picker { get; set; }
36+
DateTime PickerValue { get; set; } = DateTime.Now.AddMonths(-2);
37+
DateTime ViewDate { get; set; } = DateTime.Now.AddMonths(-2);
38+
39+
void GoToPrevious()
40+
{
41+
ViewDate = ViewDate.AddMonths(-1);
42+
Picker.NavigateTo(ViewDate, CalendarView.Month);
43+
}
44+
45+
void SelectToday()
46+
{
47+
PickerValue = DateTime.Today;
48+
Picker.Close();
49+
}
50+
51+
void GoToNext()
52+
{
53+
ViewDate = ViewDate.AddMonths(1);
54+
Picker.NavigateTo(ViewDate, CalendarView.Month);
55+
}
56+
}
57+
````

‎components/datepicker/increment-steps.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Steps for changing the value in the Date Picker for Blazor.
55
slug: datepicker-steps
66
tags: telerik,blazor,Datepicker,step
77
published: true
8-
position: 15
8+
position: 10
99
---
1010

1111
# Steps

‎components/datepicker/overview.md‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,10 @@ The Blazor Date Picker generates events that you can handle and further customiz
5151

5252
You can ensure that the component value is acceptable by using the built-in validation. [Read more about input validation...]({%slug common-features/input-validation%}).
5353

54+
## Header Template
55+
56+
The DatePicker allows you to customize the rendering of the Calendar popup header. Learn more from the [Header Template article]({%slug datepicker-header-template%}).
57+
5458
## Parameters
5559

5660
The Blazor Date Picker provides various parameters that allow you to configure the component:
@@ -93,20 +97,43 @@ You can find more options for customizing the Date Picker styling in the [Appear
9397

9498
@[template](/_contentTemplates/date-inputs/format-placeholders.md#format-placeholder)
9599

96-
## Component Reference
100+
## DatePicker Reference and Methods
101+
102+
Add a reference to the component instance to use the [Date Picker's methods](/blazor-ui/api/Telerik.Blazor.Components.TelerikDatePicker-1).
103+
104+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
97105

98-
Add a reference to the Date Picker instance to use its methods.
106+
| Method | Description |
107+
| --- | --- |
108+
| `Close` | Closes the Calendar popup. |
109+
| `FocusAsync` | Focuses the Date Picker textbox. |
110+
| `NavigateTo` | Navigates to a specified date and view. The method expects a `DateTime` and `CalendarView` arguments. |
111+
| `Open` | Opens the Calendar popup. |
112+
| `Refresh` | Re-renders the Calendar popup. |
99113

100114
````CSHTML
101-
@using Telerik.Blazor.Components
115+
<TelerikDatePicker @ref="@Picker"
116+
@bind-Value="@PickerValue"
117+
Width="200px" />
102118
103-
<TelerikDatePicker @ref="theDatePicker" @bind-Value="datePickerValue"></TelerikDatePicker>
119+
<TelerikButton OnClick="@FocusPicker">Focus DatePicker</TelerikButton>
120+
<TelerikButton OnClick="@OpenPicker">Open DatePicker</TelerikButton>
104121
105122
@code {
106-
DateTime datePickerValue { get; set; } = DateTime.Now;
123+
DateTime PickerValue { get; set; } = DateTime.Now;
124+
125+
// the component type depends on the value type
126+
TelerikDatePicker<DateTime> Picker { get; set; }
127+
128+
async Task FocusPicker()
129+
{
130+
await Picker.FocusAsync();
131+
}
107132
108-
Telerik.Blazor.Components.TelerikDatePicker<DateTime> theDatePicker;
109-
// The type of the component depends on the type of the value.
133+
void OpenPicker()
134+
{
135+
Picker.Open();
136+
}
110137
}
111138
````
112139

‎components/daterangepicker/header-template.md‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
title: Header Template
3+
page_title: DateRangePicker - Header Template
4+
description: Use custom rendering in the calendar header of the Blazor DateRangePicker.
5+
slug: daterangepicker-header-template
6+
tags: telerik,blazor,daterangepicker,template
7+
published: True
8+
position: 15
9+
---
10+
11+
# Header Template
12+
13+
The `<HeaderTemplate>` allows you to customize the header of the calendar popup. If the application defines this template, the component will not render any of the built-in buttons and labels in the calendar header area.
14+
15+
The example below is using a [DateRangePicker reference and methods]({%slug daterangepicker-overview%}#daterangepicker-reference-and-methods).
16+
17+
>caption Header template with custom content in the DateRangePicker Calendar header
18+
19+
````CSHTML
20+
<TelerikDateRangePicker StartValue="@StartDate"
21+
EndValue="@EndDate"
22+
Format="dd MMMM yyyy"
23+
StartValueChanged="@( (DateTime? newStart) => StartChanged(newStart) )"
24+
EndValueChanged="@( (DateTime? newEnd) => EndChanged(newEnd) )"
25+
Min="@MinDate" Max="@MaxDate"
26+
@ref="@Picker">
27+
<HeaderTemplate>
28+
<span>
29+
<TelerikButton OnClick="@GoToPrevious" Icon="arrow-60-left" Title="Go to Previous Month"></TelerikButton>
30+
<TelerikButton OnClick="@SelectToday">Today</TelerikButton>
31+
<TelerikButton OnClick="@GoToNext" Icon="arrow-60-right" Title="Go to Next Month"></TelerikButton>
32+
</span>
33+
<span style="padding-right: .6em;">
34+
<TelerikIcon Icon="parameter-date-time" /> Showing
35+
<strong>
36+
@ViewDate.Month/@ViewDate.Year - @ViewDate.AddMonths(1).Month/@ViewDate.AddMonths(1).Year
37+
</strong>
38+
</span>
39+
</HeaderTemplate>
40+
</TelerikDateRangePicker>
41+
42+
@code {
43+
TelerikDateRangePicker<DateTime?> Picker { get; set; }
44+
45+
DateTime? StartDate { get; set; } = DateTime.Now;
46+
DateTime? EndDate { get; set; } = DateTime.Now.AddDays(10);
47+
48+
DateTime MinDate = new DateTime(1990, 1, 1, 0, 0, 0);
49+
DateTime MaxDate = new DateTime(2029, 12, 31, 0, 0, 0);
50+
51+
DateTime ViewDate { get; set; } = DateTime.Now;
52+
53+
void StartChanged(DateTime? newStart)
54+
{
55+
StartDate = newStart;
56+
57+
if (newStart.HasValue)
58+
{
59+
ViewDate = newStart.Value;
60+
}
61+
else
62+
{
63+
ViewDate = DateTime.Now;
64+
}
65+
}
66+
67+
void EndChanged(DateTime? newEnd)
68+
{
69+
EndDate = newEnd;
70+
}
71+
72+
void GoToPrevious()
73+
{
74+
ViewDate = ViewDate.AddMonths(-1);
75+
Picker.NavigateTo(ViewDate, CalendarView.Month);
76+
}
77+
78+
void SelectToday()
79+
{
80+
ViewDate = DateTime.Now;
81+
Picker.NavigateTo(ViewDate, CalendarView.Month);
82+
}
83+
84+
void GoToNext()
85+
{
86+
ViewDate = ViewDate.AddMonths(1);
87+
Picker.NavigateTo(ViewDate, CalendarView.Month);
88+
}
89+
}
90+
````

0 commit comments

Comments
 (0)