JQUERY:Calculate age years ,month,days

function getAge(dateString) {
    var now = new Date();
    var today = new Date(now.getYear(), now.getMonth(), now.getDate());

    var yearNow = now.getYear();
    var monthNow = now.getMonth();
    var dateNow = now.getDate();

    var dob = new Date(dateString.substring(6, 10),
                     dateString.substring(0, 2) - 1,
                     dateString.substring(3, 5)
                     );

    var yearDob = dob.getYear();
    var monthDob = dob.getMonth();
    var dateDob = dob.getDate();
    var age = {};
    var ageString = "";
    var yearString = "";
    var monthString = "";
    var dayString = "";


    yearAge = yearNow - yearDob;

    if (monthNow >= monthDob)
        var monthAge = monthNow - monthDob;
    else {
        yearAge--;
        var monthAge = 12 + monthNow - monthDob;
    }

    if (dateNow >= dateDob)
        var dateAge = dateNow - dateDob;
    else {
        monthAge--;
        var dateAge = 31 + dateNow - dateDob;

        if (monthAge < 0) {
            monthAge = 11;
            yearAge--;
        }
    }

    age = {
        years: yearAge,
        months: monthAge,
        days: dateAge
    };

    if (age.years > 1) yearString = " years";
    else yearString = " year";
    if (age.months > 1) monthString = " months";
    else monthString = " month";
    if (age.days > 1) dayString = " days";
    else dayString = " day";


    if ((age.years > 0) && (age.months > 0) && (age.days > 0))
        ageString = age.years + yearString + ", " + age.months + monthString + ", and " + age.days + dayString ;
    else if ((age.years == 0) && (age.months == 0) && (age.days > 0))
        ageString = "Only " + age.days + dayString ;
    else if ((age.years > 0) && (age.months == 0) && (age.days == 0))
        ageString = age.years + yearString;
    else if ((age.years > 0) && (age.months > 0) && (age.days == 0))
        ageString = age.years + yearString + " and " + age.months + monthString ;
    else if ((age.years == 0) && (age.months > 0) && (age.days > 0))
        ageString = age.months + monthString + " and " + age.days + dayString;
    else if ((age.years > 0) && (age.months == 0) && (age.days > 0))
        ageString = age.years + yearString + " and " + age.days + dayString;
    else if ((age.years == 0) && (age.months > 0) && (age.days == 0))
        ageString = age.months + monthString;
    else ageString = "Could not calculate age!";

    return ageString;
}

JQUERY: CalculationAge only in years

function CalculationAge() {
        if ($("#DOB").val() != "") {
            var today = new Date(), // today date object
      birthday_val = $("#DOB").val().split('/'), // input value
      birthday = new Date(birthday_val[2], birthday_val[0] - 1, birthday_val[1]), // birthday date object
      todayYear = today.getFullYear(), // today year
      todayMonth = today.getMonth(), // today month
      todayDay = today.getDate(), // today day of month
      birthdayYear = birthday.getFullYear(), // birthday year
      birthdayMonth = birthday.getMonth(), // birthday month
      birthdayDay = birthday.getDate(), // birthday day of month
            // calculate age
      age = (todayMonth == birthdayMonth && todayDay > birthdayDay) ? todayYear - birthdayYear : (todayMonth > birthdayMonth) ? todayYear - birthdayYear : todayYear - birthdayYear - 1;

            $("#Age").val(age);
        }
        else
            $("#Age").val('0');
    }

Generate XML from Model Object

private string CreateXMLModalPhone(Demographics objDemographics)
        {
            String XmlString;
            XmlDocument objdoc = new XmlDocument();

            // declare your XML
            XmlNode declaration = objdoc .CreateNode(XmlNodeType.XmlDeclaration, null, null);
            objdoc.AppendChild(declaration);

            // Root element: RequestItemStatus
            XmlElement root = objdoc.CreateElement("Phone");
            objdoc.AppendChild(root);

            for (Int32 i = 0; i < objDemographics.PhoneType.Length; i++)
            {

                //your Main element: RequestItem
                XmlElement RequestItem = objdoc.CreateElement("PhoneNoDetails");
                root.AppendChild(RequestItem);

                //your Sub-element: RequestItemId
                XmlElement RequestItemId = objdoc.CreateElement("PhoneTypeId");
                RequestItemId.InnerText = objDemographics.PhoneType[i].ToString();
                RequestItem.AppendChild(RequestItemId);

                //your Sub-element: comments
                XmlElement comments = objdoc.CreateElement("PhoneNo");
                comments.InnerText = objDemographics.PhoneNo[i].ToString();
                RequestItem.AppendChild(comments);

            }

            XmlString = objdoc.InnerXml;

            return XmlString.ToString();
        }

JQUERY:Re arrange child div as per your choice

(function($) {
$.fn.reOrder = function(array) {
return this.each(function() {

if (array) { 
for(var i=0; i < array.length; i++) 
array[i] = $('div[id="' + array[i] + '"]');

$(this).empty();

for(var i=0; i < array.length; i++)
$(this).append(array[i]); 
}
}); 
}
})(jQuery);

var category_sort_order = ['divIsReport','divIsImportantNotes','divIsMyTask','divIsOnCallToday','divIsCASRecentResponse','divIsMyCalendar'];

$('#draggablePanelList').reOrder(category_sort_order);

draggablePanelList=>>main div id

child div names are passed in array

JQUERY: dt.toMMDDYYYYString()

Date.prototype.toMMDDYYYYString = function () { return isNaN(this) ? 'NaN' : [this.getMonth() > 8 ? this.getMonth() + 1 : '0' + (this.getMonth() + 1), this.getDate() > 9 ? this.getDate() : '0' + this.getDate(), this.getFullYear()].join('/') }

JQUERY: dt.toHHMMPPString

Date.prototype.toHHMMPPString = function () { return isNaN(this) ? 'NaN' : 
[this.getHours() > 8 ? (this.getHours() >= 12 ? this.getHours()-12 : this.getHours()) : '0' + (this.getHours()),
this.getMinutes() > 9 ? this.getMinutes() : '0' + this.getMinutes()].join(':') + " " + (this.getHours() >= 12 ? "PM" : "AM") }

OR

function settime(dt) {
var hours = dt.getHours()
var minutes = dt.getMinutes()
if (minutes < 10)
minutes = "0" + minutes

var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}

// set the date back to the current date
return hours + ":" + minutes + " " + suffix
}

SQL: Reference_Check SQL

select cast(f.name as varchar(255)) as foreign_key_name
, cast(c.name as varchar(255)) as foreign_table
, cast(fc.name as varchar(255)) as foreign_column
, cast(p.name as varchar(255)) as parent_table
, cast(rc.name as varchar(255)) as parent_column
from sysobjects f
inner join sysobjects c on f.parent_obj = c.id
inner join sysreferences r on f.id = r.constid
inner join sysobjects p on r.rkeyid = p.id
inner join syscolumns rc on r.rkeyid = rc.id and r.rkey1 = rc.colid
inner join syscolumns fc on r.fkeyid = fc.id and r.fkey1 = fc.colid
where f.type = 'F'
and cast(rc.name as varchar(255))='miscDemographics_Id'

SQL: Rollback parenet procedure if error in child proc also return error details and error proc name

BEGIN TRANSACTION MAIN_TRAN;
SELECT @InTransaction = 1; -- Set Transaction Flag true

BEGIN TRY EXEC sp_Address_Insert_Update @AddressID OUT,@sane_Address1,@sane_Address2,@sane_Zip,@sane_City,@sane_StateID,@sane_CountryID,@sane_AddressOnMap,@sane_lat,@sane_lon;
  END TRY
BEGIN CATCH
SELECT @ErrMsg = (
SELECT *
FROM(
SELECT ERROR_MESSAGE()ErrorMessage,
ERROR_LINE()ErrorLine,
ERROR_PROCEDURE()ErrorProcedure)a
FOR XML AUTO,ELEMENTS,ROOT('root'));
GOTO ErrHandler;
END CATCH;

COMMIT TRANSACTION MAIN_TRAN;

ErrHandler:
IF @InTransaction=1
BEGIN
ROLLBACK TRANSACTION MAIN_TRAN
END;
RAISERROR(@ErrMsg,16,1,0);
RETURN 0;

Stop a page from exit with jQuery and open window on close parent window

<!DOCTYPE html>
<html>
<head>
<title>Refresh a page in jQuery</title>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>

<body>

<h1>Stop a page from exit with jQuery</h1>

<script type="text/javascript">

$(window).bind('beforeunload', function(){
window.open('http://www.google.com','GoogleWindow', 800, 600);
return '>>>>>Before You Go<<<<<<<< \n Your custom message go here';
});

</script>

</body>
</html>

Custom Calender Using fullcalendar.js

Model

public class MyEvent
    {
        public int EventId { get; set; }
        public string tempEventId { get; set; }
        public string EventName { get; set; }
      
        public DateTime[] StartDate { get; set; }
        public DateTime[] EndDate { get; set; }
        public bool IsAllDay { get; set; }

        public List<SelectListItem> EventUserNameIdList = new List<SelectListItem>();
        public Int32? SelectedEventUserNameId { get; set; }

        public List<SelectListItem> EventCalendarRoleList = new List<SelectListItem>();
        public Int32? SelectedCalendarUserRoleId { get; set; }

        public List<SelectListItem> EventStatusList = new List<SelectListItem>();
        public Int32? SelectedEventStatusId { get; set; }

        public string EventNote { get; set; }

        public string[] StartTime { get; set; }
        public string[] EndTime { get; set; }

        public string MapStartDate { get; set; }
        public string MapEndDate { get; set; }
        public string MapStartTime { get; set; }
        public string MapEndTime { get; set; }


    }

Add these
fullcalendar.js
fullcalendar.css
fullcalendar.print.css

Main Page


        <!-- Calendar-view mode -->
        <div id='calendar' style="margin-top: 20px;">
        </div>

    <a id="lnkHdEventId" href="" data-ajax-update="#UpdatepanelModalMyEvents2" data-ajax-mode="replace" data-ajax-loading="#divLoading"
        data-ajax-method="POST" data-ajax="true" data-ajax-complete="ajaxcomplte();">
    </a>

 <div id="UpdatepanelModalMyEvents2" class="UpdatepanelModal">
    </div>

Script and my tricks
<script type="text/javascript">
    $(document).ready(function () {
        DisplayCalendar();
        Date.prototype.toMMDDYYYYString = function () { return isNaN(this) ? 'NaN' : [this.getMonth() > 8 ? this.getMonth() + 1 : '0' + (this.getMonth() + 1), this.getDate() > 9 ? this.getDate() : '0' + this.getDate(), this.getFullYear()].join('/') }

    });
    function ajaxcomplte() {
        $('#EventModal').modal('show');
    }
    function DisplayCalendar() {
     
        $.ajax({
            url: '/Events/GetEvents',
            type: "POST",
            data: "{}",
            contentType: 'application/json; charset=utf-8;',
            dataType: "json",
            success: function (data) {
                $('#calendar').html('');
                $('#calendar').fullCalendar({
                    selectable: true,
                    // editable: true,
                    defaultView: 'agendaWeek',
                    select: function (start, end, allDay) {
                        endtime = $.fullCalendar.formatDate(end, 'hh:mm TT');
                        starttime = $.fullCalendar.formatDate(start, 'hh:mm TT');
                        date = new Date(start);
                        var dateofEvent = date.toMMDDYYYYString();
                        NewEvent(dateofEvent, starttime, endtime, allDay);
                    },
                    events:
                        $.map(data.events, function (item, i) {
                            var event = new Object();
                            event.start = new Date(item.MapStartDate),
                            event.end = new Date(item.MapEndDate);
                            event.title = item.EventName;
                            event.allDay = false;
                            event.tempid = item.tempEventId;
                            return event;
                        }),
                        eventMouseover: function (calEvent, jsEvent) {
                            var tooltip = '<div class="tooltipevent calendertooltip">' + calEvent.title + '</div>';
                            $("body").append(tooltip);
                            $(this).mouseover(function (e) {
                                $(this).css('z-index', 10000);
                                $('.tooltipevent').fadeIn('500');
                                $('.tooltipevent').fadeTo('10', 1.9);
                            }).mousemove(function (e) {
                                $('.tooltipevent').css('top', e.pageY + 10);
                                $('.tooltipevent').css('left', e.pageX + 20);
                            });
                        },

                        eventMouseout: function (calEvent, jsEvent) {
                            $(this).css('z-index', 8);
                            $('.tooltipevent').remove();
                        },
                    eventClick: function (event, element) {
                        UpdateMyEvent(event);
                    }
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                var errorMessage = '';
                alert(XMLHttpRequest.responseText);
            }
        });
    }

    function UpdateMyEvent(event) {
          if (valdarr[0]["IsEdit"]) {
            var id = event.tempid;
            if (id != '') {
                var url = "/Events/SetEventId?id=" + id;
                var objurl = $('#lnkHdEventId');
                objurl.attr("href", url);
                objurl.trigger('click');
            }
        }
        else {
            alert("Access Denied");
        }
    }


    function NewEvent(dateofEvent, starttime, endtime, allDay) {
        if (valdarr[0]["IsAdd"]) {
            var url = "/Events/SetEventId?dateofEvent=" + dateofEvent + "&starttime=" + starttime + "&endtime=" + endtime + "&allDay=" + allDay;
            var objurl = $('#lnkHdEventId');
            objurl.attr("href", url);
            objurl.trigger('click');
        }
        else {
            alert("Access Denied");
        }
    }

</script>


Modal partial page

@model PCCAS.Models.MyEvent
@using DAL;
@using PCCAS.Models;
@using PCCAS.Common;
@{var flag = 0;}
<div id="EventModal" class="modal hide fade longmodal" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            x</button>
        @if (Model.EventId == 0)
        {
            <h3 id="myModalLabel1">
                Add Event
            </h3>
        }
        else
        {
            <h3 id="myModalLabel1">
                Edit Event
            </h3>
        }
    </div>
    @using (Ajax.BeginForm("EventPost", "Events", "", new AjaxOptions { UpdateTargetId = "ajaxtest", LoadingElementId = "divLoading", OnSuccess = "ModalSuccessEventPost", OnFailure = "ErrorEventPost" }, new { id = "frmEventPost", @class = "form-horizontal" }))
    {
        <div class="modal-body">
            <span class="twoColumnFrom">
                <label for="name">
                    User Name:</label>
                @Html.DropDownListFor(m => m.SelectedEventUserNameId, Model.EventUserNameIdList, new { vid = "SelectedEventUserNameId", required = "required", @class = "input_size" })
            </span><span class="twoColumnFrom">
                <label for="name">
                    User Role:</label>
                @Html.DropDownListFor(m => m.SelectedCalendarUserRoleId, Model.EventCalendarRoleList, new { vid = "SelectedCalendarUserRoleId", required = "required", @class = "input_size" })
            </span>
            @{var context = new PCCASEntities();

              MyEvent objMyEvent = new MyEvent();
              var EventId = Model.EventId;
              var events = context.EventDetails.Where(m => m.EventDetails_EventId == EventId).ToList();
                <span id="spanEvent">
                    @if (events.Count != 0)
                    {
                        foreach (var evnt in events)
                        {
                            var randdEvent = "EventNo_" + flag;
                            var randdStartTime = "StartTime_" + flag;
                            var randdEndTime = "EndTime_" + flag;
                            var randdEventDel = "EventDel_" + flag;
                            var ParentEventDivId = "EventParentId_" + flag;
       
                        <div class="row-fluid" id=@ParentEventDivId>
                            <div>
                                <span class="fourColumnFrom">
                                    <label>
                                        Event Date:</label>
                                    <div class="input-append date-only">
                                        @Html.TextBox("StartDate", @evnt.EventDetails_StartDate == null ? "" : @evnt.EventDetails_StartDate.Value.ToString("MM/dd/yyyy"), new { @id = @randdEvent, name = "StartDate", vid = "StartDate", @class = "modaldate", required = "required", placeholder = "MM/DD/YYYY", @pastdate = "true" })
                                        <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                        </span>
                                    </div>
                                </span><span class="fourColumnFrom">
                                    <label>
                                        Start Time:</label>
                                    <div class="input-append time-only">
                                        @Html.TextBox("StartTime", @evnt.EventDetails_StartTime == null ? "" : @evnt.EventDetails_StartTime, new { @id = @randdStartTime, @name = "StartTime", vid = "StartTime", @class = "modaldate", required = "required", })
                                        <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                        </span>
                                    </div>
                                </span><span class="fourColumnFrom">
                                    <label>
                                        End Time:</label>
                                    <div class="input-append time-only">
                                        @Html.TextBox("EndTime", @evnt.EventDetails_EndTime == null ? "" : @evnt.EventDetails_EndTime, new { @id = @randdEndTime, @name = "EndTime", vid = "EndTime", @class = "modaldate", required = "required", })
                                        <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                        </span>
                                    </div>
                                </span>
                            </div>
                            <div class="span1 marL5 marTop25">
                                <div class="row-fluid delete_btn">
                                    @if (flag > 0)
                                    {
                                        <button class="del" id=@randdEventDel title="Del a Event" type="button"  onclick="DelEvent('@ParentEventDivId')">
                                            -</button>
                                    }
                                    else
                                    {
                                        <button class="posRelative top2" id="addEvent" title="Add Another Event" type="button">
                                            +</button>
                                                   
                                    }
                                </div>
                            </div>
                        </div>
                                    flag++;
                        }
                    }
                    else
                    {
                        <div class="row-fluid" id="EventParentId_0">
                            <span class="fourColumnFrom">
                                <label>
                                    Event Date:</label>
                                <div class="input-append date-only">
                                    @Html.TextBox("StartDate", "", new { @id = "EventNo_0", @name = "StartDate", vid = "StartDate", @class = "modaldate", required = "required", placeholder = "MM/DD/YYYY", @pastdate = "true" })
                                    <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                    </span>
                                </div>
                            </span><span class="fourColumnFrom">
                                <label>
                                    Start Time:</label>
                                <div class="input-append time-only">
                                    @Html.TextBox("StartTime", "", new { @id = "StartTime_0", @name = "StartTime", vid = "StartTime", @class = "modaldate", required = "required", })
                                    <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                    </span>
                                </div>
                            </span><span class="fourColumnFrom">
                                <label>
                                    End Time:</label>
                                <div class="input-append time-only">
                                    @Html.TextBox("EndTime", "", new { @id = "EndTime_0", @name = "EndTime", vid = "EndTime", @class = "modaldate", required = "required", })
                                    <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                    </span>
                                </div>
                            </span>
                            <div class="span1 marL5 marTop25">
                                <div class="row-fluid">
                                    <button class="posRelative top2" id="addEvent" title="Add Another Event" type="button">
                                        +</button>
                                </div>
                            </div>
                        </div>
                        flag++;
                    }
                </span>
            }
            <span class="twoColumnFrom">
                <label for="name">
                    Approval Status:</label>
                @Html.DropDownListFor(m => m.SelectedEventStatusId, Model.EventStatusList, new { vid = "SelectedEventStatusId", @class = "input_size" })
            </span>
            <span class="twoColumnCheckBoxArea">
                <label>
                    Notes:</label>
                @Html.TextAreaFor(m => m.EventNote, new { vid = "EventNote", @class = "span8 width98P", @rows = "3", style = "resize: none;" })
            </span>
            @Html.HiddenFor(m => m.EventId)
            @Html.HiddenFor(m => m.IsAllDay)
            @Html.HiddenFor(m => m.MapStartDate)
            @Html.HiddenFor(m => m.MapStartTime)
            @Html.HiddenFor(m => m.MapEndTime)
        </div>
        <div class="modal-footer">
    <input type="image" src="@Url.Content("~/Content/images/save.png")" id="btnModalSave" alt="Save" title="Save" />
    <a href="javascript:void(0);" data-dismiss="modal">
        <img src="@Url.Content("~/Content/images/cancel.png")" alt="Cancel" title="Cancel" data-dismiss="modal"></a>
    <a href="javascript:void(0)" id="btnModalDel" class="btn btn-danger" style="display: none;">
        Delete</a>
</div>
    }
</div>
<script type="text/javascript">
    function ModalSuccessEventPost() {
        $('#EventModal').modal('hide');
        DisplayCalendar();

    }
    // on error save of ErrorEventPost
    function ErrorEventPost() {

    }

</script>
<script type="text/javascript">
    $(document).ready(function () {
     ModalAjaxAction = "MyCalendar";
     $('#frmEventPost #btnModalDel').attr("eid", "lnk" + ModalAjaxAction + "Delete");

    for (i = 0; i < valdarr.length; i++) {
    if(valdarr[i]["Name"] =="OtherUser" && (!valdarr[i]["IsAdd"]))
    {
     $("#SelectedEventUserNameId").select2("enable", false);
   
    }

   }

    if ($('#EventId').val() != 0) {
    $('#btnModalDel').show();
    }
    else
    {
    $('#btnModalDel').remove();
    }
     Date.prototype.toMMDDYYYYString = function () { return isNaN(this) ? 'NaN' : [this.getMonth() > 8 ? this.getMonth() + 1 : '0' + (this.getMonth() + 1), this.getDate() > 9 ? this.getDate() : '0' + this.getDate(), this.getFullYear()].join('/') }
        if ($('#EventId').val() == 0) {
            $('#frmEventPost input[vid=StartTime]').val($('#MapStartTime').val());
            $('#frmEventPost input[vid=EndTime]').val($('#MapEndTime').val());
            $('#frmEventPost input[vid=StartDate]').val($('#MapStartDate').val());
        }

        var counterEvent = @flag;

        $("#addEvent").click(function () {
            var randdEvent = "EventNo_" + counterEvent;
            var randdStartTime = "StartTime_" + counterEvent;
            var randdEndTime = "EndTime_" + counterEvent;
            var randdEventDel = "EventDel_" + counterEvent;
            var ParentEventDivId = "EventParentId_" + counterEvent;
            //set next date to date textbox
           
            var lastdivid=$("#spanEvent input:last").attr('id');
            var arr = lastdivid.split('_');
            var counter=arr[1];
            var nextdate=new Date( $('#EventNo_'+counter).val());
            nextdate.setDate(nextdate.getDate() + 1);

            $("#EventParentId_0").clone().appendTo("#spanEvent");
            $("#spanEvent #EventParentId_0:last-child").html($("#spanEvent #EventParentId_0").last().html().replace(/_0/g, "_" + counterEvent).replace("+", "-").replace('id="addEvent"', "id='" + randdEventDel + "'"));
            $('#' + randdEventDel).attr('class', 'posRelative top2 del');
            $('#' + randdEventDel).attr('onclick', 'DelEvent(\"' + ParentEventDivId + '\")');
            $("#spanEvent #EventParentId_0:last-child").attr("id", "EventParentId_" + counterEvent);
            //set next date to date textbox
            $("#"+randdEvent).val(nextdate.toMMDDYYYYString());
            $("#"+randdStartTime).val( $('#StartTime_'+counter).val());
            $("#"+randdEndTime).val( $('#EndTime_'+counter).val());
            counterEvent++;
           
            $('select').select2({
                placeholder: "Select"
            });

            $('.date-only').datetimepicker({
                pickTime: false,
                pickDate: true
            }).on('changeDate', function (ev) {
                if ($(this).children('input').attr('onchange') != undefined) {
                    var func = $(this).children('input').attr('onchange');
                    func = func.replace("();", "");
                    if (func != undefined) {
                        eval(func)();
                    }
                }
            });

            $('.time-only').datetimepicker({
                format: 'hh:mm PP',
                language: 'en',
                pickTime: true,
                pickDate: false,
                pickSeconds: false,
                pick12HourFormat: true
            }).on('changeDate', function (ev) {
                if ($(this).children('input').attr('onchange') != undefined) {
                    var func = $(this).children('input').attr('onchange');
                    func = func.replace("();", "");
                    if (func != undefined) {
                        eval(func)();
                    }
                }
            });

        });
    });

    function DelEvent(EventParentDivId) {
        if (confirm("Are you sure you want to delete this event?")) {
            $("#" + EventParentDivId).remove();
        }
    }
    $('#btnModalDel').click(function () {
    if(!$(this).hasClass("disabled"))
    {
        if (confirm("Are you sure you want to delete this event series?")) {
            var id = $('#EventId').val();
             if (id != 0) {
                $.ajax({
                url: '/Events/DeleteEvent',
                type: 'POST',
                data: "{id:" + id + "}",
                contentType: 'application/json; charset=utf-8;',
                dataType: 'json',
                success: function (result) {
                ModalSuccessEventPost();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    var errorMessage = '';
                    alert(jqXHR.responseText);
                }
            });
            }
        }
        }
 });

   

</script>






Controller

 public ActionResult Calendar()
        {
            return View();
        }

        public ActionResult MyCalendar()
        {
            MyEvent objMyEvent = new MyEvent();
            using (var context = new PCCASEntities())
            {
                try
                {
                    objMyEvent.SelectedEventUserNameId = Convert.ToInt32(Session["UserId"]);
                    int selectedid2 = 0;
                    var ReceivedByList = context.appUsers.Select(d => new { appUsers_ID = d.appUsers_ID, appUsers_UserName = d.appUsers_FullName }).Distinct().AsEnumerable().
                        Select(x => new SelectListItem { Text = x.appUsers_UserName, Value = x.appUsers_ID.ToString(), Selected = x.appUsers_ID.Equals(selectedid2) }).ToList();
                    ReceivedByList.Insert(0, new SelectListItem { Text = "Select", Value = "" });
                    objMyEvent.EventUserNameIdList = ReceivedByList;

                    ///Populate EventStatusList Dropdown
                    objMyEvent.EventStatusList = Globals.BindDropdown("ApprovalStatus", "MyCalendar", objMyEvent.SelectedEventStatusId);

                    ///Populate EventStatusList Dropdown
                    objMyEvent.EventCalendarRoleList = Globals.BindDropdown("CalendarRole", "MyCalendar", objMyEvent.SelectedCalendarUserRoleId);


                    return View(objMyEvent);
                }
                catch (Exception ex)
                {
                    return View(objMyEvent);
                }
            }

        }

        public JsonResult GetEvents()
        {
            List<MyEvent> objMyEventList = new List<MyEvent>();
            var userid = Convert.ToInt32(Session["UserId"]);
            Event_Select_Result objEvent_Select_Result = new Event_Select_Result();
            using (var context = new PCCASEntities())
            {
                IEnumerable<Event_Select_Result> events = context.Event_Select(userid).ToList();

                foreach (var EventId in events)
                {
                    MyEvent objMyEvent = new MyEvent();
                    objMyEvent.tempEventId = Convert.ToString(EventId.Event_Id);
                    objMyEvent.EventName = EventId.EventTitle;
                    objMyEvent.MapStartDate = EventId.StartDate;
                    objMyEvent.MapEndDate = EventId.EndDate;
                    objMyEventList.Add(objMyEvent);
                }
                var result = objMyEventList;

                return Json(new { events = result }, JsonRequestBehavior.AllowGet);
            }
        }


        [HttpPost]
        public PartialViewResult Event(int? id)
        {
            MyEvent objMyEvent = new MyEvent();
            TempData["ShowMsg"] = false;

            try
            {
                using (var context = new PCCASEntities())
                {
                    var userid = Convert.ToInt32(Session["UserId"]);
                    var result = context.Events.FirstOrDefault(i => i.Event_Id == id);
                    if (result != null)
                    {
                        objMyEvent.SelectedEventUserNameId = result.Event_UserNameId;
                        objMyEvent.SelectedCalendarUserRoleId = result.Event_UserRole;

                    }
                    return PartialView("MyCalendarPartial", objMyEvent);
                }

            }
            catch (Exception ex)
            {
                var err = (((ex.InnerException).Message.IndexOf('\r') > 0) ? (ex.InnerException).Message.Substring(0, (ex.InnerException).Message.IndexOf('\r')) : (ex.InnerException).Message);
                TempData["ShowMsg"] = true;
                TempData["Error"] = true;
                TempData["Msg"] = err;
                return PartialView("MyCalendarPartial", objMyEvent);

            }
        }

        [HttpPost]
        public JsonResult EventPost(MyEvent objMyEvent, FormCollection frm)
        {
            Event_Insert_Update_Result objEvent_Insert_Update_Result = new Event_Insert_Update_Result();
            string msg = "";
            using (var context = new PCCASEntities())
            {
                try
                {
                    string RecordString = CreateXMLDocumentEvent(objMyEvent);
                    objMyEvent.IsAllDay = Convert.ToBoolean(frm["apptAllDay"]);
                    objMyEvent.SelectedEventUserNameId =objMyEvent.SelectedEventUserNameId.HasValue ? objMyEvent.SelectedEventUserNameId : Convert.ToInt32(Session["UserId"]);
                    //var username = frm["SelectedEventUserNameId"];
                    objEvent_Insert_Update_Result = context.Event_Insert_Update(objMyEvent.EventId, objMyEvent.SelectedEventUserNameId, objMyEvent.SelectedCalendarUserRoleId, objMyEvent.SelectedEventStatusId,
                        Convert.ToInt32(Session["UserId"]), objMyEvent.IsAllDay, objMyEvent.EventNote, RecordString).FirstOrDefault();

                    if (objEvent_Insert_Update_Result.FLAG == 1)
                    {
                        msg = "Information Saved";
                    }
                    else
                    {
                        msg = "Information Updated";
                    }
                    return Json(new { sView = "", IsSuccess = true }, JsonRequestBehavior.AllowGet);
                }
                catch (Exception ex)
                {
                    return Json(new { sView = ex.InnerException.Message, IsSuccess = false }, JsonRequestBehavior.AllowGet);
                }
            }
        }

        public PartialViewResult SetEventId(int? id, string dateofEvent, string starttime, string endtime, string allDay)
        {
            MyEvent objMyEvent = new MyEvent();
            try
            {
                using (var context = new PCCASEntities())
                {
                    objMyEvent.SelectedEventUserNameId = Convert.ToInt32(Session["UserId"]);
                    int selectedid2 = 0;
                    var ReceivedByList = context.appUsers.Select(d => new { appUsers_ID = d.appUsers_ID, appUsers_UserName = d.appUsers_FullName }).Distinct().AsEnumerable().
                        Select(x => new SelectListItem { Text = x.appUsers_UserName, Value = x.appUsers_ID.ToString(), Selected = x.appUsers_ID.Equals(selectedid2) }).ToList();
                    ReceivedByList.Insert(0, new SelectListItem { Text = "Select", Value = "" });
                    objMyEvent.EventUserNameIdList = ReceivedByList;

                    ///Populate EventStatusList Dropdown
                    objMyEvent.EventStatusList = Globals.BindDropdown("ApprovalStatus", "MyCalendar", objMyEvent.SelectedEventStatusId);

                    ///Populate EventStatusList Dropdown
                    objMyEvent.EventCalendarRoleList = Globals.BindDropdown("CalendarRole", "MyCalendar", objMyEvent.SelectedCalendarUserRoleId);

                    if (id.HasValue)
                    {
                        var vid = Convert.ToInt32(id);
                        var events = context.Events.Where(m => m.Event_Id == vid).FirstOrDefault();
                        objMyEvent.SelectedCalendarUserRoleId = events.Event_UserRole;
                        objMyEvent.SelectedEventUserNameId = events.Event_UserNameId;
                        objMyEvent.SelectedEventStatusId = events.Event_StatusId;
                        objMyEvent.EventId = vid;
                    }
                    else
                    {
                        var userid = Convert.ToInt32(Session["UserId"]);

                        objMyEvent.SelectedEventUserNameId = userid;
                        objMyEvent.MapStartDate = dateofEvent;
                        objMyEvent.MapStartTime = starttime;
                        objMyEvent.MapEndTime = endtime;
                        objMyEvent.IsAllDay = Convert.ToBoolean(allDay);
                        objMyEvent.EventId = 0;
                    }
                    return PartialView("MyCalendarPartial", objMyEvent);
                }

            }
            catch (Exception ex)
            {
                var err = (((ex.InnerException).Message.IndexOf('\r') > 0) ? (ex.InnerException).Message.Substring(0, (ex.InnerException).Message.IndexOf('\r')) : (ex.InnerException).Message);
                TempData["ShowMsg"] = true;
                TempData["Error"] = true;
                TempData["Msg"] = err;
                return PartialView("MyCalendarPartial", objMyEvent);

            }

        }

        private string CreateXMLDocumentEvent(MyEvent objMyEvent)
        {
            String XmlString;
            XmlDocument doc = new XmlDocument();

            // XML declaration
            XmlNode declaration = doc.CreateNode(XmlNodeType.XmlDeclaration, null, null);
            doc.AppendChild(declaration);

            // Root element: RequestItemStatus
            XmlElement root = doc.CreateElement("Event");
            doc.AppendChild(root);

            for (Int32 i = 0; i < objMyEvent.StartDate.Length; i++)
            {

                // Main element: RequestItem
                XmlElement RequestItem = doc.CreateElement("EventDetails");
                root.AppendChild(RequestItem);

                // Sub-element: EventDate
                XmlElement RequestItemId = doc.CreateElement("EventDate");
                RequestItemId.InnerText = objMyEvent.StartDate[i].ToString();
                RequestItem.AppendChild(RequestItemId);

                // Sub-element: StartTime
                XmlElement comments = doc.CreateElement("StartTime");
                comments.InnerText = objMyEvent.StartTime[i].ToString();
                RequestItem.AppendChild(comments);

                // Sub-element: EndTime
                XmlElement endtime = doc.CreateElement("EndTime");
                endtime.InnerText = objMyEvent.EndTime[i].ToString();
                RequestItem.AppendChild(endtime);

            }

            XmlString = doc.InnerXml;

            return XmlString.ToString();
        }

        [HttpPost]
        public JsonResult DeleteEvent(Int32? id)
        {
            using (var context = new PCCASEntities())
            {
                try
                {
                    Event_delete_Result objEvent_delete_Result = new Event_delete_Result();
                    objEvent_delete_Result = context.Event_delete(id).SingleOrDefault();
                    if (objEvent_delete_Result.FLAG == 1)
                    {
                        return Json(new { sView = "Event deleted", IsSuccess = true }, JsonRequestBehavior.AllowGet);
                    }
                    return Json(new { sView = "", IsSuccess = true }, JsonRequestBehavior.AllowGet);
                }
                catch (Exception ex)
                {
                    return Json(new { sView = ex.InnerException.Message, IsSuccess = false }, JsonRequestBehavior.AllowGet);
                }
            }
        }

DATABASE

create table Event 

[Event_Id] [int] IDENTITY(1,1) NOT NULL,
    [Event_UserNameId] [int] NULL,
    [Event_UserRole] [int] NULL,
    [Event_StatusId] [int] NULL,
    [Event_UserId] [int] NOT NULL,
    [Event_Note] [varchar](max) NULL,
    [Event_IsActive] [bit] NULL,

CREATE TABLE [dbo].[EventDetails](
    [EventDetails_Id] [int] IDENTITY(1,1) NOT NULL,
    [EventDetails_EventId] [int] NOT NULL,
    [EventDetails_StartDate] [datetime] NULL,
    [EventDetails_EndDate] [datetime] NULL,
    [EventDetails_StartTime] [varchar](50) NULL,
    [EventDetails_EndTime] [varchar](50) NULL,
    [EventDetails_IsAllDay] [bit] NULL,
 CONSTRAINT [PK_EventDetails] PRIMARY KEY CLUSTERED
(
    [EventDetails_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]

GO

SET ANSI_PADDING OFF
GO

ALTER TABLE [dbo].[EventDetails]  WITH CHECK ADD  CONSTRAINT [FK_EventDetails_Event] FOREIGN KEY([EventDetails_EventId])
REFERENCES [dbo].[Event] ([Event_Id])
GO


Store proc

ALTER PROCEDURE [dbo].[sp_Event_Select]
@UserId int
AS
BEGIN
    SELECT Event.Event_Id,
    dbo.fn_getUserNameById_Select(Event.Event_UserNameId)+' ('+ dbo.dmnValue_Select(Event.Event_UserRole)+')'
    +' '+
        CASE
            WHEN Event.Event_Note IS NOT NULL  THEN '<br/>Notes: '+Event.Event_Note
            ELSE ''
        END
    --+' Notes:'+Event.Event_Note
     as EventTitle,
    CONVERT(VARCHAR(10),EventDetails.EventDetails_StartDate,111)+' '+EventDetails_StartTime as StartDate,
    CONVERT(VARCHAR(10),EventDetails.EventDetails_EndDate,111)+' '+EventDetails_EndTime as EndDate
    FROM dbo.Event join EventDetails on  Event.Event_Id = EventDetails.EventDetails_EventId
    WHERE  Event.Event_UserId= @UserId and Event.Event_IsActive=1
END 

=============================================================


ALTER PROCEDURE [dbo].[sp_Event_Insert_Update]
     @Event_Id int,
     @Event_UserNameId int,
     @Event_UserRole int,
     @Event_StatusId int,
     @Event_UserId int,
     @EventDetails_IsAllDay bit,
     @Event_Note varchar(max),
     @EventXML varchar(max)

AS
BEGIN
    DECLARE @ErrMsg varchar(max);
    DECLARE @InTransaction bit;
    SELECT @InTransaction = 0;
    DECLARE @FLAG int = 0;
    DECLARE @i int
   
    SET NOCOUNT OFF
    SET FMTONLY OFF
   
    CREATE TABLE #TempDetails
            (
                EventDate datetime,
                StartTime VARCHAR(50),
                EndTime VARCHAR(50),
            )
        EXEC sp_xml_preparedocument @i OUTPUT, @EventXML
        INSERT INTO #TempDetails(EventDate, StartTime,EndTime)
        SELECT EventDate, StartTime,EndTime
        FROM OPENXML(@i, '/Event/EventDetails',2)
        WITH (EventDate datetime, StartTime VARCHAR(50),EndTime VARCHAR(50))
        EXEC sp_xml_removedocument @i

    BEGIN TRANSACTION MAIN_TRAN;
    SELECT @InTransaction = 1; -- Set Transaction Flag true

    -- For insert
    IF @Event_Id=0
       BEGIN
          BEGIN TRY
             INSERT INTO dbo.Event(Event_UserNameId,
                               Event_UserRole,
                               Event_StatusId,
                               Event_UserId,
                               Event_Note,
                               Event_IsActive)
             VALUES(@Event_UserNameId,
                   @Event_UserRole,
                   @Event_StatusId,
                   @Event_UserId,
                   @Event_Note,
                   1);

             SET @Event_Id = @@IDENTITY;

             INSERT INTO dbo.EventDetails(EventDetails_EventId,
                                    EventDetails_StartDate,
                                    EventDetails_EndDate,
                                    EventDetails_StartTime,
                                    EventDetails_EndTime
                                    )
             SELECT @Event_Id,
                   EventDate,
                   EventDate,
                   StartTime,
                  EndTime FROM #TempDetails


             SET @FLAG = 1;
          END TRY
          BEGIN CATCH
             SELECT @ErrMsg = (
                            SELECT *
                             FROM(
                            SELECT ERROR_MESSAGE()ErrorMessage,
                                 ERROR_LINE()ErrorLine,
                                 ERROR_PROCEDURE()ErrorProcedure)a
                             FOR XML AUTO,ELEMENTS,ROOT('root'));
             GOTO ErrHandler;
          END CATCH;
       END
    ELSE
       BEGIN
          BEGIN TRY
             UPDATE dbo.Event
             SET Event_UserNameId = @Event_UserNameId,
                Event_UserRole = @Event_UserRole,
                Event_StatusId = @Event_StatusId,
                Event_UserId = @Event_UserId,
                Event_Note=@Event_Note
               WHERE Event_Id=@Event_Id;
         
          DELETE FROM EventDetails WHERE EventDetails_EventId=@Event_Id
         
          INSERT INTO dbo.EventDetails(EventDetails_EventId,
                                    EventDetails_StartDate,
                                    EventDetails_EndDate,
                                    EventDetails_StartTime,
                                    EventDetails_EndTime
                                    )
             SELECT @Event_Id,
                   EventDate,
                   EventDate,
                   StartTime,
                  EndTime FROM #TempDetails
                  
             SET @FLAG = 2;
          END TRY
          BEGIN CATCH
             SELECT @ErrMsg = (
                            SELECT *
                             FROM(
                            SELECT ERROR_MESSAGE()ErrorMessage,
                                 ERROR_LINE()ErrorLine,
                                 ERROR_PROCEDURE()ErrorProcedure)a
                             FOR XML AUTO,ELEMENTS,ROOT('root'));
             GOTO ErrHandler;
          END CATCH;
       END;
  
    ---- Commit The Transaction
    SELECT Event_Id = @Event_Id,
         FLAG = @FLAG;
    COMMIT TRANSACTION MAIN_TRAN;-- all ends well
    RETURN 1;

    ErrHandler:
    IF @InTransaction=1
       BEGIN
          ROLLBACK TRANSACTION MAIN_TRAN;
       END;
    RAISERROR(@ErrMsg,16,1,0);
    RETURN 0;
END;
==========================================================


ALTER PROCEDURE [dbo].[sp_Event_delete]
    @EventId int
    AS
    BEGIN
        DECLARE @ErrMsg varchar(255)
        DECLARE @InTransaction bit
        SELECT @InTransaction = 0
        DECLARE @FLAG INT=0

        BEGIN TRANSACTION MAIN_TRAN
        SELECT @InTransaction = 1 -- Set Transaction Flag true

        BEGIN
            UPDATE dbo.Event
                SET
                Event_IsActive=0
                WHERE
                Event_Id=@EventId
                set @FLAG=1   
            SELECT @ErrMsg = @@ERROR
            IF (@@ERROR <> 0) GOTO ErrHandler
        END
             
        ---- Commit The Transaction
        SELECT EventId=@EventId,FLAG= @FLAG
        COMMIT TRANSACTION MAIN_TRAN-- all ends well
        RETURN 1

        ErrHandler:
        IF (@InTransaction = 1)
        BEGIN
        ROLLBACK TRANSACTION MAIN_TRAN
        END
        RAISERROR(@ErrMsg, 16, 1, 0)
        RETURN 0
    END


CSS

.datemodal{
    height: 30px !important;
    width: 83% !important;
}
.calendertooltip
{
    width:100px;height:100px;background:#E5E5E5;position:absolute;z-index:10001;padding:4px;
}


.icon-docx{
    background-image: url("../images/docx-logo.png");
    background-position: 14px 14px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 70px;
    line-height: 14px;
    margin-top: 1px;
    vertical-align: middle;
    width: 70px;
}