_settings.LogoTextBlazify
Donate
فارسی English
BzCalendarFull

Full calendar

ButtonsFormsInput groupButton groupsDatePickerAutoCompleteCardsDisplayLoadingDialogsNotificationsOperation messageDrawerContext menuPaginationLightboxTreeDataGridChartsTabs & AccordionNavigationSidebarTimelineWizardCarouselUploaderEditorCalendarIranian tools
Full-page example

The calendar fills its parent, so the parent needs a definite height.

انتخاب‌شده: 2026/08/11

شیدسچپج
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Team meetingCode review
21
Release
22
Invoice deadlineCustomer callExtra slot 11+ بیشتر
23
24
25
Weekly event
26
27
28
29
30
31
1
2
3
4
5
6
razor 
@using BzCore.Components.Calendar
@using BzCore.Enums

<div style="height: 640px;">
    <BzCalendarFull SelectedDate="selected" OnDayClick="@(d => selected = d)" Events="events" />
</div>

@code {
    DateTime? selected = DateTime.Today;
    List<BzCalendarEvent> events = new()
    {
        new(DateTime.Today, "جلسه تیم", BzColor.Primary),
        new(DateTime.Today.AddDays(2), "ددلاین", BzColor.Danger),
        new(DateTime.Today.AddDays(5), "انتشار", BzColor.Success),
    };
}
In a smaller box

The same component in a shorter, narrower box — it compacts its own layout.

شیدسچپج
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Team meetingCode review
21
Release
22
Invoice deadlineCustomer callExtra slot 11+ بیشتر
23
24
25
Weekly event
26
27
28
29
30
31
1
2
3
4
5
6
razor 
@using BzCore.Components.Calendar
@using BzCore.Enums

@* The calendar fills its parent, so give the parent a height. *@
<div style="height: 420px; max-width: 720px;">
    <BzCalendarFull Events="events" />
</div>

@code {
    List<BzCalendarEvent> events = new()
    {
        new(DateTime.Today, "جلسه تیم", BzColor.Primary),
        new(DateTime.Today.AddDays(2), "ددلاین", BzColor.Danger),
    };
}
Events and day clicks (add an event)
شیدسچپج
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Team meetingCode review
21
Release
22
Invoice deadlineCustomer callExtra slot 11+ بیشتر
23
24
25
Weekly event
26
27
28
29
30
31
1
2
3
4
5
6

2026/08/11

  • Team meeting
  • Code review
razor 
<BzCalendarFull SelectedDate="picked" OnDayClick="OnDay" Events="events" />

@code {
    DateTime picked = DateTime.Today;
    List<BzCalendarEvent> events = new();

    // events of the clicked day
    List<BzCalendarEvent> DayEvents =>
        events.Where(e => e.Date.Date == picked.Date).ToList();

    void OnDay(DateTime d) => picked = d;

    void AddEvent(string title)
        => events.Add(new() { Date = picked, Title = title, Color = BzColor.Primary });
}
Options: holidays, Persian digits and calendar type
شیدسچپج
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Team meetingCode review
21
Release
22
Invoice deadlineCustomer callExtra slot 11+ بیشتر
23
24
25
Weekly event
26
27
28
29
30
31
1
2
3
4
5
6
razor 
@* holidays, persian digits and calendar type *@
<BzCalendarFull Events="events"
                ShowHolidays="true"
                PersianDigits="false"
                Calendar="BzCalendarType.Jalali" />

@* gregorian calendar *@
<BzCalendarFull Events="events" Calendar="BzCalendarType.Gregorian" />