Any Example On Calendar in Blazor WebAssembly

Question

Hello,
I want to create a Full Calendar / Event Calendar in Blazor WebAssembly
Is their any example on it?

Answer 1

• https://razor.radzen.com/scheduler
• https://blazor.syncfusion.com/documentation/calendar/getting-started/

Answer 2

Hi, @PrathameshShende-2581

Blazor Outlook Calendar is the a Blazor WebAssembly Client-Side application to manage your events synced with Microsoft Outlook Calendar using Microsoft Graph API.

A Blazor app can invoke JavaScript functions from .NET methods and .NET methods from JavaScript functions. That means you can import all the JavaScript calendar components in your Blazor app. TOAST UI Calendar is a JavaScript calendar with most stars that has everything you need.

Those calendar components mentioned by @Michael Washington are great and they have dedicated support but not free.

+Update 25/12/2020
For FullCalendar, you could follow the steps as BlazorFullCalendar. Blazor WebAssembly is same as Balzor Server App to include the project into your own Blazor solution.

---

If the answer doesn’t solve your issue, please provide more details of error that will help us track down what’s happening.
If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,
Michael Wang

Answer 3

this is my code
@Anonymous "/"
@inject IJSRuntime IJSRuntime
<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<div id="calendar">  
</div>  

@Aidan Wick
{ protected override async Task OnAfterRenderAsync(bool firstRender)
{
await IJSRuntime.InvokeVoidAsync("fulcalendar");
}
}

Answer 4

site.js

window.fulcalendar = () => {
$(function () {
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
,
events: [
{
title: 'All Day Event',
start: '2020-09-01'
},
{
title: 'Long Event',
start: '2020-09-07',
end: '2020-09-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-09-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2020-09-16T16:00:00'
},
{
title: 'Conference',
start: '2020-09-11',
end: '2020-09-13'
},
{
title: 'Meeting',
start: '2020-09-12T10:30:00',
end: '2020-09-12T12:30:00'
},
{
title: 'Lunch',
start: '2020-09-12T12:00:00'
},
{
title: 'Meeting',
start: '2020-09-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2020-09-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2020-09-28'
}
]
});
calendar.render();
});
});
};

Answer 5

Hi, Check our Syncfusion Blazor Calendar which briefly explains how to include Blazor Calendar component in your Blazor Server App and Blazor WebAssembly App.

https://www.syncfusion.com/blazor-components/blazor-calendar