### MudCalendar Component Setup
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/configuration.md
Example of how to set up the MudCalendar component in a Blazor application, demonstrating various configuration parameters.
```razor
```
--------------------------------
### Create an All-Day Calendar Event
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/calendar-item.md
Example of creating an all-day event by setting the AllDay flag to true and defining appropriate Start and End times.
```csharp
var allDayItem = new MyCalendarItem
{
Text = "Company Holiday",
Start = new DateTime(2025, 7, 4, 0, 0, 0),
End = new DateTime(2025, 7, 4, 23, 59, 59),
AllDay = true
};
```
--------------------------------
### Complete MudCalendar Example with All Delegates and Callbacks
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/delegates-and-callbacks.md
A comprehensive example demonstrating the integration and usage of all available delegates and callbacks within the MudCalendar component, including drag-and-drop and item resizing.
```csharp
@page "/advanced-calendar"
@code {
private List events = new();
private bool CanDragItem(Event e) => !e.IsLocked;
private bool CanDropItem(Event e, DateTime dt, CalendarView v)
=> dt.Date >= DateTime.Today;
private bool IsDisabled(DateTime dt, CalendarView v)
=> dt.DayOfWeek == DayOfWeek.Sunday;
private string GetClasses(DateTime dt, CalendarView v)
=> dt.DayOfWeek == DayOfWeek.Saturday ? "weekend" : "";
private Task OnItemChanged(Event e) => Task.CompletedTask;
private Task OnViewChanged(CalendarView v) => Task.CompletedTask;
private Task OnDateRangeChanged(DateRange r) => Task.CompletedTask;
private Task OnCurrentDayChanged(DateTime d) => Task.CompletedTask;
private Task OnCellClicked(DateTime d) => Task.CompletedTask;
private Task OnCellRangeSelected(DateRange r) => Task.CompletedTask;
private Task OnCellContextMenu(CalendarClickEventArgs a) => Task.CompletedTask;
private Task OnItemClicked(Event e) => Task.CompletedTask;
private Task OnItemContextMenu(CalendarItemClickEventArgs a) => Task.CompletedTask;
private Task OnMoreClicked(DateTime d) => Task.CompletedTask;
}
public class Event : CalendarItem
{
public bool IsLocked { get; set; }
}
```
--------------------------------
### Complete MudCalendar Configuration Example
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/configuration.md
This example showcases a full configuration of the MudCalendar component, including appearance, navigation, date/time, time view, and interaction settings. It also includes custom templates for toolbar, month, and week views, along with event handlers and a custom event class.
```csharp
@page "/calendar"
@using Heron.MudCalendar
@using System.Globalization
My CalendarExport@context.Text
@if (context.AllDay)
{
}
@context.Text@context.Start.ToString("HH:mm")
@code {
private MudCalendar? calendar;
private List events = new();
protected override void OnInitialized()
{
// Initialize events
events.Add(new CalendarEvent
{
Text = "Team Meeting",
Start = DateTime.Now.Date.AddHours(10),
End = DateTime.Now.Date.AddHours(11)
});
}
private bool CanDragEvent(CalendarEvent e) => e.AllowDrag;
private bool CanDropEvent(CalendarEvent e, DateTime dateTime, CalendarView view)
{
return dateTime >= DateTime.Now && !IsDateTimeDisabled(dateTime, view);
}
private bool IsDateTimeDisabled(DateTime dt, CalendarView view)
{
// Disable Sundays and Saturdays
return dt.DayOfWeek == DayOfWeek.Sunday || dt.DayOfWeek == DayOfWeek.Saturday;
}
private string GetDateTimeClasses(DateTime dt, CalendarView view)
{
if (dt.DayOfWeek == DayOfWeek.Saturday || dt.DayOfWeek == DayOfWeek.Sunday)
return "weekend-date";
return "";
}
private Task OnDateRangeChanged(DateRange range) => Task.CompletedTask;
private Task OnCurrentDayChanged(DateTime day) => Task.CompletedTask;
private Task OnItemChanged(CalendarEvent item) => Task.CompletedTask;
private Task OnViewChanged(CalendarView view) => Task.CompletedTask;
private Task OnCellClicked(DateTime dt) => Task.CompletedTask;
private Task OnItemClicked(CalendarEvent item) => Task.CompletedTask;
}
public class CalendarEvent : CalendarItem
{
public bool AllowDrag { get; set; } = true;
public string Category { get; set; } = "";
}
```
--------------------------------
### MudCalendar Basic Usage Example
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/mud-calendar.md
Demonstrates the basic setup and usage of the MudCalendar component, including item initialization and event handling for item changes, cell clicks, and view changes.
```razor
@page "/calendar"
@using Heron.MudCalendar
@code {
private MudCalendar? calendar;
private List calendarItems = new();
protected override void OnInitialized()
{
calendarItems = new List
{
new MyCalendarItem
{
Text = "Meeting",
Start = DateTime.Now,
End = DateTime.Now.AddHours(1)
}
};
}
private Task OnItemChanged(MyCalendarItem item)
{
// Handle item changes (drag, resize)
return Task.CompletedTask;
}
private Task OnCellClicked(DateTime dateTime)
{
// Handle cell click
return Task.CompletedTask;
}
private Task OnViewChanged(CalendarView view)
{
// Handle view change
return Task.CompletedTask;
}
}
public class MyCalendarItem : CalendarItem
{
// Custom properties can be added here
}
```
--------------------------------
### Install Heron.MudCalendar NuGet Package
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/README.md
Install the Heron.MudCalendar NuGet package using the .NET CLI.
```bash
dotnet add package Heron.MudCalendar
```
--------------------------------
### DrawTime Method Example
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/calendar-views.md
Illustrates the output format of the DrawTime method for both 24-hour and 12-hour clock settings.
```csharp
"08:00" (24-hour)
"8:00 AM" (12-hour)
```
--------------------------------
### Create a Multi-Day Calendar Event
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/calendar-item.md
Example of creating an event that spans multiple days by setting distinct Start and End dates.
```csharp
var multiDayItem = new MyCalendarItem
{
Text = "Conference",
Start = new DateTime(2025, 9, 1, 8, 0, 0),
End = new DateTime(2025, 9, 3, 17, 0, 0),
AllDay = false
};
```
--------------------------------
### CategoryAttribute Usage Example
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/supporting-classes.md
Shows how to apply the CategoryAttribute to component parameters to organize them in API documentation. Examples for Color and CalendarView parameters are provided.
```csharp
[Parameter]
[Category(CategoryTypes.Calendar.Appearance)]
public Color Color { get; set; } = Color.Primary;
[Parameter]
[Category(CategoryTypes.Calendar.Behavior)]
public CalendarView View { get; set; } = CalendarView.Month;
```
--------------------------------
### Install MudBlazor NuGet Package
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/README.md
Ensure MudBlazor is installed in your project by adding its NuGet package.
```bash
dotnet add package MudBlazor
```
--------------------------------
### Add Heron.MudCalendar Package
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/README.md
Install the MudCalendar NuGet package using the .NET CLI.
```bash
dotnet add package Heron.MudCalendar
```
--------------------------------
### Create a Single-Point Calendar Event
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/calendar-item.md
Example of creating an event with no specified end time, treated as a single point in time.
```csharp
var singlePointItem = new MyCalendarItem
{
Text = "Birthday",
Start = new DateTime(2025, 5, 10, 0, 0, 0),
End = null,
AllDay = false
};
```
--------------------------------
### CalendarCell Usage Example
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/types.md
Demonstrates how to instantiate and use a CalendarCell object, populating it with date and item data. Useful for custom calendar rendering or data manipulation.
```csharp
var cell = new CalendarCell
{
Date = new DateTime(2025, 6, 15),
Items = events.Where(e => e.Start.Date == new DateTime(2025, 6, 15)),
Outside = false,
Today = false
};
foreach (var item in cell.Items)
{
// Process items for this date
}
```
--------------------------------
### Create a Custom Calendar Item
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/calendar-item.md
Example of creating a derived class from CalendarItem to add custom properties like Location and Description.
```csharp
public class MyCalendarItem : CalendarItem
{
public string Location { get; set; }
public string Description { get; set; }
}
// Usage
var item = new MyCalendarItem
{
Text = "Team Meeting",
Start = new DateTime(2025, 6, 15, 10, 0, 0),
End = new DateTime(2025, 6, 15, 11, 0, 0),
AllDay = false,
Location = "Conference Room A",
Description = "Q2 Planning"
};
```
--------------------------------
### ItemPosition Usage Example
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/types.md
Illustrates creating an ItemPosition object and calculating its bottom edge. This is typically used to apply CSS styles for item placement.
```csharp
var position = new ItemPosition
{
Item = myEvent,
Position = 1,
Total = 2,
Date = DateOnly.FromDateTime(DateTime.Now),
Top = 100,
Left = 0,
Height = 60,
Width = 1
};
// Apply positioning CSS
var topStyle = $"top: {position.Top}px;";
var bottomEdge = position.Bottom;
```
--------------------------------
### Delegates and Callbacks
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/GENERATION_REPORT.md
Reference for all function delegates and event callbacks used within the MudCalendar system. Includes real-world examples and complete working code samples for each.
```APIDOC
## Delegates and Callbacks
### Description
This section details all available function delegates and event callbacks, providing clear explanations and practical code examples for their implementation.
### Function Delegates
- **[Delegate Name]**: Description of the delegate's purpose and signature.
### Event Callbacks
- **[Event Name]**: Description of the event and the data it provides.
### Examples
- **Real-world examples** demonstrating the usage of each delegate and callback.
- **Complete working code samples** for easy integration.
```
--------------------------------
### MudCalendar Usage Example
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/event-args.md
Demonstrates how to use the MudCalendar component with a custom Task class, handling item context menu clicks, and displaying a dialog for selected tasks.
```csharp
@page "/calendar"
@using Heron.MudCalendar
@if (selectedTask != null)
{
@selectedTask.TextPriority: @selectedTask.PriorityAssigned to: @selectedTask.AssignedToEditCompleteDelete
}
@code {
private Task? selectedTask;
private List tasks = new();
private async Task OnItemContextMenuClicked(CalendarItemClickEventArgs args)
{
selectedTask = args.Item;
// Access click position
var clickX = args.MouseEventArgs.ClientX;
var clickY = args.MouseEventArgs.ClientY;
// Show context menu or dialog
}
private Task EditTask() => Task.CompletedTask;
private Task CompleteTask()
{
if (selectedTask != null)
{
selectedTask.IsCompleted = true;
}
return Task.CompletedTask;
}
private Task DeleteTask() => Task.CompletedTask;
}
public class Task : CalendarItem
{
public string Priority { get; set; }
public string AssignedTo { get; set; }
public bool IsCompleted { get; set; }
}
```
--------------------------------
### CalendarViewName GetText Method Example
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/supporting-classes.md
Demonstrates how to use the GetText method from CalendarViewName to retrieve the localized display name for a specific calendar view, such as 'Month'.
```csharp
public static string GetText(CalendarView view)
var monthName = CalendarViewName.GetText(CalendarView.Month);
// Returns "Month" (or localized equivalent)
```
--------------------------------
### CalendarItem Base Class Structure
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/README.md
Understand the base properties available in the CalendarItem class, which include Start, End, AllDay, and Text for defining calendar events.
```csharp
public class CalendarItem
{
public DateTime Start { get; set; }
public DateTime? End { get; set; }
public bool AllDay { get; set; }
public string Text { get; set; }
}
```
--------------------------------
### MudCalendar Component
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/GENERATION_REPORT.md
Documentation for the main MudCalendar component, including its constructor, parameters, and event callbacks. It details the public methods available for direct use with examples.
```APIDOC
## MudCalendar Component
### Description
Provides the core functionality for displaying and interacting with a calendar. This component is highly configurable and supports various views and event handling.
### Constructor
- **MudCalendar()**: Initializes a new instance of the MudCalendar component. Generic constraints apply.
### Parameters
- **[Parameter Name]** (type) - Required/Optional - Description of the parameter. (70+ parameters organized in tables)
### Event Callbacks
- **[Event Name]**: Description of the event callback. (10 event callbacks available)
### Public Methods
- **[Method Name]**([parameter list]): Description of the method with usage examples.
### Example
[Example of using MudCalendar component methods and callbacks]
```
--------------------------------
### CalendarDateRange Class Constructor
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/types.md
Represents a date range for the currently visible calendar span, inheriting from MudBlazor.DateRange. It calculates the start and end dates based on the current day, view, and culture.
```csharp
public class CalendarDateRange : DateRange
{
public CalendarDateRange(DateTime currentDay, CalendarView view, CultureInfo culture, DayOfWeek? firstDayOfWeek = null)
: base(GetStart(view, currentDay, culture, firstDayOfWeek), GetEnd(view, currentDay, culture, firstDayOfWeek))
{
}
}
```
```csharp
var juneRange = new CalendarDateRange(
new DateTime(2025, 6, 15),
CalendarView.Month,
CultureInfo.GetCultureInfo("en-US"),
DayOfWeek.Sunday
);
var startDate = juneRange.Start; // First day of visible month grid
var endDate = juneRange.End; // Last day of visible month grid
```
--------------------------------
### Get First Day of Week by Calendar View
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/mud-calendar.md
Retrieve the first day of the week for a specific calendar view using the GetFirstDayOfWeekByCalendarView method. This respects the calendar's configuration.
```csharp
public DayOfWeek? GetFirstDayOfWeekByCalendarView(CalendarView view)
```
```csharp
var firstDay = calendar.GetFirstDayOfWeekByCalendarView(CalendarView.Week);
```
--------------------------------
### CalendarItem Class
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/INDEX.md
The CalendarItem class serves as the base for all events and tasks displayed in the calendar. It defines core properties like start time, end time, and text content.
```APIDOC
## CalendarItem Class
### Description
Base class for calendar events and tasks, defining essential properties.
### Key Properties:
- **Start** (DateTime) - The start date and time of the item.
- **End** (DateTime) - The end date and time of the item.
- **AllDay** (bool) - Indicates if the item spans the entire day.
- **Text** (string) - The display text for the item.
### Usage:
CalendarItem can be used directly or extended to create custom item types.
```csharp
public class CustomCalendarItem : CalendarItem
{
public string CustomProperty { get; set; }
}
```
```
--------------------------------
### Configuration
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/GENERATION_REPORT.md
A complete reference for all parameters related to appearance, behavior, time, and item interaction, including CSS customization.
```APIDOC
## Configuration
### Description
Provides a comprehensive guide to configuring the MudCalendar component, covering all available parameters for appearance, behavior, and time management, along with CSS customization options.
### Parameter Reference
- **Appearance Configuration**: Settings for visual styling.
- **Behavior Configuration**: Options for controlling user interaction and functionality.
- **Time Configuration**: Parameters related to time display and handling.
- **Item Interaction Configuration**: Settings for how calendar items behave.
### CSS Customization
- Guide on how to customize the component's appearance using CSS.
### Setup Example
- A complete example demonstrating various configuration options.
```
--------------------------------
### JsService Initialization and Usage
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/supporting-classes.md
Demonstrates how to initialize and use the JsService for interacting with JavaScript functionalities within a Blazor component. Includes event handling and disposal.
```csharp
@using Heron.MudCalendar.Services
@inject IJSRuntime JsRuntime
@code {
private JsService? jsService;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
jsService = new JsService(JsRuntime);
jsService.OnMoreClicked += (sender, date) =>
{
// Handle more clicked
return Task.CompletedTask;
};
// Setup scroll container
ElementReference myElement = /* ... */;
await jsService.Scroll(myElement, 500);
}
}
public async ValueTask DisposeAsync()
{
if (jsService != null)
{
await jsService.DisposeAsync();
}
}
}
```
--------------------------------
### Inheritance Patterns for Custom Calendar Items
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/calendar-item.md
Demonstrates how to create specialized calendar item classes by inheriting from the base CalendarItem class.
```csharp
public class TaskItem : CalendarItem
{
public string Priority { get; set; }
public bool IsCompleted { get; set; }
public string AssignedTo { get; set; }
public List Tags { get; set; } = new();
}
public class AppointmentItem : CalendarItem
{
public string ProviderName { get; set; }
public string PatientName { get; set; }
public int DurationMinutes { get; set; }
}
public class ReminderItem : CalendarItem
{
public TimeSpan NotifyBefore { get; set; }
public string Category { get; set; }
}
```
--------------------------------
### CalendarItem Protected/Internal Property: IsMultiDay
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/calendar-item.md
Checks if a calendar item spans across multiple days based on its Start and End properties.
```csharp
protected internal bool IsMultiDay { get; }
```
--------------------------------
### Supporting Classes
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/GENERATION_REPORT.md
Documentation for supporting classes, including JsService, CategoryAttribute system, helper utilities, and localization support.
```APIDOC
## Supporting Classes
### Description
This section covers utility classes that enhance the functionality of the MudCalendar component, including JavaScript service interactions, attribute systems, and localization.
### JsService
- **[Method Name]**: Description of JsService methods.
### CategoryAttribute System
- Details on how to use and implement the CategoryAttribute.
### Helper Utilities
- Description of various utility functions available for common tasks.
### Localization Support
- Information on configuring and using localization features.
```
--------------------------------
### CurrentDateRange Property
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/mud-calendar.md
Gets the date range currently visible in the calendar. This reflects the dates shown based on the current view and selected day.
```APIDOC
## CurrentDateRange
### Description
The date range currently visible in the calendar. Reflects the range of dates shown based on the current view and day.
### Type
`CalendarDateRange?`
### Access
Read-only
```
--------------------------------
### JsService Constructor
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/supporting-classes.md
Initializes the JsService with the Blazor JavaScript runtime instance.
```csharp
public JsService(IJSRuntime jsRuntime)
```
--------------------------------
### DateRange Class Definition
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/types.md
A base class from MudBlazor representing a period with optional start and end dates. Used for event callbacks and date-related properties in MudCalendar.
```csharp
public class DateRange
{
public DateTime? Start { get; set; }
public DateTime? End { get; set; }
}
```
--------------------------------
### Project Output Structure
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/GENERATION_REPORT.md
This snippet outlines the directory structure of the generated documentation for the Heron.MudCalendar component library.
```text
/workspace/home/output/
├── GENERATION_REPORT.md (this file)
├── INDEX.md (documentation index and guide)
├── README.md (entry point and quick start)
├── types.md (enums and type definitions)
├── configuration.md (parameter reference)
└── api-reference/
├── mud-calendar.md (main component)
├── calendar-item.md (item base class)
├── calendar-views.md (view components)
├── event-args.md (event argument classes)
├── supporting-classes.md (helper classes and services)
└── delegates-and-callbacks.md (function delegates and callbacks)
```
--------------------------------
### CalendarDateRange Static Helper: GetLastWeekDate
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/types.md
Gets the last day of the week that contains the given date, considering culture and an optional override for the first day of the week.
```csharp
public static DateTime GetLastWeekDate(DateTime day, CultureInfo culture, DayOfWeek? firstDayOfWeek)
{
// Implementation details not shown in source
}
```
--------------------------------
### CalendarDateRange Static Helper: GetFirstWeekDate
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/types.md
Gets the first day of the week that contains the given date, respecting culture and an optional override for the first day of the week.
```csharp
public static DateTime GetFirstWeekDate(DateTime day, CultureInfo culture, DayOfWeek? firstDayOfWeek)
{
// Implementation details not shown in source
}
```
--------------------------------
### Configuration Parameters
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/INDEX.md
Details the various parameters available for configuring the appearance, behavior, and date/time settings of the MudCalendar component.
```APIDOC
## Configuration Parameters
### Description
Reference for all configurable parameters of the MudCalendar component.
### Parameter Categories:
- **Appearance**: Height, Elevation, Colors, etc.
- **Behavior**: Navigation, Views, Interaction modes.
- **Date/Time**: Culture, Constraints, Time views.
- **Item Interaction**: Dragging, Resizing, Validation rules.
### Example Usage:
```html
```
### CSS Customization:
Custom CSS classes can be applied for detailed styling.
```
--------------------------------
### Using Custom Calendar Items with MudCalendar Component
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/calendar-item.md
Shows how to integrate a list of custom calendar items into the MudCalendar component and display them.
```csharp
@page "/schedule"
@code {
private List events = new();
protected override void OnInitialized()
{
events.Add(new MyCalendarItem
{
Text = "Daily Standup",
Start = DateTime.Now.AddDays(1).Date.AddHours(9),
End = DateTime.Now.AddDays(1).Date.AddHours(9).AddMinutes(30),
AllDay = false
});
events.Add(new MyCalendarItem
{
Text = "Project Deadline",
Start = DateTime.Now.AddDays(7).Date,
End = DateTime.Now.AddDays(7).Date.AddHours(23).AddMinutes(59),
AllDay = true
});
}
}
```
--------------------------------
### Calendar Views
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/GENERATION_REPORT.md
Reference for different calendar view components like MonthView, WeekView, WorkWeekView, and DayView, including their base classes and architecture.
```APIDOC
## Calendar Views
### Description
Details the different visual representations of the calendar, including Month, Week, WorkWeek, and Day views. Explains the base classes and architectural patterns used.
### MonthView
- Description and usage of the MonthView.
### WeekView
- Description and usage of the WeekView.
### WorkWeekView
- Description and usage of the WorkWeekView.
### DayView
- Description and usage of the DayView.
### Base Classes and Architecture
- Overview of the foundational classes and design patterns for calendar views.
```
--------------------------------
### MudCalendar Usage with CellContextMenuClicked
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/event-args.md
Example demonstrating how to use the CellContextMenuClicked event with MudCalendar to display a context menu upon right-clicking a cell. It shows how to access clicked cell information.
```razor
@page "/calendar"
@using Heron.MudCalendar
New EventEditDelete
@code {
private bool showMenu = false;
private CalendarClickEventArgs? clickedArgs;
private List events = new();
private async Task OnCellContextMenuClicked(CalendarClickEventArgs args)
{
clickedArgs = args;
showMenu = true;
// Access clicked date/time
var clickedDateTime = args.DateTime;
var x = args.MouseEventArgs.ClientX;
var y = args.MouseEventArgs.ClientY;
}
private Task CreateEvent()
{
if (clickedArgs == null) return Task.CompletedTask;
var newEvent = new Event
{
Text = "New Event",
Start = clickedArgs.DateTime,
End = clickedArgs.DateTime.AddHours(1)
};
events.Add(newEvent);
return Task.CompletedTask;
}
private Task EditEvent() => Task.CompletedTask;
private Task DeleteEvent() => Task.CompletedTask;
}
public class Event : CalendarItem { }
```
--------------------------------
### Context Menu Click Callbacks
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/delegates-and-callbacks.md
Fired on right-click of cells and items respectively. Use these to display context menus for cells or calendar items.
```csharp
[Parameter]
public EventCallback CellContextMenuClicked { get; set; }
[Parameter]
public EventCallback> ItemContextMenuClicked { get; set; }
```
```csharp
@code {
private async Task OnCellContextMenu(CalendarClickEventArgs args)
{
// Show context menu for empty cell
ContextMenuPosition = new Point(args.MouseEventArgs.ClientX, args.MouseEventArgs.ClientY);
ContextMenuDate = args.DateTime;
ShowContextMenu = true;
}
private async Task OnItemContextMenu(CalendarItemClickEventArgs args)
{
// Show context menu for item
SelectedEvent = args.Item;
ContextMenuPosition = new Point(args.MouseEventArgs.ClientX, args.MouseEventArgs.ClientY);
ShowContextMenu = true;
}
}
```
--------------------------------
### WorkWeekView BuildCells Method
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/calendar-views.md
This method creates the cells for each day in the work week view. It returns a list of 5 cells, representing Monday through Friday.
```csharp
protected override List> BuildCells()
{
// Implementation to create 5 cells for the work week
return new List>();
}
```
--------------------------------
### MudCalendar Generic Type Constraint Example
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/calendar-item.md
Demonstrates valid and invalid generic type definitions for MudCalendar. The generic type T must inherit from CalendarItem and possess a parameterless public constructor.
```csharp
// Valid
public class Event : CalendarItem { }
// Invalid - would not compile
public class CustomItem : CalendarItem
{
public CustomItem(string name) => Name = name; // No parameterless constructor
}
```
--------------------------------
### Manual Static File Inclusion
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/supporting-classes.md
Provides HTML snippets for manually including the MudCalendar CSS and JavaScript files in your Blazor application's host file (_Host.cshtml or index.html). Use this if automatic injection fails.
```html
```
--------------------------------
### DateRangeChanged Callback
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/delegates-and-callbacks.md
An EventCallback fired when the visible date range of the calendar changes, typically due to navigation or view changes. It provides the new DateRange (start and end dates) to the handler.
```APIDOC
## DateRangeChanged Callback
### Description
Fired when the visible date range changes (navigation, view change).
### Signature
```csharp
[Parameter]
public EventCallback DateRangeChanged { get; set; }
```
### Event Parameter
- **dateRange** (`DateRange`) - New visible date range (Start and End dates).
### Example
```csharp
@code {
private async Task OnDateRangeChanged(DateRange dateRange)
{
// Reload events for new range
events = await DataService.GetEventsAsync(dateRange.Start, dateRange.End);
}
}
```
```
--------------------------------
### JsService AddLink Method
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/supporting-classes.md
Asynchronously injects a new link element (e.g., for CSS stylesheets) into the document's head. Specify the resource URL and its relationship.
```csharp
public async Task AddLink(string href, string rel)
```
--------------------------------
### DayWeekViewBase
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/calendar-views.md
Provides shared functionality for day and week views, handling time-based layout, item positioning, scrolling, and drag-and-drop.
```APIDOC
## DayWeekViewBase
### Description
Provides shared functionality for day and week views, including time-based cell layout, item positioning, scroll-to-time, current time indicator, and drag-and-drop support.
### Key Properties
- **MinutesInDay** (int) - Total visible minutes based on `MinVisibleTime` and `MaxVisibleTime`.
- **InvisibleRows** (int) - Number of time cells before the first visible time.
- **InvisibleMinutes** (int) - Minutes before the first visible time.
- **CellsInDay** (int) - Number of time cells in the day based on `DayTimeInterval`.
- **PixelsInDay** (int) - Total pixels for the entire day based on cell height.
### Methods
#### DrawTime
##### Description
Creates a formatted time string for display.
##### Method Signature
`protected virtual string DrawTime(int row)`
##### Parameters
- **row** (int) - Required - The row/cell index.
##### Returns
`string` - Formatted time (24-hour or 12-hour format based on `Use24HourClock`).
##### Example
```
"08:00" (24-hour)
"8:00 AM" (12-hour)
```
#### TimelineRow
##### Description
Calculates which row contains the current time.
##### Method Signature
`protected int TimelineRow()`
##### Returns
`int` - Row index for the current time, or negative if before visible time range.
#### ItemHeightChanged
##### Description
Updates item end time when resized vertically.
##### Method Signature
`protected Task ItemHeightChanged(T item, int intervals)`
##### Parameters
- **item** (T) - Required - The item being resized.
- **intervals** (int) - Required - Number of time intervals to extend.
##### Returns
`Task` - Invokes `ItemChanged` callback if duration changed.
```
--------------------------------
### MudCalendar Component Usage
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/calendar-views.md
Demonstrates how to integrate and configure the MudCalendar component in a Blazor application, including event handling and view switching.
```csharp
@page "/calendar"
@using Heron.MudCalendar
MonthWeekDay
@code {
private List events = new();
private CalendarView currentView = CalendarView.Month;
private Task OnViewChanged(CalendarView view)
{
currentView = view;
return Task.CompletedTask;
}
private void SwitchToMonth() => currentView = CalendarView.Month;
private void SwitchToWeek() => currentView = CalendarView.Week;
private void SwitchToDay() => currentView = CalendarView.Day;
}
public class Event : CalendarItem { }
```
--------------------------------
### Include CSS and JS References
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/README.md
Optionally, add CSS and JS references to your main HTML file if the calendar is not displaying correctly. This is usually not necessary.
```html
...
```
--------------------------------
### JsService AddMultiSelect Method
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/supporting-classes.md
Asynchronously initializes multi-cell selection functionality for a calendar container. Requires the number of cells per day and the container's HTML ID.
```csharp
public async Task AddMultiSelect(int cellsInDay, string containerId)
```
--------------------------------
### JsService PositionMonthItems Method
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/supporting-classes.md
Asynchronously calculates and positions calendar items within the month view. Requires the month grid element, localized 'more' text, and a flag for fixed cell height.
```csharp
public async Task PositionMonthItems(ElementReference element, string moreText, bool fixedHeight)
```
--------------------------------
### WeekView BuildCells Method
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/calendar-views.md
This method generates the cells for each day within the weekly view. It returns a list of 7 cells, one for each day of the week.
```csharp
protected override List> BuildCells()
{
// Implementation to create 7 cells for the week
return new List>();
}
```
--------------------------------
### MonthView BuildCells Method
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/calendar-views.md
This method creates the collection of cells for each day in the month view. It is part of the MonthView component.
```csharp
protected override List> BuildCells()
{
// Implementation to create cells for each day
return new List>();
}
```
--------------------------------
### More Clicked Callback
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/delegates-and-callbacks.md
Fired when the '+X more' label is clicked in month view. The callback receives the date for which more items exist.
```csharp
[Parameter]
public EventCallback MoreClicked { get; set; }
```
```csharp
@code {
private async Task OnMoreClicked(DateTime dateTime)
{
// Show all items for this date
await OpenDayViewDialog(dateTime);
}
}
```
--------------------------------
### CalendarItemClickEventArgs Constructor
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/event-args.md
Defines the constructor for CalendarItemClickEventArgs, which takes mouse event arguments and a calendar item.
```csharp
public CalendarItemClickEventArgs(MouseEventArgs mouseEventArgs, T item)
```
--------------------------------
### CalendarClickEventArgs Constructor
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/event-args.md
Defines the constructor for CalendarClickEventArgs, which takes mouse event arguments and a DateTime.
```csharp
public CalendarClickEventArgs(MouseEventArgs mouseEventArgs, DateTime dateTime)
```
--------------------------------
### More Clicked Callback
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/delegates-and-callbacks.md
Fired when the '+X more' label is clicked in the month view. It passes the DateTime for which more items exist.
```APIDOC
## More Clicked Callback
### Description
Fired when the "+X more" label is clicked in month view.
### Parameters
#### Event Parameter
- **dateTime** (`DateTime`) - Required - The date for which more items exist.
### Example
```csharp
@code {
private async Task OnMoreClicked(DateTime dateTime)
{
// Show all items for this date
await OpenDayViewDialog(dateTime);
}
}
```
```
--------------------------------
### MudCalendar Event Callback Pattern
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/event-args.md
Illustrates the Blazor event callback pattern for MudCalendar's cell and item click events. Shows how to invoke these events from component code.
```csharp
// Cell click event
[Parameter]
public EventCallback CellContextMenuClicked { get; set; }
// Item click event
[Parameter]
public EventCallback> ItemContextMenuClicked { get; set; }
// Invoked in component code
await CellContextMenuClicked.InvokeAsync(new CalendarClickEventArgs(mouseArgs, dateTime));
await ItemContextMenuClicked.InvokeAsync(new CalendarItemClickEventArgs(mouseArgs, item));
```
--------------------------------
### Supporting Classes
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/INDEX.md
A collection of helper classes and services that enhance the functionality of Heron.MudCalendar, including JavaScript interop and attribute categorization.
```APIDOC
## Supporting Classes
### Description
Utility classes and services that support the core functionality of Heron.MudCalendar.
### Documented Classes:
- **JsService**: Handles JavaScript interop for advanced features.
- **CategoryAttribute**: Used for categorizing component parameters.
- **CategoryTypes**: Constants for parameter categories.
- **EnumExtensions**: Utility methods for working with enumerations.
- **CalendarViewName**: Provides localized names for calendar views.
### Example Usage (JsService):
```csharp
public class MyComponent : ComponentBase
{
[Inject] public JsService JsService { get; set; }
public async Task ExecuteJsFunction()
{
await JsService.InvokeVoidAsync("myGlobalFunction");
}
}
```
```
--------------------------------
### Import MudCalendar Namespace
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/README.md
Add the Heron.MudCalendar namespace to your _Imports.razor file for easy access to components.
```razor
@using Heron.MudCalendar
```
--------------------------------
### Advanced MudCalendar with Context Menus
Source: https://github.com/danheron/heron.mudcalendar/blob/dev/_autodocs/api-reference/event-args.md
This C# Blazor code snippet shows how to implement advanced features for the MudCalendar component. It includes handling cell and item context menu clicks to display a popover for creating, editing, or deleting events.
```csharp
@page "/advanced-calendar"
@using Heron.MudCalendar