How to Add Full Calendar in ASP.NET MVC Application?
Updated: June 19th, 2019 | Technology: Asp.Net, Asp.Net MVC, CMS System, Content Management System,
Full Calendar is a plugin that provides a full-sized, drag & drops events in the calendar. It uses AJAX to fetch events and is easily configured to use your ASP.NET MVC application. It is visually customizable with a rich API.
These are steps to get the Full calendar in ASP.NET MVC application.
- Create a new MVC Application.
- Add fullcalendar.css in Application.
- Add a view to display full calendar.
- Modify Ajax Events as per your application requirement.
=> Add division for a calendar in View as follows.
Add Javascript for display full calendar as follows. Here we have used static events. you can also get events from the database.
These are many properties to get calendar event information. Full Calendar stores information about a calendar event in the properties. you can also set up different colors for different events.
| id | String/Integer. Optional Uniquely identifies the given event. Different instances of repeating events should all have the same id. |
|---|---|
| title | String. Required. The text on an event’s element |
| allDay | true or false. Optional.Whether an event occurs at a specific time-of-day. This property affects whether an event’s time is shown.Also, in the agenda views, determines if it is displayed in the “all-day” section. If this value is not explicitly specified, allDayDefault will be used if it is defined. If all else fails, FullCalendar will try to guess. If either the start or end value has a"T"as part of the ISO8601date string, allDay will become false. Otherwise, it will be true. Don’t include quotes around your true/false. This value is a boolean, not a string! |
| start | The date/time an event begins. Required.A Moment-ish input, like an ISO8601 string. Throughout the API this will become a real Moment object. |
| end | The exclusive date/time an event ends. Optional. A Moment-ish input, like an ISO8601 string. Throughout the API this will become a real Moment object. It is the moment immediately after the event has ended. For example, if the last full day of an event is Thursday, the exclusive end of the event will be 00:00:00 on Friday! |
| url | String. Optional. A URL that will be visited when this event is clicked by the user. For more information on controlling this behavior, see the eventClick callback. |
| className | String/Array. Optional.A CSS class (or array of classes) that will be attached to this event’s element. |
| editable | true or false. Optional. Overrides the master editable option for this single event. |
| start Editable | true or false. Optional.Overrides the master event Start Editable option for this single event. |
| duration Editable | true or false. Optional. Overrides the master event Duration Editable option for this single event. |
| rendering | Allows alternate rendering of the event, like background events. Can be empty, "background", or "inverse-background" |
| overlap | true or false. Optional. Overrides the master event Overlap option for this single event. Iffalse, prevents this event from being dragged/resized over other events. Also prevents other events frombeing dragged/resized over this event. |
| constraint | an event ID, "businessHours", object. Optional. Overrides the master event Constraint option for this single event. |
| source | Event Source Object. Automatically populated.A reference to the event source that this event came from. |
| color | Sets an event’s background and border color just like the calendar-wide event Color option. |
| backgroundColor | Sets an event’s background color just like the calendar-wide event Background Color option. |
| borderColor | Sets an event’s border color just like the calendar-wide event Border Color option. |
| textColor | Sets an event’s text color just like the calendar-wide event Text Color option. |
These are some events though you can add/update/drag/resize events.
Event click event will be triggered when a user clicks on an event. It is used to get details of that event in from this event.
Drop event will be triggered when a user drops any event. A User can get drop start time and end time from this event. Here event is an Event Object that hold the event’s information (date, title, etc).
Resize event will be triggered when a user resizes any event. The user can get event start time and end time from this event. Here event is an Event Object that holds the event’s information (date, title, etc).
I Hope this small help to add a full calendar to the ASP.NET MVC application will work for you. We are at Satva Solutions, we provide API integration services in any ASP.NET MVC application.
