How To Integrate Calendar in C#

In this article, we will learn how to integrate calendar in C#

Create full event calendar. Embed the following into your project:

<script src="//"></script>
<script src="//"></script>
<script src="//"></script>
<script src="//"></script>
<script src=""></script>
<script src=""></script>

Create EventDto.cs used for getting available time slots list.

public class EventDto  
    public int Id { get; set; }  
    public string Title { get; set; }  
    public string Agenda { get; set; }
    public string StartDate { get; set; }  
    public string EndDate { get; set; }  
    public string Location { get; set; }

Create DemoCalanderController.cs for getting time slots list and return it to json.

using Event.Models;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
namespace Event.Admin.Controllers  
    public class DemoCalanderController : Controller  
        public ActionResult Index()  
            return View();  
        public ActionResult GetCalendar()  
            List<EventDto> data = new List<EventDto>();  
            EventDto val1 = new EventDto();  
            val1.Id = 1;  
            val1.Title = "Demo Event 1";  
            val1.Agenda = "Test";  
            val1.StartDate = "2021-07-05 03:30:22.867";  
            val1.EndDate = "2021-07-06 06:30:22.467";  
            val1.Location = "Surat";
            EventDto val2 = new EventDto();  
            val2.Id = 2;  
            val2.Title = "Demo Event 2";  
            val2.Agenda = "Testing";  
            val2.StartDate = "2022-08-05 03:30:22.867";  
            val2.EndDate = "2022-08-06 06:30:22.467";  
            val2.Location = "Baroda";
            return Json(data, JsonRequestBehavior.AllowGet);  
        public ActionResult UpdateCalander(EventDto input)  
            var id = input.Id;  
            return Json(id, JsonRequestBehavior.AllowGet);  

Create JS file

$(function () {  
    function ini_events(ele) {  
        ele.each(function () {  
            var eventObject = {  
                title: $.trim($(this).text())
            $(this).data('eventObject', eventObject)  
                zIndex: 1070,  
                revert: true,  
                revertDuration: 0
    ini_events($('#external-events div.external-event'))  
    var date = new Date()  
    var d = date.getDate(),  
        m = date.getMonth(),  
        y = date.getFullYear()  
    var Calendar = FullCalendar.Calendar;  
    var Draggable = FullCalendarInteraction.Draggable;  
    var containerEl = document.getElementById('external-events');  
    var checkbox = document.getElementById('drop-remove');  
    var calendarEl = document.getElementById('calendar');  

    new Draggable(containerEl, {  
        itemSelector: '.external-event',  
        eventData: function (eventEl) {  
            return {  
                title: eventEl.innerText,  
                backgroundColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),  
                borderColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),  
                textColor: window.getComputedStyle(eventEl, null).getPropertyValue('color'),  
    function GenerateCalander(events) {  
        var calendar = new Calendar(calendarEl, {  

            //plugins: ['bootstrap', 'interaction', 'dayGrid', 'timeGrid'],  
            //initialView: 'timeGridWeek',  
            plugins: ['bootstrap', 'interaction', 'timeGrid'],  
            initialView: 'timeGridWeek',  
            //select your timeZone as u wish to select  
            timeZone: 'UTC',  
            //Slot duration fix to 30 minutes now can chage any slot duration from here.  
            slotDuration: '00:30:00',  
            slotLabelInterval: 30,  
            slotMinutes: 30,  
            snapDuration: '01:00:00',  
            header: {  
                left: 'prev,next today',  
                center: 'title',  
                //right: 'dayGridMonth,timeGridWeek,timeGridDay'  
                right: 'timeGridWeek'  
            //Random default events  
            events: events  
            editable: true,  
            droppable: true, // this allows things to be dropped onto the calendar !!!  
            drop: function (info) {  
                // is the "remove after drop" checkbox checked?  
                if (checkbox.checked) {  
                    // if so, remove the element from the "Draggable Events" list  
            nextDayThreshold: "00:00:00",  
            nowIndicator: true,  
            eventDrop: function (data) {  
                UpdateEventDetails(, data.event.start, data.event.end);  
            eventResize: function (data) {  
                //update your event here  
                UpdateEventDetails(, data.event.start, data.event.end);  
            eventClick: function (calEvent, jsEvent, view) {  
                //Work on click event like delete and view details  
                alert('Click Event Called')  
            selectHelper: true,  
            select: function (start, end, jsEvent, view) {  
                //called when an event is selected  
                alert('Select Event Called')  
    /* ADDING EVENTS */  
    var currColor = '#3c8dbc' //Red by default  
    //Color chooser button  
    var colorChooser = $('#color-chooser-btn')  
    $('#color-chooser > li > a').click(function (e) {  
        //Save color  
        currColor = $(this).css('color')  
        //Add color effect to button  
            'background-color': currColor,  
            'border-color': currColor  
    $('#add-new-event').click(function (e) {  
        //Get value and make sure it is not null  
        var val = $('#new-event').val()  
        if (val.length == 0) {  
        //Create events  
        var event = $('<div />')  
            'background-color': currColor,  
            'border-color': currColor,  
            'color': '#fff'  
        //Add draggable funtionality  
        //Remove event from text input  
    function GetData() {  
        var events = [];  
            url: 'http://localhost:3617/admin/Calander/GetCalendar',  
            type: "GET",  
            dataType: "JSON",  
            success: function (result) {  
                $.each(result, function (i, data) {  
                       title: data.Title,  
                       agenda: data.Agenda,  
                       startDate: moment(data.StartDate).format('YYYY-MM-DD HH:mm:ss'),  
                       endDate: moment(data.EndDate).format('YYYY-MM-DD HH:mm:ss'),  
                       backgroundColor: '#00a65a', //Success (green)  
                       borderColor: '#00a65a', //Success (green)  
                       id: data.Id,  
                       allDay: false,  
    function UpdateEventDetails(eventId, StartDate, EndDate) {  
        var object = new Object();  
        object.Id = parseInt(eventId);  
        object.Start_Date = StartDate;  
        object.End_Date = EndDate;  
            url: 'http://localhost:3617/admin/Calander/UpdateCalander',  
            type: "POST",  
            dataType: "JSON",  
            data: object,  
            success: function (result) {  
                alert("updated successfully-Id:" + result)  

Now Add index.cshtml page

    ViewBag.Title = "Index";  
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";  
<link href="~/Areas/Admin/CalanderCssJs/fullcalendar/main.min.css" rel="stylesheet" />  
<link href="~/Areas/Admin/CalanderCssJs/fullcalendar-daygrid/main.min.css" rel="stylesheet" />  
<link href="~/Areas/Admin/CalanderCssJs/fullcalendar-timegrid/main.min.css" rel="stylesheet" />  
<link href="~/Areas/Admin/CalanderCssJs/fullcalendar-bootstrap/main.min.css" rel="stylesheet" />  
<!-- Main content -->  
<section class="content">  
    <div class="container-fluid">  
        <div class="row">  
            <div class="col-md-3">  
                <div class="sticky-top mb-3">  
                    <div class="card">  
                        <div class="card-header">  
                            <h4 class="card-title">Draggable Events</h4>  
                        <div class="card-body">  
                            <!-- the events -->  
                            <div id="external-events">  
                                <div class="external-event bg-success">Lunch</div>  
                                <div class="external-event bg-warning">Go home</div>  
                                <div class="external-event bg-info">Do homework</div>  
                                <div class="external-event bg-primary">Work on UI design</div>  
                                <div class="external-event bg-danger">Sleep tight</div>  
                                <div class="checkbox">  
                                    <label for="drop-remove">  
                                        <input type="checkbox" id="drop-remove">  
                                        remove after drop  
                        <!-- /.card-body -->  
                    <!-- /.card -->  
                    <div class="card">  
                        <div class="card-header">  
                            <h3 class="card-title">Create Event</h3>  
                        <div class="card-body">  
                            <div class="btn-group" style="width: 100%; margin-bottom: 10px;">  
                                <!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->  
                                <ul class="fc-color-picker" id="color-chooser">  
                                    <li><a class="text-primary" href="#"><i class="fas fa-square"></i></a></li>  
                                    <li><a class="text-warning" href="#"><i class="fas fa-square"></i></a></li>  
                                    <li><a class="text-success" href="#"><i class="fas fa-square"></i></a></li>  
                                    <li><a class="text-danger" href="#"><i class="fas fa-square"></i></a></li>  
                                    <li><a class="text-muted" href="#"><i class="fas fa-square"></i></a></li>  
                            <!-- /btn-group -->  
                            <div class="input-group">  
                                <input id="new-event" type="text" class="form-control" placeholder="Event Title">  
                                <div class="input-group-append">  
                                    <button id="add-new-event" type="button" class="btn btn-primary">Add</button>  
                                <!-- /btn-group -->  
                            <!-- /input-group -->  
            <!-- /.col -->  
            <div class="col-md-9">  
                <div class="card card-primary">  
                    <div class="card-body p-0">  
                        <!-- THE CALENDAR -->  
                        <div id="calendar"></div>  
                    <!-- /.card-body -->  
                <!-- /.card -->  
            <!-- /.col -->  
        <!-- /.row -->  
    </div><!-- /.container-fluid -->  
<!-- /.content -->  
@section scripts{  
    <script src="~/Areas/Admin/CalanderCssJs/jquery-ui/jquery-ui.min.js"></script>  
    <script src="~/Areas/Admin/CalanderCssJs/moment/moment.min.js"></script>  
    <script src="~/Areas/Admin/CalanderCssJs/fullcalendar/main.min.js"></script>  
    <script src="~/Areas/Admin/CalanderCssJs/fullcalendar-daygrid/main.min.js"></script>  
    <script src="~/Areas/Admin/CalanderCssJs/fullcalendar-timegrid/main.min.js"></script>  
    <script src="~/Areas/Admin/CalanderCssJs/fullcalendar-interaction/main.min.js"></script>  
    <script src="~/Areas/Admin/CalanderCssJs/fullcalendar-bootstrap/main.min.js"></script>  
    <!-- Page specific script -->  
    <script src="~/Areas/Admin/CalanderCssJs/mycalander.js"></script>  

Hope you understand the article , If you still have any questions or queries then please let me know in the comment section, I’ll respond to you as soon as possible.



Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories