Prerequisite:

Below are the points required to learn in .Net before implementing Full calendar with MVC

1. ASP.NET MVC 5

2. AJAX

3. CSS

4. JS

5. C#

Description:

1. Full calendar jQuery plugin is used to create a full-fledged calendar to display events/holidays.

2. JQuery full calendar is open source.

3. This is an interactive calendar which have functionality of event drag & drop and Resize.

Follow the below steps for implementation:

1. Create a MVC web application project.

2. Create a controller and view.

3. Code for View:

Detail understanding of view:

- Add fullcalendar.css file in head section.

- Add moment.js and fullcalendar.js file in head section.

CDN link:

https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.css

(This is used to provide styling to full calendar)

https://cdn.jsdelivr.net/momentjs/latest/moment.min.js

(This is used for datetime conversion)

https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.js

(This is used to render jQuery fullcalendar and utilize its functions/properties.)

- Add div to render fullcalendar.

- Add bootstrap modal to show event data.

1. Create a table in DB and add sample data for events.

Used MS Sql Server as Database Server

USE Test_Krishna
GO
CREATE TABLE [dbo].[tbl_events]
(
	[id] [int] IDENTITY (1,1) NOT NULL,
	[name] [varchar] (10) NULL,
	[info] [varchar](max) NULL,
	[startdate] [datetime] NULL,
	[enddate] [datetime] NULL,
 CONSTRAINT [pk_event_id] PRIMARY KEY CLUSTERED 
(
	[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

2. Ado.Net entity data model and select the “tbl_events” table.

3. Add method in controller to display events data on page load, show events data on date click and update event datetime on event drag.

Detail understanding of Controller:

- GetEventData method will render all the events data in json format.

- GetEventDetailByEventId method will render detail of event in json format.

- UpdateEventDetails method will update event datetime on event drag&drop and resize.

4. Create calendar.js file in scripts folder. Add below JavaScript for to render full calendar.

- (#id of div).fullcalendar will render calendar to div

- “buttonText” will show button on the header and “header” will set alignment of the buttons.

- “selectable:true” is used to allow date is selectable or not

- “select” is an event which is trigged on date click.

- “height” will set height of calendar.

- To render events on page load, call controller method GetEventData using Ajax and bind “events”.

- “nextDayThreshold” decide from when new day will be started to display events in calendar

- “editable” and “droppable” will allow events to edit/drop.

- “nowIndicator” will display indicator at current datetime.

- eventClick, eventDrop, eventResize are event dragging and resizing events of fullcalendar.

- Call controller method GetEventDetailByEventId to display events details in modal on event click.

- Call controller method UpdateEventDetails using Ajax to update events details on event dropping and resizing.

Final Result: