What is FullCalendarMVC?

FullCalendarMVC is a HTML helper for FullCalendar. Currently supported version is 3.9.0.

Where can I get it?

First, install NuGet. Then, install FullCalendar.MVC5 from the package manager console:

PM> Install-Package FullCalendar.MVC5

or FullCalendar.MVC4 if you are using MVC 4:

PM> Install-Package FullCalendar.MVC4

How to use it?

• Reference the script and CSS files in BundleConfig.cs:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
        "~/Scripts/jquery-{version}.js",
        "~/Scripts/moment.js",
        "~/Scripts/fullcalendar*"));

    bundles.Add(new StyleBundle("~/bundles/styles").Include(
        "~/Content/fullcalendar.css"));
}

or in the view (Shared/_Layout.cshtml for example):

<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/fullcalendar.min.js"></script>
<script src="~/Scripts/fullcalendar.helper.min.js"></script>
<link href="~/Content/fullcalendar.min.css" rel="stylesheet" />

• Create an Action in your Controller to get the data:

public JsonResult GetDiaryEvents(DateTime start, DateTime end)
{
    return Json(LoadAllAppointmentsInDateRange(start, end).Select(x => new
    {
        id = x.ID,
        title = x.Title,
        start = x.StartDateString,
        end = x.EndDateString,
        color = x.StatusColor,
        className = x.ClassName,
        someKey = x.SomeImportantKeyID,
        allDay = false
    }).ToArray(), JsonRequestBehavior.AllowGet);
}

• Use the HTML helper in your view, like below (notice the Events property referencing the Action above):

@Html.FullCalendar(settings =>
{
    settings.Name = "calendar";
    settings.CssClass = "css-test";
    settings.Header = new Header
    {
        Left = new ControlsBuilder().AddButton(HeaderButton.Prev).AddSeparator(HeaderSeparator.Adjacent)
                    .AddButton(HeaderButton.Next).AddSeparator(HeaderSeparator.Gap).AddButton(HeaderButton.Today),
        Center = new ControlsBuilder().AddTitle(),
        Right = new ControlsBuilder("month,agendaWeek ").AddView(AvailableView.AgendaDay)
    };
    settings.DefaultView = AvailableView.AgendaDay.ToString();
    settings.Editable = true;
    settings.AllDaySlot = false;
    settings.Selectable = true;
    settings.SlotDuration = TimeSpan.FromMinutes(15);
    settings.Events = Events.AsJsonFeed(Url.Action("GetDiaryEvents", "Home"));
})

• The calendar should be rendered. Check the options below to see if the option you want to use is supported by the HTML helper. For details about these, check the full documentation on the FullCalendar website, or play with some settings in the FullCalendar.UI project of the source code. Also, this CodeProject article might help you understand how the jQuery plugin is linked to ASP.NET MVC.

What are the available options?

Option	Comment	Status
header		supported
footer		supported
customButtons		supported
buttonIcons		supported
themeSystem		supported
themeButtonIcons		supported
bootstrapGlyphicons		supported
firstDay		supported
isRTL		supported
weekends		supported
hiddenDays		supported
fixedWeekCount		supported
weekNumbers		supported
weekNumbersWithinDays		supported
weekNumberCalculation		supported
businessHours	Null is the default instead of false, empty list is used instead of true value	supported
showNonCurrentDates		supported
height		supported
contentHeight		supported
aspectRatio		supported
handleWindowResize		supported
windowResizeDelay		supported
eventLimit		supported
eventLimitClick		supported
viewRender (callback)		supported
viewDestroy (callback)		supported
dayRender (callback)		supported
windowResize (callback)		supported
render (method)	Added Name and CssClass properties to enable selectors client-side	supported
destroy (method)	Added Name and CssClass properties to enable selectors client-side	supported
-----------------------	------------------------------------------------------	------------------
timezone	Null is the default value instead of false	supported
now	Function is not needed, as server-side is supported by MVC	supported
-----------------------	------------------------------------------------------	------------------
Available Views		supported
Custom Views		supported
Generic Views		supported
View-Specific Options	Might need some other options here, not very clear from documentation	supported
View Object		supported
defaultView		supported
getView (method)	Added Name and CssClass properties to enable selectors client-side	supported
changeView (method)	Added Name and CssClass properties to enable selectors client-side	supported
-----------------------	------------------------------------------------------	------------------
allDaySlot		supported
allDayText		supported
slotDuration		supported
slotLabelFormat		supported
slotLabelInterval		supported
snapDuration		supported
scrollTime		supported
minTime		supported
maxTime		supported
slotEventOverlap		supported
-----------------------	------------------------------------------------------	------------------
What is List View?		supported
listDayFormat	Using empty string for the false value (no text displayed)	supported
listDayAltFormat	Using empty string for the false value (no text displayed)	supported
noEventsMessage		supported
-----------------------	------------------------------------------------------	------------------
defaultDate		supported
nowIndicator		supported
visibleRange		supported
validRange		supported
dateIncrement		supported
dateAlignment		supported
duration		supported
dayCount		supported
prev (method)	Added Name and CssClass properties to enable selectors client-side	supported
next (method)	Added Name and CssClass properties to enable selectors client-side	supported
prevYear (method)	Added Name and CssClass properties to enable selectors client-side	supported
nextYear (method)	Added Name and CssClass properties to enable selectors client-side	supported
today (method)	Added Name and CssClass properties to enable selectors client-side	supported
gotoDate (method)	Added Name and CssClass properties to enable selectors client-side	supported
incrementDate (method)	Added Name and CssClass properties to enable selectors client-side	supported
getDate (method)	Added Name and CssClass properties to enable selectors client-side	supported
-----------------------	------------------------------------------------------	------------------
locale		supported
timeFormat		supported
columnFormat		supported
titleFormat		supported
buttonText		supported
monthNames		supported
monthNamesShort		supported
dayNames		supported
dayNamesShort		supported
weekNumberTitle		supported
displayEventTime		supported
displayEventEnd		supported
eventLimitText		supported
dayPopoverFormat		supported
-----------------------	------------------------------------------------------	------------------
navLinks		supported
navLinkDayClick (callback)		supported
navLinkWeekClick (callback)		supported
dayClick (callback)		supported
eventClick (callback)		supported
eventMouseover (callback)		supported
eventMouseout (callback)		supported
-----------------------	------------------------------------------------------	------------------
Touch Support		supported
selectable		supported
selectHelper		supported
unselectAuto		supported
unselectCancel		supported
selectOverlap		supported
selectConstraint		supported
selectAllow		supported
selectMinDistance		supported
selectLongPressDelay		supported
select (callback)		supported
unselect (callback)		supported
select (method)	Added Name and CssClass properties to enable selectors client-side	supported
unselect (method)	Added Name and CssClass properties to enable selectors client-side	supported
-----------------------	------------------------------------------------------	------------------
Moment		supported
Duration		supported
date formatting string		supported
formatRange (function)	This function attached to fullCalendar object just returns a string, no need for support	not needed
get / set options dynamically	Added Name and CssClass properties to enable selectors client-side	supported
on / off	Added Name and CssClass properties to enable selectors client-side	supported
-----------------------	------------------------------------------------------	------------------
Event Object		supported
Event Source Object		supported
events (as an array)		supported
events (as a json feed)	Might need to add some AJAX parameters to Extended Form	supported
events (as a function)		supported
eventSources	Configure Event Source Objects, as that covers all cases	supported
allDayDefault		supported
startParam		supported
endParam		supported
timezoneParam		supported
lazyFetching		supported
defaultTimedEventDuration		supported
defaultAllDayEventDuration		supported
forceEventDuration		supported
eventDataTransform (callback)		supported
loading (callback)		supported
updateEvent (method)	Added Name and CssClass properties to enable selectors client-side	supported
updateEvents (method)	Added Name and CssClass properties to enable selectors client-side	supported
clientEvents (method)	Added Name and CssClass properties to enable selectors client-side	supported
removeEvents (method)	Added Name and CssClass properties to enable selectors client-side	supported
refetchEvents (method)	Added Name and CssClass properties to enable selectors client-side	supported
refetchEventSources (method)	Added Name and CssClass properties to enable selectors client-side	supported
addEventSource (method)	Added Name and CssClass properties to enable selectors client-side	supported
removeEventSource (method)	Added Name and CssClass properties to enable selectors client-side	supported
removeEventSources (method)	Added Name and CssClass properties to enable selectors client-side	supported
getEventSources (method)	Added Name and CssClass properties to enable selectors client-side	supported
getEventSourceById (method)	Added Name and CssClass properties to enable selectors client-side	supported
-----------------------	------------------------------------------------------	------------------
Colors		supported
Background Events		supported
eventColor		supported
eventBackgroundColor		supported
eventBorderColor		supported
eventTextColor		supported
nextDayThreshold		supported
eventOrder	All 4 versions supported as array	supported
eventRenderWait		supported
eventRender (callback)		supported
eventAfterRender (callback)		supported
eventAfterAllRender (callback)		supported
eventDestroy (callback)		supported
renderEvent (method)	Added Name and CssClass properties to enable selectors client-side	supported
renderEvents (method)	Added Name and CssClass properties to enable selectors client-side	supported
rerenderEvent (method)	Added Name and CssClass properties to enable selectors client-side	supported
-----------------------	------------------------------------------------------	-----------------
Requirements		supported
Touch Support		supported
editable		supported
eventStartEditable		supported
eventDurationEditable		supported
dragRevertDuration		supported
dragOpacity		supported
dragScroll		supported
eventOverlap		supported
eventConstraint		supported
eventAllow		supported
longPressDelay		supported
eventLongPressDelay		supported
eventDragStart (callback)		supported
eventDragStop (callback)		supported
eventDrop (callback)		supported
eventResizeStart (callback)		supported
eventResizeStop (callback)		supported
eventResize (callback)		supported
-----------------------	------------------------------------------------------	-----------------
droppable		supported
dropAccept		supported
drop (callback)		supported
eventReceive (callback)		supported

Do you have an issue?

Have a bug or a feature request? Please search for existing and closed issues before submitting a new one. If your problem or idea is not addressed yet, please open a new issue. Contributions are welcome!

License, etc.

FullCalendarMVC is Copyright © 2017 Hajbok Robert under the MIT license.