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:
