FullCalendar
Namespace: Wisej.Web.Ext.FullCalendar
Assembly: Wisej.Web.Ext.FullCalendar (4.1.0.0)
FullCalendar is a drag-n-drop widget for displaying events on a full-sized calendar based on the open-source fullcalendar.io. See http://fullcalendar.io/.
- C#
- VB.NET
public class FullCalendar : Widget, IWisejDataStore
Public Class FullCalendar
Inherits Widget
Implements IWisejDataStore
The FullCalendar JavaScript component is developed by Adam Shaw and released under the MIT license: http://fullcalendar.io/license/.
The control uses FullCalendar 3.9.0 (and the optional scheduler plug-in 1.9.4, see SchedulerLicenseKey). The calendar doesn't show its own header toolbar: navigate using Previous, Next, Today, GotoDate or CurrentDate and switch views using View.
The events are loaded on demand: every time the visible date range changes, the client requests the events in that range from the Events collection or, when VirtualMode is true, through the VirtualEventsNeeded event. Changing most of the properties recreates the calendar on the client.
Example:
Creating a calendar in week view with a couple of events:
var calendar = new FullCalendar();
calendar.Dock = DockStyle.Fill;
calendar.View = ViewType.AgendaWeek;
calendar.Events.Add(new Event(DateTime.Today.AddHours(9), TimeSpan.FromHours(1)) { Title = "Stand-up" });
calendar.Events.Add(DateTime.Today.AddDays(1)).Title = "Company holiday";
calendar.EventClick += (s, e) => AlertBox.Show(e.Event.Title);
this.Controls.Add(calendar);
Constructors
FullCalendar()
Constructs a new instance of the FullCalendar control.
Properties
AllDaySlot
Boolean: Returns or sets whether the "all-day" slot is displayed at the top of the agenda views. (Default: True)
The default is true. The title of the slot is set by AllDayText.
AllDayText
String: Returns or sets the text titling the "all-day" slot at the top of the calendar.
The default is "All Day". Setting it to an empty string restores the default. Setting the property recreates the calendar on the client.
BusinessHours
BusinessHours[]: Returns or sets the business hours to emphasize on the calendar. (Default: null)
The default is null: no business hours are emphasized. Each BusinessHours item defines a time range (9 AM to 5 PM by default) for a set of days, which allows different hours on different days. Assign a new array to apply changes: modifying the items of the current array doesn't update the calendar. Setting the property recreates the calendar on the client.
Example:
Emphasizing Monday to Friday 8 AM - 6 PM and Saturday 9 AM - 1 PM:
this.fullCalendar1.BusinessHours = new[] {
new BusinessHours {
Start = new TimeSpan(8, 0, 0),
End = new TimeSpan(18, 0, 0),
Days = new[] { DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday }
},
new BusinessHours {
Start = new TimeSpan(9, 0, 0),
End = new TimeSpan(13, 0, 0),
Days = new[] { DayOfWeek.Saturday }
}
};
CurrentDate
DateTime: Returns or sets the current value that is used by the FullCalendar to display the current view.
Value: A DateTime representing the currently displayed date/time. The default is the current system time.
Setting the property keeps only the date part of the value, moves the calendar to the new date (see GotoDate) and fires the CurrentDateChanged event.
The property is also updated, firing CurrentDateChanged, when the client reports that the displayed date changed after a call to Previous, Next, PreviousYear, NextYear, Today or GotoDate. That happens asynchronously, so the value is not updated yet when those methods return.
Example:
Moving the calendar to October 2026:
this.fullCalendar1.CurrentDate = new DateTime(2026, 10, 1);
Showing the displayed month in a label:
private void fullCalendar1_CurrentDateChanged(object sender, EventArgs e)
{
this.labelMonth.Text = this.fullCalendar1.CurrentDate.ToString("MMMM yyyy");
}
DefaultAllDayText
String: Returns the default The text titling the "all-day" slot at the top of the calendar.
DefaultNoEventsMessage
String: Returns the default message to display in one if the list views when there are no events.
Editable
Boolean: Returns or sets whether the events on the calendar can be dragged and resized by the user. (Default: True)
The default is true. Individual events can override the value using Editable.
EventBackgroundColor
Color: Returns or sets the background color for all events in the calendar. (Default: Color [Empty])
Individual events can override the value using BackgroundColor.
EventBorderColor
Color: Returns or sets the border color for all events in the calendar. (Default: Color [Empty])
Individual events can override the value using BorderColor.
EventLimit
Int32: Returns or sets the maximum number of events displayed on a day. (Default: 0)
The default is 0, which means that the number of events is not limited. When there are too many events, a link that looks like "+2 more" is displayed; clicking the link shows the hidden events in a popover. Setting the property recreates the calendar on the client.
Throws:
- ArgumentException The value is less than 0.
Example:
Showing at most 3 events per day in the month view:
this.fullCalendar1.View = ViewType.Month;
this.fullCalendar1.EventLimit = 3;
Events
EventCollection: Returns the collection of Event managed by this FullCalendar control.
Adding, removing or changing events reloads the events of the visible range on the client after the current request. Events without an ID receive an automatic ID when added; adding an event with the ID of an existing event replaces it. When VirtualMode is true the collection can't be modified and retrieving events fires RetrieveVirtualEvent.
Example:
Adding and finding events:
this.fullCalendar1.Events.Add("meeting1", new DateTime(2026, 10, 5, 10, 0, 0), TimeSpan.FromMinutes(90)).Title = "Design review";
this.fullCalendar1.Events.Add(new Event("vacation", new DateTime(2026, 10, 12)) { Title = "Vacation", BackgroundColor = Color.SeaGreen });
var ev = this.fullCalendar1.Events["meeting1"];
if (ev != null)
ev.Start = ev.Start.AddHours(1);
EventTextColor
Color: Returns or sets the text color for all events in the calendar. (Default: Color [Empty])
Individual events can override the value using TextColor.
FirstDayOfWeek
Day: Returns or sets the first day of the week as displayed in the FullCalendar. (Default: Default)
Value: One of the Day values. The default is Default.
Setting the property recreates the calendar on the client.
HeaderFormats
ColumnHeaderFormats: Returns the formats of the column headers in the different views using momentjs format patterns: http://momentjs.com/docs/#/displaying/format/.
Each format that is not set returns "Default" and uses the format of the current locale. Changing any of the formats recreates the calendar on the client.
Example:
Customizing the column headers of the day, week and month views:
this.fullCalendar1.HeaderFormats.DayViewFormat = "dddd, MMMM D";
this.fullCalendar1.HeaderFormats.WeekViewFormat = "ddd D/M";
this.fullCalendar1.HeaderFormats.MonthViewFormat = "dddd";
InitScript
String: Returns the initialization script that creates the FullCalendar instance on the client.
The script is built from the embedded startup.js resource and the current values of the properties of the control; the setter is ignored.
MaxTime
TimeSpan: Returns or sets the last time slot (exclusive) that will be displayed for each day, even when the scrollbars have been scrolled all the way down.
Applies to the views with time slots (agenda and timeline views). The default is 24 hours (the end of the day). Setting the property recreates the calendar on the client.
Example:
Ending the day view at 6 PM:
this.fullCalendar1.MaxTime = new TimeSpan(18, 0, 0);
MinTime
TimeSpan: Returns or sets the first time slot that will be displayed for each day, even when the scrollbars have been scrolled all the way up.
Applies to the views with time slots (agenda and timeline views). The value is a time of the day; the default is 00:00:00. Setting the property recreates the calendar on the client.
Example:
Limiting the agenda views to working hours:
this.fullCalendar1.MinTime = new TimeSpan(7, 0, 0);
this.fullCalendar1.MaxTime = new TimeSpan(19, 0, 0);
this.fullCalendar1.ScrollTime = new TimeSpan(8, 0, 0);
NextDayThreshold
TimeSpan: Returns or sets the next-day threshold time.
When an event's end time spans into another day, this is the minimum time it must be in order for it to render as if it were on that day. The default is 09:00:00.
Only affects timed events that appear on whole-days. Whole-day cells occur in the Month, BasicDay and BasicWeek views and in the all-day slots of the agenda views.
Example:
Rendering an event that ends at 2 AM only on its first day:
this.fullCalendar1.NextDayThreshold = new TimeSpan(3, 0, 0);
this.fullCalendar1.Events.Add(new DateTime(2026, 10, 3, 20, 0, 0), new DateTime(2026, 10, 4, 2, 0, 0)).Title = "Party";
NoEventsMessage
String: Returns or sets the message to display in one of the list views when there are no events to display.
The default is "No events to display". Setting it to an empty string restores the default. Setting the property recreates the calendar on the client.
Options
Object: Overridden, not used. Always returns null and the setter is ignored.
The FullCalendar options are generated from the properties of the control.
Packages
List<Package>: Returns the list of packages loaded by the client before the widget is initialized.
The list contains jQuery 3.1.1, moment.js 2.17.1 and FullCalendar 3.9.0 and, when SchedulerLicenseKey is not empty, the scheduler plug-in 1.9.4. The packages are served from the resources embedded in this assembly and the list is built only the first time the property is read.
ResourceAreaWidth
String: Returns or sets the width of the area that contains the list of resources. Requires the SchedulerLicenseKey to be set to a valid license or to a GPL or CC license. (Default: "30%")
The value is a CSS width, either a percentage of the calendar width or a size in pixels. The default is "30%". Setting the property recreates the calendar on the client.
Example:
Using a fixed width for the resource area:
this.fullCalendar1.ResourceAreaWidth = "200px";
ResourceLabelText
String: Returns or sets the text that will appear above the list of resources. Requires the SchedulerLicenseKey to be set to a valid license or to a GPL or CC license. (Default: "Resources")
The default is "Resources". Setting the property recreates the calendar on the client.
Resources
SchedulerResource[]: Returns or sets the scheduler resources. Requires the SchedulerLicenseKey to be set to a valid license or to a GPL or CC license. (Default: null)
Events are associated to a resource using ResourceId. The resources are displayed in the timeline views. Assign a new array to add or remove resources; changing the properties of a resource fires ResourceChanged but doesn't redraw the calendar. Setting the property recreates the calendar on the client.
Example:
Assigning events to resources:
this.fullCalendar1.SchedulerLicenseKey = "GPL-My-Project-Is-Open-Source";
this.fullCalendar1.Resources = new[] {
new SchedulerResource("a") { Title = "Auditorium A", EventBackgroundColor = Color.SteelBlue },
new SchedulerResource("b") { Title = "Auditorium B", EventBackgroundColor = Color.IndianRed }
};
this.fullCalendar1.View = ViewType.TimelineDay;
this.fullCalendar1.Events.Add(DateTime.Today.AddHours(10), TimeSpan.FromHours(2)).ResourceId = "a";
SchedulerLicenseKey
String: Returns or sets the license key for the scheduler plug-in. See scheduler. (Default: "")
Use "GPL-My-Project-Is-Open-Source" for GPL projects, or "CC-Attribution-NonCommercial-NoDerivatives" for non commercial projects.
When the key is not empty, the scheduler scripts are added to Packages and the Resources, ResourceLabelText and ResourceAreaWidth properties are sent to the client. The packages are built only once, the first time they are requested, so set the key in the designer or before the control is created. The key is also required before setting View to a timeline view.
Example:
Enabling the scheduler plug-in and showing the resources in a timeline view:
this.fullCalendar1.SchedulerLicenseKey = "GPL-My-Project-Is-Open-Source";
this.fullCalendar1.Resources = new[] {
new SchedulerResource("room1") { Title = "Room 1" },
new SchedulerResource("room2") { Title = "Room 2" }
};
this.fullCalendar1.View = ViewType.TimelineDay;
ScrollTime
TimeSpan: Returns or sets the time the time-slot views are initially scrolled to.
The default is 06:00:00. Setting the property recreates the calendar on the client. When the calendar becomes visible after having been hidden, the scroll position is computed assuming 30 minutes slots (the default SlotDuration).
Example:
Scrolling to 8 AM when the agenda view is displayed:
this.fullCalendar1.ScrollTime = new TimeSpan(8, 0, 0);
ShowCurrentTime
Boolean: Returns or sets whether to display a marker indicating the current time. (Default: True)
The default is true. The marker is displayed in the views with time slots at the time of TodayDate.
ShowEventToolTips
Boolean: Returns or sets whether ToolTips are shown when the mouse pointer hovers over a Event.
Since 3.5.13 (Default: False)
Value: true if ToolTips are shown when the mouse pointer hovers over a Event; otherwise, false. The default is false.
The ToolTip shows ToolTipText or, when it's not set, Title.
SlotDuration
TimeSpan: Returns or sets the duration of the time slots.
The default is 30 minutes. Labels are displayed according to SlotLabelInterval. Setting the property recreates the calendar on the client.
Example:
Using 15 minutes slots:
this.fullCalendar1.SlotDuration = TimeSpan.FromMinutes(15);
SlotEventOverlap
Boolean: Returns or sets whether timed events in the agenda views should visually overlap. (Default: True)
The default is true. When false, events that overlap in time are displayed side by side.
SlotLabelFormat
String: Returns or sets the time-text that will be displayed on the vertical axis of the agenda views using momentjs format patterns: http://momentjs.com/docs/#/displaying/format/.
Returns "Default" when not set, in which case the format of the current locale is used. Setting it to null or an empty string restores the default. Setting the property recreates the calendar on the client.
Example:
Showing the axis labels in 24 hours format:
this.fullCalendar1.SlotLabelFormat = "HH:mm";
SlotLabelInterval
TimeSpan: Returns or sets how often the time-axis is labeled with text displaying the date/time of the slots.
The default is 1 hour. The value is always sent to the client, so it's not computed automatically from SlotDuration: when changing SlotDuration adjust this property as well. Setting the property recreates the calendar on the client.
Example:
Using 15 minutes slots labeled every 30 minutes:
this.fullCalendar1.SlotDuration = TimeSpan.FromMinutes(15);
this.fullCalendar1.SlotLabelInterval = TimeSpan.FromMinutes(30);
ThemeSystem
ThemeSystem: Returns or sets the theme system used by the calendar. (Default: Standard)
The ThemeSystem property can be one of these values:
- Standard Renders the built-in look & feel.
- Bootstrap3 Supports Bootstrap 3 themes. The Bootstrap CSS file must be loaded separately in its own link tag.
- jQueryUI Supports jQuery UI themes. The jQuery UI CSS file must be loaded separately in its own link tag.
Once the control is created, changing the value updates the option on the client without recreating the calendar.
TimeFormat
String: Returns or sets the time-text that will be displayed on each event using momentjs format patterns: http://momentjs.com/docs/#/displaying/format/. (Default: null)
The default is null, in which case the format of the current locale is used. Setting the property recreates the calendar on the client.
Example:
Setting the time format to display on the events:
this.fullCalendar1.TimeFormat = "h:mm"; // shows 5:00
this.fullCalendar1.TimeFormat = "h(:mm)t"; // shows 5p
this.fullCalendar1.TimeFormat = "HH:mm"; // shows 17:00
TodayDate
DateTime: Returns or sets the value that is used by FullCalendar as today's date.
Value: A DateTime representing today's date. The default value is the current system date.
The value is used to highlight the current day, to place the current time marker (see ShowCurrentTime) and as the target of Today. Until it's set, the property returns Now evaluated on the server every time it's read. Setting the property recreates the calendar on the client.
Example:
Using the time zone of the user instead of the server's time:
var zone = TimeZoneInfo.FindSystemTimeZoneById("W. Europe Standard Time");
this.fullCalendar1.TodayDate = TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, zone);
View
ViewType: Returns or sets the view the calendar uses to display the events. (Default: Month)
The default is Month. Once the control is created, changing the view switches the view on the client without recreating the calendar. The timeline views are part of the scheduler plug-in and require SchedulerLicenseKey to be set first.
Throws:
- Exception The value is one of the timeline views (TimelineDay, TimelineWeek, TimelineMonth, TimelineYear) and SchedulerLicenseKey is empty.
Example:
Switching between views using buttons:
private void buttonWeek_Click(object sender, EventArgs e)
{
this.fullCalendar1.View = ViewType.AgendaWeek;
}
private void buttonList_Click(object sender, EventArgs e)
{
this.fullCalendar1.View = ViewType.ListMonth;
}
VirtualSize
Int32: Returns or sets the number of Event objects contained in the list when in virtual mode. (Default: 0)
Value: The number of Event objects contained in the FullCalendar when in virtual mode.
The value is returned by Count when VirtualMode is true and limits the indexes that can be used with the Events indexer. Changing the value in virtual mode reloads the events on the client.
Throws:
- ArgumentException VirtualSize is set to a value less than 0.
Example:
Setting the number of virtual events after loading the data:
this.fullCalendar1.VirtualMode = true;
this.fullCalendar1.VirtualSize = this.appointments.Count;
Methods
GotoDate(dateTime)
Moves the calendar to an arbitrary date.
| Parameter | Type | Description |
|---|---|---|
| dateTime | DateTime | The date to set the calendar view to. |
The view is not changed: it displays the month, week or day that contains dateTime . CurrentDate is updated and CurrentDateChanged is fired asynchronously, when the client reports the new date. If the calendar is not created on the client yet, the call is executed when it's ready.
Example:
Moving the calendar to the date selected in a DateTimePicker:
private void dateTimePicker1_ValueChanged(object sender, EventArgs e)
{
this.fullCalendar1.GotoDate(this.dateTimePicker1.Value);
}
Next()
Moves the calendar one step forward (either by a month, week, or day).
The step depends on the current View: the month views move forward one month, the week views one week and the day views one day. CurrentDate is updated and CurrentDateChanged is fired asynchronously, when the client reports the new date.
Example:
Implementing a custom navigation toolbar:
private void buttonNext_Click(object sender, EventArgs e)
{
this.fullCalendar1.Next();
}
NextYear()
Moves the calendar forward one year.
CurrentDate is updated and CurrentDateChanged is fired asynchronously, when the client reports the new date.
Example:
Going forward one year:
private void buttonNextYear_Click(object sender, EventArgs e)
{
this.fullCalendar1.NextYear();
}
OnCurrentDateChanged(e)
Fires the CurrentDateChanged event.
OnDayClick(e)
Fires the DayClick event.
| Parameter | Type | Description |
|---|---|---|
| e | DayClickEventArgs |
OnDayDoubleClick(e)
Fires the DayDoubleClick event.
| Parameter | Type | Description |
|---|---|---|
| e | DayClickEventArgs |
OnEventChanged(e)
Fires the EventChanged event.
| Parameter | Type | Description |
|---|---|---|
| e | EventValueEventArgs | A EventValueEventArgs that contains the event data. |
OnEventClick(e)
Fires the DayClick event.
| Parameter | Type | Description |
|---|---|---|
| e | EventClickEventArgs |
OnEventDoubleClick(e)
Fires the EventDoubleClick event.
| Parameter | Type | Description |
|---|---|---|
| e | EventClickEventArgs |
OnEventMouseEnter(e)
Raises the EventMouseEnter event.
| Parameter | Type | Description |
|---|---|---|
| e | EventMouseEnterArgs | The event data associated with the mouse enter event. |
This method is called to invoke the EventMouseEnter event handlers. Derived classes can override this method to provide custom handling for the event. When overriding, ensure to call the base implementation to maintain event invocation.
OnEventMouseLeave(e)
Raises the EventMouseLeave event.
| Parameter | Type | Description |
|---|---|---|
| e | EventMouseLeaveArgs | The event data associated with the mouse enter event. |
This method is called to invoke the EventMouseLeave event handlers. Derived classes can override this method to provide custom handling for the event. When overriding, ensure to call the base implementation to maintain event invocation.
OnItemDrop(e)
Fires the ItemDrop event.
| Parameter | Type | Description |
|---|---|---|
| e | ItemDropEventArgs |
OnResourceChanged(e)
Fires the ResourceChanged event.
| Parameter | Type | Description |
|---|---|---|
| e | ResourceEventArgs | A ResourceEventArgs that contains the event data. |
OnRetrieveVirtualEvent(e)
Fires the RetrieveVirtualEvent event.
| Parameter | Type | Description |
|---|---|---|
| e | RetrieveVirtualEventEventArgs | A RetrieveVirtualEventEventArgs that contains the event data. |
OnVirtualEventsNeeded(e)
Fires the VirtualEventsNeeded event.
| Parameter | Type | Description |
|---|---|---|
| e | VirtualEventsNeededEventArgs | A EventsNeededEventArgs that contains the event data. |
OnWidgetEvent(e)
Handles events fired by the widget.
| Parameter | Type | Description |
|---|---|---|
| e | WidgetEventArgs |
Previous()
Moves the calendar one step back (either by a month, week, or day).
The step depends on the current View: the month views move back one month, the week views one week and the day views one day. CurrentDate is updated and CurrentDateChanged is fired asynchronously, when the client reports the new date.
Example:
Implementing a custom navigation toolbar:
private void buttonPrev_Click(object sender, EventArgs e)
{
this.fullCalendar1.Previous();
}
PreviousYear()
Moves the calendar back one year.
CurrentDate is updated and CurrentDateChanged is fired asynchronously, when the client reports the new date.
Example:
Going back one year:
private void buttonPrevYear_Click(object sender, EventArgs e)
{
this.fullCalendar1.PreviousYear();
}
Today()
Moves the calendar to the current date.
The current date is the value of TodayDate. CurrentDate is updated and CurrentDateChanged is fired asynchronously, when the client reports the new date.
Example:
Going back to today:
private void buttonToday_Click(object sender, EventArgs e)
{
this.fullCalendar1.Today();
}
Events
CurrentDateChanged
EventHandler Triggered when the current date used to display the calendar view is changed.
DayClick
DayClickEventHandler Triggered when the user clicks a day in the calendar.
DayDoubleClick
DayClickEventHandler Triggered when the user double clicks a day in the calendar.
EventChanged
EventValueEventHandler Triggered when the user changed (dragged or resized) an Event object.
EventClick
EventClickEventHandler Triggered when the user clicks an event.
EventDoubleClick
EventClickEventHandler Triggered when the user double clicks an event.
EventMouseEnter
EventMouseEnterHandler Triggered when the mouse enters the event control.
EventMouseLeave
EventMouseLeaveHandler Triggered when the mouse leaves the event control.
ItemDrop
ItemDropEventHandler Triggered when the user drops an object on the calendar.
ResourceChanged
ResourceEventHandler Triggered when the a SchedulerResource object changes.
RetrieveVirtualEvent
RetrieveVirtualEventEventHandler Triggered when VirtualMode is true and the control needs to retrieve a specific virtual event instance.
VirtualEventsNeeded
VirtualEventsNeededEventHandler Triggered when VirtualMode is true and the control needs to populate the events on a certain date, week or month.
The application should manage and cache the events that are returned in response to this event.