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="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></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";
            data.Add(val1);  
  
            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";
            data.Add(val2);  
  
            return Json(data, JsonRequestBehavior.AllowGet);  
             
        }  
  
  
        [HttpPost]  
        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)  
  
            $(this).draggable({  
                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) {  
            console.log(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'),  
            };  
        }  
    });  
  
    GetData();  
  
    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 .......you 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  
                    info.draggedEl.parentNode.removeChild(info.draggedEl);  
                }  
            },  
            nextDayThreshold: "00:00:00",  
            nowIndicator: true,  
            eventDrop: function (data) {  
                UpdateEventDetails(data.event.id, data.event.start, data.event.end);  
            },  
            eventResize: function (data) {  
                //console.log(data.event.id)  
                //update your event here  
                UpdateEventDetails(data.event.id, 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')  
            },  
  
        });  
  
        calendar.render();  
    }  
    
  
    /* ADDING EVENTS */  
    var currColor = '#3c8dbc' //Red by default  
    //Color chooser button  
    var colorChooser = $('#color-chooser-btn')  
    $('#color-chooser > li > a').click(function (e) {  
        e.preventDefault()  
        //Save color  
        currColor = $(this).css('color')  
        //Add color effect to button  
        $('#add-new-event').css({  
            'background-color': currColor,  
            'border-color': currColor  
        })  
    })  
    $('#add-new-event').click(function (e) {  
        e.preventDefault()  
        //Get value and make sure it is not null  
        var val = $('#new-event').val()  
        if (val.length == 0) {  
            return  
        }  
  
        //Create events  
        var event = $('<div />')  
        event.css({  
            'background-color': currColor,  
            'border-color': currColor,  
            'color': '#fff'  
        }).addClass('external-event')  
        event.html(val)  
        $('#external-events').prepend(event)  
  
        //Add draggable funtionality  
        ini_events(event)  
  
        //Remove event from text input  
        $('#new-event').val('')  
    })  
  
  
  
  
    function GetData() {  
        var events = [];  
        $.ajax({  
            url: 'http://localhost:3617/admin/Calander/GetCalendar',  
            type: "GET",  
            dataType: "JSON",  
            success: function (result) {  
                $.each(result, function (i, data) {  
                    events.push(  
                   {  
                       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,  
                   });  
                });  
                GenerateCalander(events);  
  
            }  
        })  
  
  
  
    }  
  
    function UpdateEventDetails(eventId, StartDate, EndDate) {  
        debugger  
        var object = new Object();  
        object.Id = parseInt(eventId);  
        object.Start_Date = StartDate;  
        object.End_Date = EndDate;  
  
        $.ajax({  
            url: 'http://localhost:3617/admin/Calander/UpdateCalander',  
            type: "POST",  
            dataType: "JSON",  
            data: object,  
            success: function (result) {  
                debugger;  
                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>  
                        <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  
                                    </label>  
                                </div>  
                            </div>  
                        </div>  
                        <!-- /.card-body -->  
                    </div>  
                    <!-- /.card -->  
                    <div class="card">  
                        <div class="card-header">  
                            <h3 class="card-title">Create Event</h3>  
                        </div>  
                        <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>  
                                </ul>  
                            </div>  
                            <!-- /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>  
                                </div>  
                                <!-- /btn-group -->  
                            </div>  
                            <!-- /input-group -->  
                        </div>  
                    </div>  
                </div>  
            </div>  
            <!-- /.col -->  
            <div class="col-md-9">  
                <div class="card card-primary">  
                    <div class="card-body p-0">  
                        <!-- THE CALENDAR -->  
                        <div id="calendar"></div>  
                    </div>  
                    <!-- /.card-body -->  
                </div>  
                <!-- /.card -->  
            </div>  
            <!-- /.col -->  
        </div>  
        <!-- /.row -->  
    </div><!-- /.container-fluid -->  
</section>  
<!-- /.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.