FlexibleCalendar 1.0.10

FlexibleCalendar

EN

FlexibleCalendar is a Blazor component for displaying a calendar with the ability to color specific dates using System.Drawing.Color and support for interactive actions.

Quick Start

1. Add the NuGet package FlexibleCalendar to your Blazor project.
2. Import the namespace:

@using FlexibleCalendar.Calendar

<Calendar MonthsToShow="6" CalendarColumns="3" />

This will display 6 months starting from 2025-01-01, 3 horizontally and 2 vertically.

Usage Example

@using FlexibleCalendar.Calendar

<Calendar MonthsToShow="4"
          CalendarColumns="2"
          DateBackgroundCssVariable="--bs-body-bg"
          Events="_events"
          OnDayClick="OnDayClickHandler" />

private List<CalendarEvent> _events =
    [new(DateTime.Now, DateTime.Now.AddDays(7), Color.DarkSeaGreen, Color.Azure),
     new(DateTime.Now.AddDays(9), DateTime.Now.AddDays(15), Color.DarkOrange, Color.Black)];

private void OnDayClickHandler(DateTime date)
{
    // Your code to handle day click
}

Calendar Component Parameters

Event Format

To display events, use objects implementing the ICalendarEvent interface. The default implementation is the CalendarEvent class.

Structure:

public interface ICalendarEvent
{
    DateTime StartDate { get; set; }
    DateTime EndDate { get; set; }
    Color Color { get; set; }
    Color TextColor { get; set; }
}

Styling

The component uses the following CSS classes:

• .calendar — calendar container
• .calendar-header — header with navigation
• .calendar-months-grid — months grid
• .calendar-month-title — month title
• .calendar-weekdays — weekdays row
• .calendar-day — day cell
• .calendar-day.empty — empty cell (for alignment)

You can override styles in your project or use CSS variables for customization.

RU

Blazor-компонент для отображения календаря с возможностью окраски конкретных дат в различные цвета System.Drawing.Color с поддержкой интерактивных действий

Быстрый старт

1. Добавьте Nuget пакет FlexibleCalendar на проект в ваш Blazor-проект.
2. Импортируйте пространство имён:

@using FlexibleCalendar.Calendar

<Calendar MonthsToShow="6" CalendarColumns="3" /> 

Отобразит 6 месяцев, начиная с 2025.01.01, 3 по горизонтали, 2 по вертикали.

Пример использования

@using FlexibleCalendar.Calendar 

<Calendar MonthsToShow="4"
          CalendarColumns="2"
          DateBackgroundCssVariable="--bs-body-bg"
          Events="_events"
          OnDayClick="OnDayClickHandler" />

private List<CalendarEvent> _events =

    [new(DateTime.Now, DateTime.Now.AddDays(7), Color.DarkSeaGreen, Color.Azure),

     new(DateTime.Now.AddDays(9), DateTime.Now.AddDays(15), Color.DarkOrange, Color.Black)];


private void OnDayClickHandler(DateTime date)

{

    // Ваш код обработки клика по дню

}

Параметры компонента Calendar

Формат событий

Для отображения событий используйте объекты, реализующие интерфейс ICalendarEvent, по умолчанию есть класс `CalendarEvent.

Его структура:

public interface ICalendarEvent  
{  
    DateTime StartDate { get; set; }  
    DateTime EndDate { get; set; }  
    Color Color { get; set; }  
    Color TextColor { get; set; }  
}

Стилизация

Компонент использует CSS-классы:

• .calendar — контейнер календаря

• .calendar-header — шапка с навигацией

• .calendar-months-grid — сетка месяцев

• .calendar-month-title — название месяца

• .calendar-weekdays — строка дней недели

• .calendar-day — ячейка дня

• .calendar-day.empty — пустая ячейка (для выравнивания)

Вы можете переопределить стили в своём проекте или использовать CSS-переменные для кастомизации.