Any Example On Calendar in Blazor WebAssembly

Prathamesh Shende 376 Reputation points
2020-12-22T19:57:09.58+00:00

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

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,377 questions
0 comments No comments
{count} votes

5 answers

Sort by: Most helpful
  1. Michael Wang-MSFT 1,051 Reputation points
    2020-12-23T03:09:00.437+00:00

    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

    0 comments No comments

  2. Prathamesh Shende 376 Reputation points
    2020-12-23T04:50:56.577+00:00

    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");
    }
    }

    0 comments No comments

  3. Prathamesh Shende 376 Reputation points
    2020-12-23T04:51:30.75+00:00

    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();
    });
    });
    };


  4. GT 0 Reputation points
    2023-02-15T11:54:50.0333333+00:00

    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

    0 comments No comments