Convert time to HH:MM AM format by jquery

var dt = new Date();   

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
    }

//call the function
        var time=settime(dt);

//set the time in your text box
        $('#CallTime').val(time);

jQuery UI Touch Punch

Using Touch Punch is as easy as 1, 2…

Just follow these simple steps to enable touch events in your jQuery UI app:

1. Include jQuery and jQuery UI on your page.

   <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
   <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

2. Include Touch Punch after jQuery UI and before its first use.
   Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.

   <script src="jquery.ui.touch-punch.min.js"></script>

3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.

   <script>$('#widget').draggable();</script>

Reference: http://touchpunch.furf.com/

How to target iOS with jQuery

Mobile Safari for iOS comes with it’s own little quirks, like scaling your background images or needing a lighter page footprint when on 3G. Fortunately targeting the devices that pack mobile Safari is pretty easy.  Here is a little snippet:

//INCLUDE LATEST VERSION OF JQUERY
<script src="http://code.jquery.com/jquery-latest.js"></script>
$(document).ready(function(){
var device = navigator.userAgent.toLowerCase();
var ios = device.match(/(iphone|ipod|ipad)/);
if (ios) {
     //ADD CLASSES HERE THAT WILL ONLY APPLY TO IOS
     $("some-element").addClass("some-class");
     }
}); 

Reference:

http://www.rufusmedia.com/journal/2011/05/how-to-target-ios-with-jquery 

remove scroll from fullcalendar in week view and dayview

 function resizeCalendar() {
        var currentView = $('#calendar').fullCalendar('getView');
        if (currentView.name === 'agendaWeek' || currentView.name === 'agendaDay') {
            currentView.setHeight(9999);
        }
    }
    $(window).on('resize', resizeCalendar);


 $('#calendar').fullCalendar({
                    selectable: true,
                    viewDisplay: resizeCalendar //this is the trick
})

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;
}