We Care Through What We Share
  • 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:

Words From Our Clients

0Years In Operation
0Loyal Clients
0Successful Projects

Tell Us About Your Project