tossnet / blazor-calendar

Yearly, monthly and weekly calendar Blazor Component . For use with .NET 6.0 or higher Blazor applications

Blazor-Calendar

For Blazor Server or Blazor WebAssembly

Live demo

Blazor webassembly : https://tossnet.github.io/Blazor-Calendar/monthlyview

Installation

Latest version in here:

To Install

Install-Package BlazorCalendar

or

dotnet add package BlazorCalendar

For client-side and server-side Blazor - add script section to _Layout.cshtml (head section)

 <link href="_content/BlazorCalendar/BlazorCalendar.css" rel="stylesheet" />

Documentation

https://github.com/tossnet/Blazor-Calendar/wiki

Release Notes

Blazor-Calendar/pull/13

Version 2.6.5

• Add WeekView (thanks BruderJohn ) Pull #11

Version 2.6.4

• Use task IDs to identify containing div (for JS extensibility) Pull #11

Version 2.6.3

• In the monthly view, the calendar displays 3 items Issue #8

Version 2.6.1

• MonthlyView : new property HighlightToday (boolean) Merge #9

Version 2.5.3

• MonthlyView : fix: duplication of the number of additional tasks Merge #7

Version 2.5.2

• MonthlyView : return the day on the event ClickEmptyDayParameter. Merge #5

Version 2.5.1

• add new prop named (int) Type
• annualView : return the day on the event ClickEmptyDayParameter

Version 2.5.0

• new property "FillStyle" (Fill, BackwardDiagonal, ZigZag, Triangles, CrossDots)

Version 2.4.4

• Issue #3

Version 2.4.3

• Monthly View : we could move a task even if we didn't allow the move

Version 2.4.2

• Issue #2

Version 2.4.1

• add white background of headers.
• AnnualView : lightly rounded edge.
• In the monthlyview, If a task has a line break (next week) the left edge is not displayed anymore.

Version 2.4.0

• add white background of headers.
• In the monthlyview, display the start time if it exists.

Version 2.3.0

• improved positioning of tasks in the monthly view.
• AnnualView : add new event HeaderClick that returns a DateTime (the month clicked).
• Improvement of the css responsive .

Version 2.2.0

• fix bug.
• added the NotBeDraggable property.

Version 2.1.0

• css style improvement.
• Addition of hatching in the cells at the end of the month.
• Add a new view called MonthlyView.

⚠️ Breaking changes ⚠️

Upgrading from 1.0 to 2.0

• before version 2 :

 <link href="_content/BlazorCalendar/AnnualCalendar.css" rel="stylesheet" />

<AnnualCalendar  FirstDate="today" Months="months"  TasksList="TasksList.ToArray()" />

• from version 2 :

 <link href="_content/BlazorCalendar/BlazorCalendar.css" rel="stylesheet" />

<CalendarContainer  FirstDate="today"  TasksList="TasksList.ToArray()" >
   <AnnualView  Months="months" />
</CalendarContainer>

Reason

I anticipate creating another monthly view

[RoadMap]

• set a customizable background color for the current day
• Add a list of remarkable days (specific background). The user could send the holidays for example

blazor-calendar's Issues

[Feature Request] Highlight TODAY in monthly view

Will make it easier to find today's tasks.
Also add a helper function to jump back to current month?

[Feature Request] View Calendar Week

Add Pls small feature to show Calendar Week on Calendar.

Null Reference Exception Upon Dragging a Cell

Starting the app and dragging a cell. results in a null ref exception:

blazor.webassembly.js:1 
        
       crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Arg_NullReferenceException
System.NullReferenceException: Arg_NullReferenceException
   at BlazorWebAssembly.Pages.Index.DropTask(DragDropParameter dragDropParameter)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object , BindingFlags , Binder , Object[] , CultureInfo )
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at BlazorCalendar.AnnualView.HandleDayOnDrop(DateTime day)
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState )

Monthly view : duplication of the number of additional tasks

ID can only be an Integer

Thank you for writing this and saving me so much time.

I actually have a couple things.

I store data as guids. In order for the click function to work, I need the ID to be a guid. I know I can work around it but it would be nice if that was an option.

TaskClick does not work in WeekView

The TaskClick callback is not executed in WeekView.

Actual Result:
Callback is not executed

Expected Result:
Callback is executed

Steps to reproduce:

1. Have a week view with tasks
2. Add a callback to the TaskClick Parameter that logs the passed data
3. Observe that there are no logs

More flexible tasks functionality

Will be there maybe a functionality like changing or setting own tasks list as the not the Tasks objects but own objects?
And the developer then would select what data and when is showed on the task bar.

For now I just use the Tasks code as the guid id for my own objects and when task is clicked then it shows my object under the calendar with my all needed info, but it would be nice to use the one list for all calendar instead multiple lists, and foreign keys or something.

# of items in a given day in Monthly View

Is there a way to edit the content to customize the display of data in a given day?

Right now, due to styling, it appears that there can only be 2 items listed on a given day.

There seems to be ample whitespace around the items to add at least one more item.

WeeklyView

Hi,

Is it possible to start the WeeklyView with Monday instead of Sunday based on current culture?
(as MonthView)
Regards, Nicolas

Monthly/Annualy View aren't displayed right in Blazor Server

I am using the sample code for the Blazor Server Application but the Monthly and Annual Views are not displayed right (see images below).

DayClick does not work correctly in WeekView

When clicking on a day in WeekView, the DayClick is not called when the day already contains a Task. Furthermore, clicking on an empty day the DateTime passed to the callback always has the time 12:00:00 AM (not sure if this is intended or not)

Actual Result:
Callback is not executed when day contains a Task
Callback is executed with incomplete data

Expected Result:
Callback is executed on days that already contain Tasks and include the time of the day clicked on.

Steps to Reproduce:

1. Create a WeekView with a day that contains a Task
2. Assign a callback to the DayClick Parameter of the WeekView (e.g. simply log the passed data)
3. Compare the logs (or lack thereof) when clicking on different days

Implement Daily View

For developing an actual calendar application, a daily view would be needed showing the days hours so all appointments or tasks would be visual throughout the day.