Using FullCalendar.js with ASP.NET Core
3 min read4 days ago
What is FullCalendar.js?
FullCalendar.js is a popular JavaScript library designed for creating dynamic calendars in web applications. It allows features like event management, calendar updates, drag-and-drop functionality, and more.
Adding FullCalendar.js and Required Files
You can include FullCalendar directly via CDN links. Add the following to the <head> section of your HTML file:
<!-- FullCalendar CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.8/fullcalendar.min.css" rel="stylesheet" />
<!-- FullCalendar JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.8/fullcalendar.min.js"></script>
<!-- Moment.js (if required) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>Alternatively, you can add it using npm:
npm install fullcalendarYou can also download it directly from:
FullCalendar Documentation
Setting Up HTML
Add the following simple structure to your View (cshtml) file:
<div id="calendar"></div>
