Skip to content

Commit d1417fb

Browse files
author
Elvani, Hussam
committed
Added Allowed Dates Implementation
The source includes a working project of the AllowedDates implementaion of TelerikCalendar Blazor component.
1 parent 29919dd commit d1417fb

28 files changed

+1319
-0
lines changed

‎calendar/allowed-dates/App.razor

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Router AppAssembly="@typeof(Program).Assembly">
2+
<Found Context="routeData">
3+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
4+
</Found>
5+
<NotFound>
6+
<LayoutView Layout="@typeof(MainLayout)">
7+
<p>Sorry, there's nothing at this address.</p>
8+
</LayoutView>
9+
</NotFound>
10+
</Router>

‎calendar/allowed-dates/Pages/Error.razor

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@page "/error"
2+
3+
<h1 class="text-danger">Error.</h1>
4+
<h2 class="text-danger">An error occurred while processing your request.</h2>
5+
6+
<h3>Development Mode</h3>
7+
<p>
8+
Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
9+
</p>
10+
<p>
11+
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
12+
It can result in displaying sensitive information from exceptions to end users.
13+
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
14+
and restarting the app.
15+
</p>

‎calendar/allowed-dates/Pages/Index.razor

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@page "/"
2+
3+
<TelerikCalendar Min="@min"
4+
Max="@max"
5+
Views="@NumOfViews"
6+
Date="@initialDate"
7+
DateChanged="@DateChangedHandler"
8+
DisabledDates="@DisabledDates"
9+
SelectionMode="CalendarSelectionMode.Multiple" />
10+
11+
@code{
12+
DateTime initialDate { get; set; } = DateTime.Now;
13+
DateTime min;
14+
DateTime max;
15+
16+
int NumOfViews = 3;
17+
18+
// set dates the user can't select
19+
private List<DateTime> DisabledDates = new List<DateTime>() { };
20+
21+
private List<DateTime> AllowedDates = new List<DateTime>() { };
22+
23+
protected override void OnInitialized()
24+
{
25+
min = new DateTime(initialDate.AddYears(-5).Year, 1, 1);
26+
max = new DateTime(initialDate.AddYears(5).Year, 12, 31);
27+
28+
//Populate a list of allowed dates
29+
for (DateTime i = new DateTime(initialDate.Year, 01, 01); i < new DateTime(initialDate.AddYears(1).Year, 01, 01); i = i.AddDays(1))
30+
{
31+
if (i.Date.Day % 2 is 0)
32+
AllowedDates.Add(i);
33+
}
34+
35+
//Call to fill initial dispaly page with disabled/allowed
36+
DisableDates(initialDate);
37+
}
38+
39+
void DateChangedHandler(DateTime firstDateOfNewRange)
40+
{
41+
DisableDates(firstDateOfNewRange);
42+
43+
// if you don't do this, navigating adjacent ranges will be effectively disabled
44+
initialDate = firstDateOfNewRange;
45+
}
46+
47+
void DisableDates(DateTime currentDate)
48+
{
49+
//Add the disabled dates we calculated into the DisabledDates parameter
50+
var disabledDates = GetDisabledDates(currentDate);
51+
DisabledDates = new List<DateTime>(disabledDates);
52+
}
53+
54+
IEnumerable<DateTime> GetDisabledDates(DateTime rangeStart)
55+
{
56+
//Start date of currently displayed month(s)
57+
var start = new DateTime(rangeStart.Year, rangeStart.Month, 1);
58+
//Compensate for the number of months displayed by the views number
59+
var end = start.AddMonths(NumOfViews).AddDays(-1);
60+
61+
//Enumerate the number of days from the visible start-date till the end-date of the visible views
62+
//Except the dates available in AllowedDates
63+
var dateRange = Enumerable
64+
.Range(0, (int)(end - start).TotalDays + 1)
65+
.Select(i => start.AddDays(i))
66+
.Except(AllowedDates);
67+
68+
return dateRange;
69+
}
70+
}

‎calendar/allowed-dates/Pages/_Host.cshtml

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@page "/"
2+
@namespace allowed_dates.Pages
3+
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
4+
@{
5+
Layout = null;
6+
}
7+
8+
<!DOCTYPE html>
9+
<html lang="en">
10+
<head>
11+
<meta charset="utf-8" />
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
<title>Telerik Allowed Dates</title>
14+
<base href="~/" />
15+
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
16+
<link href="css/site.css" rel="stylesheet" />
17+
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
18+
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
19+
</head>
20+
<body>
21+
<app>
22+
<component type="typeof(App)" render-mode="ServerPrerendered" />
23+
</app>
24+
25+
<div id="blazor-error-ui">
26+
<environment include="Staging,Production">
27+
An error has occurred. This application may no longer respond until reloaded.
28+
</environment>
29+
<environment include="Development">
30+
An unhandled exception has occurred. See browser dev tools for details.
31+
</environment>
32+
<a href="" class="reload">Reload</a>
33+
<a class="dismiss">🗙</a>
34+
</div>
35+
36+
<script src="_framework/blazor.server.js"></script>
37+
</body>
38+
</html>

‎calendar/allowed-dates/Program.cs

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
using Microsoft.AspNetCore.Hosting;
2+
using Microsoft.Extensions.Hosting;
3+
4+
namespace allowed_dates
5+
{
6+
public class Program
7+
{
8+
public static void Main(string[] args)
9+
{
10+
CreateHostBuilder(args).Build().Run();
11+
}
12+
13+
public static IHostBuilder CreateHostBuilder(string[] args) =>
14+
Host.CreateDefaultBuilder(args)
15+
.ConfigureWebHostDefaults(webBuilder =>
16+
{
17+
webBuilder.UseStartup<Startup>();
18+
});
19+
}
20+
}

‎calendar/allowed-dates/Properties/launchSettings.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"iisSettings": {
3+
"windowsAuthentication": false,
4+
"anonymousAuthentication": true,
5+
"iisExpress": {
6+
"applicationUrl": "http://localhost:11634",
7+
"sslPort": 44344
8+
}
9+
},
10+
"profiles": {
11+
"IIS Express": {
12+
"commandName": "IISExpress",
13+
"launchBrowser": true,
14+
"environmentVariables": {
15+
"ASPNETCORE_ENVIRONMENT": "Development"
16+
}
17+
},
18+
"allowed_dates": {
19+
"commandName": "Project",
20+
"launchBrowser": true,
21+
"environmentVariables": {
22+
"ASPNETCORE_ENVIRONMENT": "Development"
23+
},
24+
"applicationUrl": "https://localhost:5001;http://localhost:5000"
25+
}
26+
}
27+
}

‎calendar/allowed-dates/README.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Telerik Calendar - Allowed Dates
2+
3+
This project demonstrates how you can implement an allowed dates parameter to disable dates
4+
that are not included in your `AllowedDates` list.
5+
6+
## Description
7+
8+
Assume you have a calendar in which you want to disable only a small list of dates, you can achieve that using the clendars `DisabledDates` parameter, you can read more about it [here][TelerikCalendarSelection].
9+
10+
However, what if what you are trying to achieve is the opposite, you have a small list of allowed dates and you wish to disable the dates that are not included in your list.
11+
12+
## Implementation
13+
14+
As shown in [Index.razor][SourceCode] you have to call `DisableDates(DateTime)` function and pass it a date that is currently visible in your calendar.
15+
This will detect what month(s) are currently displayed by your calendar and add the displayed days to the `DisabledDates` list iff they are not available in your `AllowedDates` list.
16+
17+
What happens if the user changes the current view?
18+
Using the `DateChangedHandler` we call the `DisableDates(DateTime)` function to clear the old `DisabledDates` list and create a new list that contains the disabled days to the navigated view.
19+
20+
The project contains the following methods:
21+
- `protected override void OnInitialized()`: Initializes the current view
22+
- `void DateChangedHandler(DateTime)`: Is called when the user changes the current view
23+
- `void DisableDates(DateTime)`: Is called to refresh `DisabledDates` list accordingly.
24+
- `IEnumerable<DateTime> GetDisabledDates(DateTime)`: Gets the date range that are currently displayed by the view excep the dates already available in the `AllowedDates` list.
25+
26+
### Thanks
27+
This contribution was made by [Hüssam Elvani][Contributor].
28+
29+
[TelerikCalendarSelection]: <https://docs.telerik.com/blazor-ui/components/calendar/selection>
30+
[SourceCode]: <https://github.com/telerik/blazor-ui/blob/master/calendar/allowed-dates/Pages/Index.razor>
31+
[Contributor]: <http://github.com/hussamelvani>

‎calendar/allowed-dates/Shared/MainLayout.razor

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@inherits LayoutComponentBase
2+
3+
<TelerikRootComponent>
4+
<div class="sidebar">
5+
<NavMenu />
6+
</div>
7+
8+
<div class="main">
9+
<div class="content px-4">
10+
@Body
11+
</div>
12+
</div>
13+
</TelerikRootComponent>

‎calendar/allowed-dates/Shared/NavMenu.razor

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div class="top-row pl-4 navbar navbar-dark">
2+
<a class="navbar-brand" href="">Telerik Allowed Dates</a>
3+
<button class="navbar-toggler" @onclick="ToggleNavMenu">
4+
<span class="navbar-toggler-icon"></span>
5+
</button>
6+
</div>
7+
8+
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
9+
<ul class="nav flex-column">
10+
<li class="nav-item px-3">
11+
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
12+
<span class="oi oi-home" aria-hidden="true"></span> Home
13+
</NavLink>
14+
</li>
15+
</ul>
16+
</div>
17+
18+
@code {
19+
private bool collapseNavMenu = true;
20+
21+
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
22+
23+
private void ToggleNavMenu()
24+
{
25+
collapseNavMenu = !collapseNavMenu;
26+
}
27+
}

‎calendar/allowed-dates/Startup.cs

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
using Microsoft.AspNetCore.Builder;
2+
using Microsoft.AspNetCore.Hosting;
3+
using Microsoft.Extensions.Configuration;
4+
using Microsoft.Extensions.DependencyInjection;
5+
using Microsoft.Extensions.Hosting;
6+
7+
namespace allowed_dates
8+
{
9+
public class Startup
10+
{
11+
public Startup(IConfiguration configuration)
12+
{
13+
Configuration = configuration;
14+
}
15+
16+
public IConfiguration Configuration { get; }
17+
18+
// This method gets called by the runtime. Use this method to add services to the container.
19+
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
20+
public void ConfigureServices(IServiceCollection services)
21+
{
22+
services.AddRazorPages();
23+
services.AddServerSideBlazor();
24+
25+
services.AddTelerikBlazor();
26+
}
27+
28+
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
29+
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
30+
{
31+
if (env.IsDevelopment())
32+
{
33+
app.UseDeveloperExceptionPage();
34+
}
35+
else
36+
{
37+
app.UseExceptionHandler("/Error");
38+
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
39+
app.UseHsts();
40+
}
41+
42+
app.UseHttpsRedirection();
43+
app.UseStaticFiles();
44+
45+
app.UseRouting();
46+
47+
app.UseEndpoints(endpoints =>
48+
{
49+
endpoints.MapBlazorHub();
50+
endpoints.MapFallbackToPage("/_Host");
51+
});
52+
}
53+
}
54+
}

‎calendar/allowed-dates/_Imports.razor

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@using System.Net.Http
2+
@using Microsoft.AspNetCore.Authorization
3+
@using Microsoft.AspNetCore.Components.Authorization
4+
@using Microsoft.AspNetCore.Components.Forms
5+
@using Microsoft.AspNetCore.Components.Routing
6+
@using Microsoft.AspNetCore.Components.Web
7+
@using Microsoft.JSInterop
8+
@using allowed_dates
9+
@using allowed_dates.Shared
10+
@using Telerik.Blazor
11+
@using Telerik.Blazor.Components

‎calendar/allowed-dates/allowed-dates.sln

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio 15
4+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "allowed_dates", "allowed_dates.csproj", "{2A51C494-FB05-4112-88B3-587A78E45268}"
5+
EndProject
6+
Global
7+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
8+
Debug|Any CPU = Debug|Any CPU
9+
Release|Any CPU = Release|Any CPU
10+
EndGlobalSection
11+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
12+
{2A51C494-FB05-4112-88B3-587A78E45268}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
13+
{2A51C494-FB05-4112-88B3-587A78E45268}.Debug|Any CPU.Build.0 = Debug|Any CPU
14+
{2A51C494-FB05-4112-88B3-587A78E45268}.Release|Any CPU.ActiveCfg = Release|Any CPU
15+
{2A51C494-FB05-4112-88B3-587A78E45268}.Release|Any CPU.Build.0 = Release|Any CPU
16+
EndGlobalSection
17+
EndGlobal

‎calendar/allowed-dates/allowed_dates.csproj

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>netcoreapp3.1</TargetFramework>
5+
</PropertyGroup>
6+
7+
<ItemGroup>
8+
<PackageReference Include="Telerik.UI.for.Blazor" Version="2.10.0" />
9+
</ItemGroup>
10+
</Project>

‎calendar/allowed-dates/appsettings.Development.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"DetailedErrors": true,
3+
"Logging": {
4+
"LogLevel": {
5+
"Default": "Information",
6+
"Microsoft": "Warning",
7+
"Microsoft.Hosting.Lifetime": "Information"
8+
}
9+
}
10+
}

‎calendar/allowed-dates/appsettings.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"Logging": {
3+
"LogLevel": {
4+
"Default": "Information",
5+
"Microsoft": "Warning",
6+
"Microsoft.Hosting.Lifetime": "Information"
7+
}
8+
},
9+
"AllowedHosts": "*"
10+
}

‎calendar/allowed-dates/wwwroot/css/bootstrap/bootstrap.min.css

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎calendar/allowed-dates/wwwroot/css/bootstrap/bootstrap.min.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)