BeepCalendarWidget
Calendar and scheduling widget with ten styles: date grid, time slots, event cards, full calendar view, schedule cards, date pickers, timeline views, week views, event lists, and availability grids.
Overview
BeepCalendarWidget is a paint-based WinForms widget that inherits from BaseControl. It uses an IWidgetPainter pipeline to render rich visuals without child controls. The Style property selects one of 10 built-in render modes; changing it at runtime immediately swaps the painter and triggers a repaint.
Category: Beep Widgets → Calendar / Scheduling
Default size: 340 × 280
Namespace: TheTechIdea.Beep.Winform.Controls.Widgets
Key Features
📅 Ten Calendar Styles
From a date picker to a full weekly grid — one widget, ten views.
⏰ Time Slots
TimeSlots style renders bookable time blocks with availability indicators.
📋 Event Chips
CalendarView and WeekView render per-event coloured chips on day cells.
🗓️ Week View
Seven-column grid with hourly time slots for appointment scheduling.
✅ Availability Grid
AvailabilityGrid shows available/busy/blocked states for resource booking.
🎨 Per-Event Colors
Each CalendarEvent carries its own Color — colour-code by category.
Style Variants (10)
| Style Value | Description |
|---|---|
DateGrid | Standard monthly calendar grid with date cells. |
TimeSlots | Available time slot picker with bookable slots. |
EventCard | Single event display card with title, time, and location. |
CalendarView | Full month view with event chips on day cells. |
ScheduleCard | Daily schedule list with time-sorted appointments. |
DatePicker | Inline date-selection picker (no popup). |
TimelineView | Horizontal or vertical timeline of events. |
WeekView | Seven-column weekly calendar grid. |
EventList | Upcoming events list sorted by date. |
AvailabilityGrid | Grid showing available/busy/blocked time slots for booking. |
Properties
| Property | Type | Default | Description |
|---|---|---|---|
Style | CalendarWidgetStyle | CalendarView | Selects the calendar painter. |
Title | string | "Calendar" | Panel heading. |
Subtitle | string | "Schedule" | Secondary sub-heading. |
SelectedDate | DateTime | DateTime.Now | Currently selected/focused date. |
DisplayMonth | DateTime | DateTime.Now | Month displayed in CalendarView/WeekView. |
Events | List<CalendarEvent> | (empty) | Event collection. Each CalendarEvent has Title, StartTime, EndTime, Color, Location. |
MinDate | DateTime | DateTime.MinValue | Minimum selectable date. |
MaxDate | DateTime | DateTime.MaxValue | Maximum selectable date. |
ShowWeekNumbers | bool | false | Show ISO week numbers in CalendarView. |
AccentColor | Color | (theme primary) | Highlighted date and event chip colour. |
Inherits all BaseControl properties (Border, Padding, Theme colors, etc.).
Events
| Event | Args Type | Description |
|---|---|---|
DateClicked | BeepEventDataArgs | Fired when a date cell is clicked. Data contains DateTime. |
EventClicked | BeepEventDataArgs | Fired when an event chip is clicked. Data contains CalendarEvent. |
SlotClicked | BeepEventDataArgs | Fired when a time slot is clicked (TimeSlots / AvailabilityGrid). Data contains slot DateTime. |
MonthChanged | BeepEventDataArgs | Fired when navigation changes the displayed month. Data contains new DateTime. |
Basic Usage
var cal = new BeepCalendarWidget
{
Style = CalendarWidgetStyle.CalendarView,
SelectedDate = DateTime.Today,
DisplayMonth = DateTime.Today,
Events = new List
{
new CalendarEvent { Title = "Sprint Planning", StartTime = DateTime.Today.AddHours(9),
EndTime = DateTime.Today.AddHours(11), Color = Color.SteelBlue },
new CalendarEvent { Title = "Design Review", StartTime = DateTime.Today.AddDays(2).AddHours(14),
EndTime = DateTime.Today.AddDays(2).AddHours(15), Color = Color.MediumPurple },
},
Size = new Size(380, 300)
};
this.Controls.Add(cal);
Event Handling
cal.DateClicked += (s, e) =>
{
DateTime date = (DateTime)e.Data;
ShowEventsForDate(date);
};
cal.EventClicked += (s, e) =>
{
var evt = (CalendarEvent)e.Data;
OpenEventEditor(evt);
};
cal.MonthChanged += (s, e) =>
{
DateTime newMonth = (DateTime)e.Data;
LoadEventsForMonth(newMonth);
};
Best Practices
- Set
Stylebefore adding the widget to the form to avoid double repaints. - Adjust
Sizeto fit your layout — defaults are minimum comfortable sizes. - Read
BeepEventDataArgs.Datain event handlers for context-specific click data. - Call
Invalidate()after updating data properties to trigger a repaint. - Let theme colors flow from
BeepStyling.CurrentTheme— avoid overriding color properties unless customization is explicitly desired.