Below are the points required to learn in .Net before implementing Full calendar with MVC
1. ASP.NET MVC 5
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.
(This is used to provide styling to full calendar)
(This is used for datetime conversion)
(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
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
)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]
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.
- (#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.