danheron / heron.mudcalendar Goto Github PK

Firstly, thank you for a great component!

I have a quick query/issue that I'm wondering if you could please take a look at. If I am viewing the calendar for today's date (08/11/23), and press the back button to switch to October, the StartDate in the DateRange object is 25/09/23 which makes it difficult to filter my bookings by the month of October. I wouldn't be interested in the September bookings in this instance. The idea would be for me to only retrieve bookings for the month visible (aka October) so I could send all bookings out on a month by month basis.

Thank you.

hi,

I noticed that the calendar creates its own scrollbar, which is fine, unfortunately for a dynamic design (browser not in fullscreen or page on mobile device) the height doesn't adjust to the browser window, which causes the page to be scrolled as well and with this there are two scrollbars and the navigation for going up and down is frustrating.

since I'm quite new to Blazor in general, I haven't found a way to fix this myself, so that the height would always be the max available window height (or slightly less). I have seen this working with another scheduler, so it should be possible.

another related issue is, that in Firefox the outer border at the bottom overlaps with the grid lines. this seems to be only cosmetical, but can be distracting.
I would like to make this work in all (common) browsers and not rely on the user to use a specific browser for this.

thanks for your time and effort.

Dynamically set the start time in each view

For example, to add a "New Appointment" button.

There's an event callback for a Cell Click, but nothing for the Item Clicked. If there are multiple items on a day, it would be useful to have a callback for clicking on the item so a dialog could be opened to view the details of the event. This would be useful for integration with other calendar APIs such as Google or Outlook Calendar, for showing additional information about the event.

First of all, I want to thank you for your awesome work! =)

I have set up a clean .NET MAUI Blazor app project and the rendering is broken. In Blazor WASM everything is fine.

I'm using:

• MudCalendar 1.0.5
• MudBlazor 6.2.2

Perhaps its somehow related to #12

Add options to Show/HIde DatePicker and Next/Prev buttons.

In the day view it should be clearly recognizable, preferably by a color configurable line, what time it is currently.

mud-cal-month-view class should include height 100%.

A button "Today" with the date navigation would be useful for returning to the month/week/day that contains today's date. With inclusion of option to show/hide it, like you do for back/next/date selection.

Hello, first of all I would like to congratulate you on the construction of this component, I believe that this package should be part of the standard MudBlazor library.

I would like to suggest an improvement: Currently, I am building software for the Brazilian market and we need to change the label text "Week" to "Semana", "Day" to "Dia", and "Month" to "Mês". I saw that you get the texts for these labels from the Enum name calling the method Enum.GetName(), would it be possible to parameterize them? This way we can translate your component into any language, such as Portuguese, Spanish, Japanese, etc.

I want to use this component in my blazor web app for a personal trainer friend so clients can book appointments, but i want the calendar to be in another language than english, how could i do that? I see there are some localization files in the repo but how do i display that and display the day names in that language?

Might as well ask this here too. If i want the user to click on the appointment he wants to book and some sort of popup i should just use CellClicked event? Doesn't CellClicked pass only the date though? I want the user to be abel to click on the CalendarItem object

Hi, I like this extension :)

But I found a bug, when you change month with the DatePicker the Calender is not updated.
And when you change month with the arrows the DatePicker is not updated.

And also a future request, can you make it possible to hide the date picker and some views (month/week/day)?

I can not compile your project. It can not find using MudBlazor.Docs.Extensions;

When adding events over multiple days they only show on the first day. All events also do not seem to show for the whole period from start to end but just at the start time for a fixed height.

Hi Dan,

Is there a way to load the MudCalendar to start with a specific month?

For example, at the time of typing this (December 6, 2023), MudCalendar defaults to displaying the month of December 2023 (in Month View). If I need to display the MudCalendar to display the month of February 2021 from the get-go for legacy/historical reasons, how would I go about doing that?

To reproduce:

<MudCalendar View="CalendarView.Week" DateRangeChanged="DateRangeChanged" />
@code {
private void DateRangeChanged(DateRange dateRange}
{
// Code here
}
}

The page will load with the calendar showing the week view

Change the view by clicking on month or day
Expected: The view changes to the appropriate month/day view
Actual: The view doesn't change until you click a second time

Awesome library thank you so much!

Currently a library consumer is forced to use any of the intervals as specified in:

For the project I am currently working on I would preferably have a custom interval of 3 hours.
Let me know if this is something I can pickup and what the preferred way would be to implement this.

Thanks!

Set height of a cell in every view. I can't display more then two/three items in the same cell in weekview.

It should be recognizable that an appointment can go over days instead of drawing it each time as a single appointment.

The fields get a scrollbar, when the content is too big:

Hi,

If you have multiple items on the same day, they are in random order. Can you sort them by Start time?

I currently am running on .net7 and have installed the library using nugget package manager or by hand with command promp dotnet add command.


As you will see in this screenshot, the calendar is here but seems to have no CSS nor JS included with the package.
I can't find any reference to the JS or CSS in my Index.html file either

link href="_content/Heron.MudCalendar/Heron.MudCalendar.min.css" rel="stylesheet"
script src="_content/Heron.MudCalendar/Heron.MudCalendar.js"

Those line made the library work but are not mentioned in any of the readme files.

How I used the lib :
Installed via Nugget
Added the import (like in the readme)
Added the in my file as described by the readme.

Can we do a resources style calendar?

Day and Week views are in 24-hour format. Can you give an option to display it in either 24-hour or 12-hour format (AM/PM)?

Hello,
First of all, thank you for this wonderful calendar. I use it exclusively on my site.

But I will have a request to submit.
Would it be possible to have a smartphone view? A bit like Gmail or ICal.
Like original date picker in mudblazor with round day ?

Thank you very much and best regards

In Firefox the outer border at the bottom overlaps with the grid lines. this seems to be only cosmetical, but can be distracting.

I have a dynamic application that relies on using HeadContent for dynamic meta and styling information. When inserting (with no parameters specified) onto a page, my dynamic HeadContent gets overwritten. I'm assuming this is because MudCalendar is using HeadContent to inject it's CSS/Scripts. HeadContent is not additive. The last call to HeadContent will always override what's in there previously.

To reproduce, create a page using
Add to the page
Notice that the HeadContent is overwritten.

Hi,

I faces two problem one that the JS is not found as attached screenshots

I managed to have the script manually and I face other problem when I moved between days or months after multiple click I receive an exception related to SignalR WS, it is look like the component disposed and lost the track

attached screenshots

and thanks for your great Calendar :)

Hey,

is tehre a way to disable (hide) the time at the week view?

Cells in day and week views are always clickable even when no events are attached.

I'm trying to test CellClicked with this code but it won't work. Is there something wrong?

Hi,
First of all, i would like to thank you for this component.

I'm facing a problem when using the parameter CurrentDay.
Since there is not binding, I'm unable to keep the value of CurrentDay synced with the one of the page that is hosting the component.
For example, when using the Day View, if I press the NextDay button the calendar does not change day.

Maybe introducing a CurrentDayChanged Parameter could solve this issue?

The calendar shows only 1 calendar, we have a requirement that it must show multiple calendars in the day view (e.g. a shared calendar in google calendar) for comparison.

Will this be implemented? This there an easy way to implement this?

When you navigate with the DatePicker, runs Invoke only one DateRangeChanged event, but with the previous/next buttons, it runs twice.

Using an example from the documentation, you can reproduce this behavior:
Loading Data exemple

@inject EventService EventService

<MudCalendar Items="_events" MonthCellMinHeight="100" DateRangeChanged="DateRangeChanged" />
@code{

    private List<CalendarItem> _events = new();

    private void DateRangeChanged(DateRange dateRange)
    {
        // Load events from service
        _events = EventService.GetEvents(dateRange);
    }
}

If you put a Console.Write() in the EventCallback, you gonna see that the Event runs twice.

A workaround that i found, was override the method removing the DateRangeChanged Invoke:

protected override Task OnPreviousClicked()
    {
        CurrentDay = View switch
        {
            CalendarView.Day => CurrentDay.AddDays(-1),
            CalendarView.Week => CurrentDay.AddDays(-7),
            CalendarView.Month => CurrentDay.AddMonths(-1),
            _ => CurrentDay
        };
        
        return Task.Delay(1);
}

I don't know if this is optimal but works great.
it seems that when changing the CurrentDay, already Invoke the event.

hi,
since there are not many (paid and free) alternatives out there for a scheduler in MudBlazor and this one is fitting my needs quite well, I really want to make this work.

unfortunately I've come across a few issues.

one of these is that the marker for the current time is not displaying at the correct spot.
with half hour view the marker is always jumping to the next half hour.
in 15 minute view it is always between the grid lines and for each quarter hour it jumps half a grid field ahead and then stays there until the time hits the next quarter hour.

I have another major issue, but I will open a new ticket for that.

thanks for creating this scheduler/calendar and I hope these issues can get fixed.

This project looks great. If you are open to feature requests:

It would be great if there were week and day views with the axis swapped. X-Axis is time and Y-Axis the day, this is a common view in the UK.

It could be a more generic solution to cover basic Gantt charts. X-Axis would be time and/or date series and the Y-Axis the resource (In my case days of the week). A resource based solution would open up the calendar to display multiple staff or room schedules under each other. Outlook has a schedule view which is close to this.

Hello!
A few days ago I started the tool but I ran into a problem when showing two events at the same time. They overlap, is there any chance of fixing that?

ty!

When moving/dragging the appointment at the start or end, the start or end time is reset and an event with the changed appointment is fired.

And this should still be made optionally disableable.

When attempting to extend MudCalendar using the code below, I get the following error:

Error CS0103: The name 'CellHeightStyle' does not exist in the current context (CS0103) (Design)

I noticed the DayStyle method works, but the CellHeightStyle is throwing this error.

I see both methods are part of the DayWeekViewBase that the DayView inherits.

Any ideas on how to get this working without having to re-write this method?

Code:

@inherits DayView

@Render

@code {


 List<string> _employees = new List<string> { "Employee 1", "Employee 2", "Employee 3" };

 protected override RenderFragment RenderTimes =>
 @<div class="d-block relative">
     <table>
         <colgroup>
             <col class="mud-cal-employee-column" />
         </colgroup>
         <tbody>
             @foreach (var employee in _employees)
             {
                 <tr>
                     <td class="mud-cal-week-cell mud-cal-time-cell" style="@CellHeightStyle()">
                         @employee
                     </td>
                     <td class="mud-cal-week-cell" style="@CellHeightStyle()"></td>
                 </tr>
             }
         </tbody>
     </table>
 </div>;

protected override RenderFragment RenderDays =>
@<div class="mud-cal-week-layer">
 <table>
     <colgroup>
         <col style="width: 200px;" />
     </colgroup>
     <tbody>
         <tr>
             <td></td>
             @foreach (var cell in Cells)
             {
                 <td>
                     <div class="mud-cal-week-day-holder" style="@DayStyle(cell)">
                     </div>
                 </td>
             }
         </tr>
     </tbody>
 </table>
</div>;

}

Reason: There is some confusion with the onclick event due to some calendars like Outlook and Google Calendar, where users are accustomed to clicking on the cell instead of the number. Is there a possibility to make this change?

Once again, I appreciate the support you have provided on the calendar, amazing work.

I need the 'container' that holds the month number to be smaller so that the content of the day is better visualized.

Hi, I have a question, how can I send custom my parameters to CellClicked or maybe there is another way?
for example CellClicked (DateTime dateTime, here my parameters)

Could you make the month view headers sticky like you did with the day and week headers?
In some months I have many items in a day that it gets long.

Can we do a custom version of this calendar and make it a resource style

Hi! Thank you for fixing issue #9 .

Unfortunately after updating to 1.0.4 my calendar looks like this. Can you help me?

Is there an ETA for the ability to drag either the start or end time on the calendar?