locked
JQuery calendar to display event data from Database RRS feed

  • Question

  • User-1218295081 posted

    Dears.

    Greetings,

    I want to know how can i build JQuery calendar to display selected date events from database .

    I need to do something like http://imgur.com/a/7u4nV

    Thank you

    Wednesday, May 10, 2017 8:44 AM

Answers

  • User-271186128 posted

    Hi md_refay,

    I suggest you could refer to the following steps:

    First, using JQuery Ajax to call web method or web service and get the selected date, and insert them into an Array.

    Then, refer to the following code to set the date on the JQuery DatePicker plugin:

        <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <style>
            * {
                margin: 0 auto;
                padding: 0;
            }
    
            body {
                background-color: #F2F2F2;
            }
    
            .container {
                margin: 0 auto;
                width: 920px;
                padding: 50px 20px;
                background-color: #fff;
            }
    
            h3 {
                text-align: center;
            }
    
            #calendar {
                margin-top: 40px;
            }
    
            .event a {
                background-color: #42B373 !important;
                background-image: none !important;
                color: #ffffff !important;
            }
        </style>
    
        <script type="text/javascript">
            $(document).ready(function () {
    
                // An array of dates
                var eventDates = {};
                eventDates[new Date('5/04/2017')] = new Date('5/04/2017');
                eventDates[new Date('5/06/2017')] = new Date('5/06/2017');
                eventDates[new Date('5/20/2017')] = new Date('5/20/2017');
                eventDates[new Date('5/25/2017')] = new Date('5/25/2017');
    
                // datepicker
                $('#calendar').datepicker({
                    beforeShowDay: function (date) {
                        var highlight = eventDates[date];
                        if (highlight) {
                            return [true, "event", highlight];
                        } else {
                            return [true, '', ''];
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container">
                <h3>Highlight Particular Dates in JQuery UI Datepicker </h3>
    
                <div id="calendar"></div>
            </div>
        </form>
    </body>

    Code from this link.

    The output as below:

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 11, 2017 3:03 AM
  • User-1768369891 posted

    Need to some change in your js code...

    <script type="text/javascript">
    var eventDates = {};
            $(function () {
                $.ajax({
                    type: "POST",
                    url: "Default2.aspx/GetEvents",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            });
    
            function OnSuccess(response) {
               
                
     $(response.d).each(function (i, e) {
                    eventDates[convertDate(e.EventDate)] = convertDate(e.EventDate);
                });
    
    
    
                $('#calendar').datepicker({
                    beforeShowDay: function (date) {                     
                        var highlight = eventDates[convertDate(date)];
                       // alert(highlight);
                        if (highlight) {
                            return [true, "event", highlight];
                        } else {
                            return [true, '', ''];
                        }
                    }
                });
            }
        
            function convertDate(inputFormat) {
                function pad(s) { return (s < 10) ? '0' + s : s; }
                var d = new Date(inputFormat);
                return [pad(d.getDate()), pad(d.getMonth() + 1), d.getFullYear()].join('/');
            }  
    
        </script>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 12, 2017 6:51 AM

All replies

  • User-1218295081 posted

    Thank you

    But i want to do something like this

    http://imgur.com/a/7u4nV

    Wednesday, May 10, 2017 10:55 AM
  • User-271186128 posted

    Hi md_refay,

    I suggest you could refer to the following steps:

    First, using JQuery Ajax to call web method or web service and get the selected date, and insert them into an Array.

    Then, refer to the following code to set the date on the JQuery DatePicker plugin:

        <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <style>
            * {
                margin: 0 auto;
                padding: 0;
            }
    
            body {
                background-color: #F2F2F2;
            }
    
            .container {
                margin: 0 auto;
                width: 920px;
                padding: 50px 20px;
                background-color: #fff;
            }
    
            h3 {
                text-align: center;
            }
    
            #calendar {
                margin-top: 40px;
            }
    
            .event a {
                background-color: #42B373 !important;
                background-image: none !important;
                color: #ffffff !important;
            }
        </style>
    
        <script type="text/javascript">
            $(document).ready(function () {
    
                // An array of dates
                var eventDates = {};
                eventDates[new Date('5/04/2017')] = new Date('5/04/2017');
                eventDates[new Date('5/06/2017')] = new Date('5/06/2017');
                eventDates[new Date('5/20/2017')] = new Date('5/20/2017');
                eventDates[new Date('5/25/2017')] = new Date('5/25/2017');
    
                // datepicker
                $('#calendar').datepicker({
                    beforeShowDay: function (date) {
                        var highlight = eventDates[date];
                        if (highlight) {
                            return [true, "event", highlight];
                        } else {
                            return [true, '', ''];
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container">
                <h3>Highlight Particular Dates in JQuery UI Datepicker </h3>
    
                <div id="calendar"></div>
            </div>
        </form>
    </body>

    Code from this link.

    The output as below:

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 11, 2017 3:03 AM
  • User-1218295081 posted

    Dear,

    Thank you,

    But if i want to make it from database and when i click on date get events on selected date how can i do this?

    Thank you again

    Thursday, May 11, 2017 6:50 AM
  • User-271186128 posted

    Hi md_refay,

    But if i want to make it from database and when i click on date get events on selected date how can i do this?

    As indicated in my previous reply, we need to use JQuery Ajax to call WebMethod or Web Service, and get the selected date from database, then in the Ajax success function, push the dates into an array, finally set the selected date on the JQuery DatePicker:

    Code like this:

        <script type="text/javascript">
            $(document).ready(function () {
    
                // An array of dates
                var eventDates = {};
    
                //using JQuery Ajax to call the web method or web service, and get the selected date
    
                //in the Ajax success function, loop through the return data,
    // refer to the following code to insert the selected date into the array. eventDates[new Date('5/04/2017')] = new Date('5/04/2017'); eventDates[new Date('5/06/2017')] = new Date('5/06/2017'); eventDates[new Date('5/20/2017')] = new Date('5/20/2017'); eventDates[new Date('5/25/2017')] = new Date('5/25/2017'); // datepicker: set the selected date. $('#calendar').datepicker({ beforeShowDay: function (date) { var highlight = eventDates[date]; if (highlight) { return [true, "event", highlight]; } else { return [true, '', '']; } } }); }); </script>

    More details about using JQuery Ajax call web method, see:

    https://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx

    https://www.aspsnippets.com/Articles/Return-JSON-data-object-from-WebMethod-PageMethod-in-ASPNet-using-C-and-VBNet.aspx

    Best regards,
    Dillion

    Thursday, May 11, 2017 7:17 AM
  • User-1218295081 posted

    Dear,

    Thank you

    How can i display events when i select date from calander

    Thursday, May 11, 2017 7:25 AM
  • User-1768369891 posted

    <style type="text/css">
    #Result {
    cursor: pointer;
    }
    </style>

    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script src="js/jquery.ui.widget.js" type="text/javascript"></script>

    <script src="js/jquery.ui.core.js" type="text/javascript"></script>
    <script src="js/jquery.ui.datepicker.js" type="text/javascript"></script>
    <link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>

    <link href="css/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" />


    <script
    language="javascript" type="text/javascript"> <%=jsdate%> </script> <script type="text/javascript"> // var dates1 = [{ "dt0": "16/07/2012" }, { "dt1": "17/07/2012" }, { "dt2": "23/07/2012" }, { "dt3": "24/07/2012" }, { "dt4": "30/07/2012"}]; // var dates1 = [{ "16-07-2012" :1}, { "17/07/2012":1}, { "23/07/2012" :1 }, {"24/07/2012" :1 }, { "30/07/2012" :1}]; var calendarEvents = {}; function getEvents(month, year) { $.ajax({ url: 'Default.aspx/dates', type: 'POST', data: JSON.stringify({ month: month, year: year }), //data: JSON.stringify({ day: day }), //data: "{}", dataType: 'json', processdata: false, contentType: 'application/json; charset=utf-8', success: function(data) { // var splitedData = data.split(','); // alert(splitedData.length); // SetCaledar(splitedData); calendarEvents = data; // var JavaVar1 = {}; // alert(JavaVar1); //calendarEvents = splitedData; }, dataFilter: function(data) { return data.replace(/"\\\/(Date\(-?\d+\))\\\/"/g, 'new $1'); }, error: function(xhr, ajaxOptions, thrownError) { $("#datepicker").datepicker("hide"); }, complete: function(x, y) { $("#datepicker").datepicker("refresh"); } }); } $(function() { // alert('indp'); $("#datepicker").datepicker({ beforeShowDay: function(date) { var day = date.getDate(); // if(date == for (ik = 0; ik < dates1.length; ik++) { var today1 = new Date(Date.parse(dates1[ik].dt0)); var today2 = new Date(Date.parse(dates1[ik].dt1)); var today3 = new Date(Date.parse(dates1[ik].dt2)); var today4 = new Date(Date.parse(dates1[ik].dt3)); var today5 = new Date(Date.parse(dates1[ik].dt4)); var fday1 = today1.getDate(); var fday2 = today2.getDate(); var fday3 = today3.getDate(); var fday4 = today4.getDate(); var fday5 = today5.getDate(); if (date == today1) { alert('date -- ' + date); alert('today1 -- ' + today1); return [true, today1]; break; } if (day == fday1) return [true, today1]; if (day == fday2) return [true, today2]; if (day == fday3) return [true, today3]; if (day == fday4) return [true, today4]; if (day == fday5) return [true, today5]; } return [false, '']; } }); // alert($("#datepicker").datepicker("getDate")); var calendarDate = $("#datepicker").datepicker("getDate"); getEvents(calendarDate.getMonth() + 1, calendarDate.getFullYear()); }); ===================== in the code behind file, i wrote this... [WebMethod(EnableSession = false)] public static string dates(int month, int year) { System.Text.StringBuilder sb = new System.Text.StringBuilder(); clsFutureDate clfdate = new clsFutureDate(); List<clsFutureDate> lstfDates = new List<clsFutureDate>(); List<int> myDates = new List<int>(); string returnResult = string.Empty; using (SqlConnection con = new SqlConnection("Data Source=GPDBSERVER\\SQL2005;Initial Catalog=RijnlandsatVO;Persist Security Info=True;User ID=rijnlands;Password=rijnlands123")) { using (SqlCommand cmd = new SqlCommand()) { cmd.CommandText = "USP_FutureDates_SelectByTeacherID"; cmd.CommandType = CommandType.StoredProcedure; cmd.Connection = con; con.Open(); try { SqlDataReader reader = cmd.ExecuteReader(); clsFutureDate user = new clsFutureDate(); int count = 0; while (reader.Read()) { int fieldcount = reader.FieldCount; // count how many columns are in the row object[] values = new object[fieldcount]; // storage for column values reader.GetValues(values); // extract the values in each column for (int index = 0; index < fieldcount; index++) { // iterate through all columns sb.AppendFormat(",{{\"dt" + count + "\":\"{0}\"}}", values[index]); } count++; } } catch (Exception ex) { return ex.Message.ToString(); } if (sb.Length > 0) { sb.Remove(0, 1); sb.Insert(0, "var dates1=["); sb.Append("];"); } else { sb.Insert(0, "var dates1=["); sb.Append("];"); } } } return sb.ToString(); } protected string jsdate { get { return dates(7, 2012); } }

    Thursday, May 11, 2017 8:52 AM
  • User-1218295081 posted

    Dear,

    Can you please provide me database table structure and class clsFutureDate definition

    Thank you 

    Thursday, May 11, 2017 9:01 AM
  • User-1218295081 posted

    Dear,

    I tried this sample

    public class Event
    {
        public int EventID { get; set; }
        public string EventName { get; set; }
        public string EventDate { get; set; }
        public string EventDetail { get; set; }
    }

    In ASPX Page

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <style>
            * {
                margin: 0 auto;
                padding: 0;
            }
    
            body {
                background-color: #F2F2F2;
            }
    
            .container {
                margin: 0 auto;
                width: 920px;
                padding: 50px 20px;
                background-color: #fff;
            }
    
            h3 {
                text-align: center;
            }
    
            #calendar {
                margin-top: 40px;
            }
    
            .event a {
                background-color: #42B373 !important;
                background-image: none !important;
                color: #ffffff !important;
            }
        </style>
    
        <script type="text/javascript">
            $(function () {
                $.ajax({
                    type: "POST",
                    url: "Default2.aspx/GetEvents",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            });
    
            function OnSuccess(response) {
                var events = response.d;
                var eventDates = {};
                $(events).each(function () {
                    alert(this.EventDate);
                    //eventDates[new Date(this.EventDate)] = new Date(this.EventDate);
                });
                alert(eventDates);
    
                // datepicker
                $('#calendar').datepicker({
                    beforeShowDay: function (date) {
                        var highlight = eventDates[date];
                        if (highlight) {
                            return [true, "event", highlight];
                        } else {
                            return [true, '', ''];
                        }
                    }
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container">
                <h3>Highlight Particular Dates in JQuery UI Datepicker </h3>
    
                <div id="calendar"></div>
            </div>
        </form>
    </body>
    </html>
    

    In Code behind :

    [WebMethod]
        public static List<Event> GetEvents()
        {
            List<Event> events = new List<Event>();
            events.Add(new Event()
            {
                EventID = 1,
                EventName = "EventName 1",
                EventDate = DateTime.Now.ToString("MM-dd-yyyy"),
                EventDetail = string.Empty
            });
            events.Add(new Event()
            {
                EventID = 2,
                EventName = "EventName 2",
                EventDate = DateTime.Now.AddDays(4).ToString("MM-dd-yyyy"),
                EventDetail = string.Empty
            });
            events.Add(new Event()
            {
                EventID = 3,
                EventName = "EventName 3",
                EventDate = DateTime.Now.AddDays(10).ToString("MM-dd-yyyy"),
                EventDetail = string.Empty
            });
            events.Add(new Event()
            {
                EventID = 4,
                EventName = "EventName 4",
                EventDate = DateTime.Now.AddDays(22).ToString("MM-dd-yyyy"),
                EventDetail = string.Empty
            });
            return events;
        }

    Kindly i need your support to display event on calendar and to display events on select date from calender

    Thank you

    Thursday, May 11, 2017 9:07 AM
  • User-1768369891 posted

    Need to some change in your js code...

    <script type="text/javascript">
    var eventDates = {};
            $(function () {
                $.ajax({
                    type: "POST",
                    url: "Default2.aspx/GetEvents",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            });
    
            function OnSuccess(response) {
               
                
     $(response.d).each(function (i, e) {
                    eventDates[convertDate(e.EventDate)] = convertDate(e.EventDate);
                });
    
    
    
                $('#calendar').datepicker({
                    beforeShowDay: function (date) {                     
                        var highlight = eventDates[convertDate(date)];
                       // alert(highlight);
                        if (highlight) {
                            return [true, "event", highlight];
                        } else {
                            return [true, '', ''];
                        }
                    }
                });
            }
        
            function convertDate(inputFormat) {
                function pad(s) { return (s < 10) ? '0' + s : s; }
                var d = new Date(inputFormat);
                return [pad(d.getDate()), pad(d.getMonth() + 1), d.getFullYear()].join('/');
            }  
    
        </script>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 12, 2017 6:51 AM
  • User-1218295081 posted

    Dear Navneet,

    Thank you it works now fine with me , but can you please help me to display all events on selected date from Calander

    Thank you again

    Sunday, May 14, 2017 5:07 AM
  • User-1768369891 posted

    but can you please help me to display all events on selected date from Calander

    Where you want to display, please clarify more about this. 

    Monday, May 15, 2017 4:26 AM
  • User-1218295081 posted

    Dear,

    I have two questions

    1- If there are many event on specific date how to display them as tool-tip on calendar

    2- I want to display events details below Calendar when i select date

    Thank you  

    Monday, May 15, 2017 5:39 AM
  • User-1218295081 posted

    Dear,

    My code :

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    
        <link href="style.css" rel="stylesheet" />
        <style>
            * {
                margin: 0 auto;
                padding: 0;
            }
    
            body {
                background-color: #F2F2F2;
            }
    
            .container {
                margin: 0 auto;
                width: 920px;
                padding: 50px 20px;
                background-color: #fff;
            }
    
            h3 {
                text-align: center;
            }
    
            #calendar {
                margin-top: 40px;
            }
    
            .event a {
                background-color: #42B373 !important;
                background-image: none !important;
                color: #ffffff !important;
            }
        </style>
    
        <script type="text/javascript">
            var eventDates = {};
            var eventName = {};
            var eventDetails = {};
            $(document).ready(function () {
                $.ajax({
                    type: "POST",
                    url: "Default4.aspx/GetEvents",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            });
            
            function OnSuccess(response) {
                $(response.d).each(function (i, e) {
                    eventDates[convertDate(e.EventDate)] = convertDate(e.EventDate);
                    eventName[convertDate(e.EventDate)] = e.EventName;
                    eventDetails[convertDate(e.EventDate)] = e.EventDetail;
                });
    
                $('#calendar').datepicker({
                    changeMonth: true,
                    changeYear: true,
                    beforeShowDay: function (date) {
                        var highlight = eventDates[convertDate(date)];
                        var HighlighText = eventName[convertDate(date)];
                        var HighlighDetail = eventDetails[convertDate(date)];
    
                        if (highlight) {
                            return [true, "event", HighlighDetail];
                        } else {
                            return [true, '', ''];
                        }
                    },
                    onSelect: function (date) {
                        var selecteddate = $(this).datepicker('getDate');
                        var highlight = eventDates[convertDate(date)];
                        var HighlighText = eventName[convertDate(date)];
                        var HighlighDetail = eventDetails[convertDate(date)];
    
                        $('div.event-date > h3').html($.datepicker.formatDate('d', selecteddate));
                        $('div.event-date > p').html($.datepicker.formatDate('MM', selecteddate));
    
                        if (HighlighDetail != null)
                            $('div.eventslist > ul > li').html(HighlighDetail);
                        else
                            $('div.eventslist > ul > li').html('No Event Found');
                    }
    
                });
            }
    
            function convertDate(inputFormat) {
                function pad(s) { return (s < 10) ? '0' + s : s; }
                var d = new Date(inputFormat);
                return [pad(d.getDate()), pad(d.getMonth() + 1), d.getFullYear()].join('/');
            }
    
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container">
                <h3>Highlight Particular Dates in JQuery UI Datepicker </h3>
                <div class="col-md-4 col-xs-12 event-calendar-wrapper">
                    <!-- Calendar Rendering Div Start-->
                    <div id="calendar" class="event-calendar"></div>
                    <!-- Calendar Rendering Div End-->
    
                    <!-- Event Detials Start-->
                    <div class="current-events clearfix">
                        <div class="event-date fA">
                            <h3 class="day">.</h3>
                            <p class="month"></p>
                        </div>
                        <div class="eventslist">
                            <ul>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                    <!-- Event Detials End-->
                </div>
            </div>
        </form>
    </body>
    </html>

    In code behind :

    [WebMethod]
        public static List<Event> GetEvents()
        {
            List<Event> events = new List<Event>();
            events.Add(new Event()
            {
                EventID = 1,
                EventName = "EventName 1",
                EventDate = DateTime.Now.ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 1"
            });
            events.Add(new Event()
            {
                EventID = 2,
                EventName = "EventName 2",
                EventDate = DateTime.Now.AddDays(4).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 2"
            });
            events.Add(new Event()
            {
                EventID = 3,
                EventName = "EventName 3",
                EventDate = DateTime.Now.AddDays(10).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 3"
            });
            events.Add(new Event()
            {
                EventID = 4,
                EventName = "EventName 4",
                EventDate = DateTime.Now.AddDays(22).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 4"
            });
            events.Add(new Event()
            {
                EventID = 5,
                EventName = "EventName 5",
                EventDate = DateTime.Now.AddDays(1).AddMonths(-1).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 5"
            });
            events.Add(new Event()
            {
                EventID = 6,
                EventName = "EventName 6",
                EventDate = DateTime.Now.AddDays(1).AddMonths(-1).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 6"
            });
            return events;
        }

    If i have many events on date how can i display tooltip and evevt details

    Thank you

    Monday, May 15, 2017 5:44 AM
  • User-1768369891 posted

    1- If there are many event on specific date how to display them as tool-tip on calendar

    2- I want to display events details below Calendar when i select date

    Try this...

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    	
    	   <link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css" rel="stylesheet" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-shadow.min.css" rel="stylesheet" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>
    
        <link href="style.css" rel="stylesheet" />
        <style>
            * {
                margin: 0 auto;
                padding: 0;
            }
    
            body {
                background-color: #F2F2F2;
            }
    
            .container {
                margin: 0 auto;
                width: 920px;
                padding: 50px 20px;
                background-color: #fff;
            }
    
            h3 {
                text-align: center;
            }
    
            #calendar {
                margin-top: 40px;
            }
    
            .event a {
                background-color: #42B373 !important;
                background-image: none !important;
                color: #ffffff !important;
            }
        </style>
    
        <script type="text/javascript">
            var eventDates = {};
            var eventName = {};
            var eventDetails = {};
            $(document).ready(function () {
                $.ajax({
                    type: "POST",
                    url: "Default4.aspx/GetEvents",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            });
            
            function OnSuccess(response) {
                $(response.d).each(function (i, e) {
                    eventDates[convertDate(e.EventDate)] = convertDate(e.EventDate);
                    eventName[convertDate(e.EventDate)] = e.EventName;
                    eventDetails[convertDate(e.EventDate)] = e.EventDetail;
                });
    
                $('#calendar').datepicker({
                    changeMonth: true,
                    changeYear: true,
                    beforeShowDay: function (date) {
                        var highlight = eventDates[convertDate(date)];
                        var HighlighText = eventName[convertDate(date)];
                        var HighlighDetail = eventDetails[convertDate(date)];
    
                        if (highlight) {
    					       setTimeout(function () {
                                $('.event').tooltipster({
                                    theme: 'tooltipster-shadow',
                                    contentAsHTML: true,
                                    content: $(this).attr("title")
                                });
    
                            }, 100);
                            return [true, "event", HighlighDetail];
                        } else {
                            return [true, '', ''];
                        }
                    },
                    onSelect: function (date) {
                        var selecteddate = $(this).datepicker('getDate');
                        var highlight = eventDates[convertDate(date)];
                        var HighlighText = eventName[convertDate(date)];
                        var HighlighDetail = eventDetails[convertDate(date)];
    
                        $('div.event-date > h3').html($.datepicker.formatDate('d', selecteddate));
                        $('div.event-date > p').html($.datepicker.formatDate('MM', selecteddate));
    
                        if (HighlighDetail != null)
                            $('div.eventslist > ul > li').html(HighlighDetail);
                        else
                            $('div.eventslist > ul > li').html('No Event Found');
                    }
    
                });
            }
    
            function convertDate(inputFormat) {
                function pad(s) { return (s < 10) ? '0' + s : s; }
                var d = new Date(inputFormat);
                return [pad(d.getDate()), pad(d.getMonth() + 1), d.getFullYear()].join('/');
            }
    
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container">
                <h3>Highlight Particular Dates in JQuery UI Datepicker </h3>
                <div class="col-md-4 col-xs-12 event-calendar-wrapper">
                    <!-- Calendar Rendering Div Start-->
                    <div id="calendar" class="event-calendar"></div>
                    <!-- Calendar Rendering Div End-->
    
                    <!-- Event Detials Start-->
                    <div class="current-events clearfix">
                        <div class="event-date fA">
                            <h3 class="day">.</h3>
                            <p class="month"></p>
                        </div>
                        <div class="eventslist">
                            <ul>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                    <!-- Event Detials End-->
                </div>
            </div>
        </form>
    </body>
    </html>

    Monday, May 15, 2017 10:49 AM
  • User-1218295081 posted

    Dear ,

    Thank you but still have issue

    How to display multiple events on specific date as tool-tip and also in details

    Thank you again.

    Tuesday, May 16, 2017 6:39 PM
  • User-1768369891 posted

    md_refay

    but still have issue

    How to display multiple events on specific date as tool-tip and also in details

    Use last posted code with this change then you can easily show multiple events on specific date as tool tip.

    [WebMethod]
        public static List<Event> GetEvents()
        {
            List<Event> events = new List<Event>();
            events.Add(new Event()
            {
                EventID = 1,
                EventName = "EventName 1",
                EventDate = DateTime.Now.ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 1 <br/> Event Details 1. <br/> Event Details 2."
            });
            events.Add(new Event()
            {
                EventID = 2,
                EventName = "EventName 2",
                EventDate = DateTime.Now.AddDays(4).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 2 <br/> Event Details 3. <br/> Event Details 4."
            });
            events.Add(new Event()
            {
                EventID = 3,
                EventName = "EventName 3",
                EventDate = DateTime.Now.AddDays(10).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 3 <br/> Event Details 5. <br/> Event Details 6."
            });
            events.Add(new Event()
            {
                EventID = 4,
                EventName = "EventName 4",
                EventDate = DateTime.Now.AddDays(22).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 4 <br/> Event Details 7. <br/> Event Details 8."
            });
            events.Add(new Event()
            {
                EventID = 5,
                EventName = "EventName 5",
                EventDate = DateTime.Now.AddDays(1).AddMonths(-1).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 5 <br/> Event Details 1. <br/> Event Details 2."
            });
            events.Add(new Event()
            {
                EventID = 6,
                EventName = "EventName 6",
                EventDate = DateTime.Now.AddDays(1).AddMonths(-1).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 6 <br/> Event Details 1. <br/> Event Details 2."
            });
            return events;
        }

    check out put :- 

    Wednesday, May 17, 2017 4:44 AM
  • User-1218295081 posted

    Dear,

    My question is how to display many events on calendar date and when i click on date how to display details for every event

    Thank you

    Wednesday, May 17, 2017 4:33 PM
  • User-1768369891 posted

    md_refay

    My question is how to display many events on calendar date and when i click on date how to display details for every event

    Do you want to display many event on same day ?

    Like in above screen shoot on date 17-April i have shown three event on same day using "<br/>" or if you want to modified it on your way then you can combine many event using("<br>" or some html tag like div,p etc).

     $('.event').tooltipster({
                                    theme: 'tooltipster-shadow',
                                    contentAsHTML: true,
                                    content: $(this).attr("title")  // Here you can change your event tooltip. just pass your modified event here like event1 + event2 + event3; 
                                });


     

    Thursday, May 18, 2017 4:37 AM
  • User-1218295081 posted

    Dear,

    If you check event Data below (With underline) you will find two events with different ID i need to display both event Name or Detail on Calendar 

    [WebMethod]
        public static List<Event> GetEvents()
        {
            List<Event> events = new List<Event>();
            events.Add(new Event()
            {
                EventID = 1,
                EventName = "EventName 1",
                EventDate = DateTime.Now.ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 1 <br/> Event Details 1. <br/> Event Details 2."
            });
            events.Add(new Event()
            {
                EventID = 2,
                EventName = "EventName 2",
                EventDate = DateTime.Now.AddDays(4).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 2 <br/> Event Details 3. <br/> Event Details 4."
            });
            events.Add(new Event()
            {
                EventID = 3,
                EventName = "EventName 3",
                EventDate = DateTime.Now.AddDays(10).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 3 <br/> Event Details 5. <br/> Event Details 6."
            });
            events.Add(new Event()
            {
                EventID = 4,
                EventName = "EventName 4",
                EventDate = DateTime.Now.AddDays(22).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 4 <br/> Event Details 7. <br/> Event Details 8."
            });
            events.Add(new Event()
            {
                EventID = 5,
                EventName = "EventName 5",
                EventDate = DateTime.Now.AddDays(1).AddMonths(-1).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 5 <br/> Event Details 1. <br/> Event Details 2."
            });
            events.Add(new Event()
            {
                EventID = 6,
                EventName = "EventName 6",
                EventDate = DateTime.Now.AddDays(1).AddMonths(-1).ToString("MM-dd-yyyy"),
                EventDetail = "This is description for event name 6 <br/> Event Details 1. <br/> Event Details 2."
            });
            return events;
        }

    Thank you

    Thursday, May 18, 2017 6:31 PM
  • User-1768369891 posted

    Sorry for late reply, because i'm too busy , it is also very simple. ..

    Change script code ....

    <script type="text/javascript">
            var eventDates = {};
            var eventName = {};
            var eventDetails = {};
            var margeEvt = {};
            $(document).ready(function () {
               
    
    
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/GetEvents",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            });
    
            function OnSuccess(response) {
                $(response.d).each(function (i, e) {
                    eventDates[convertDate(e.EventDate)] = convertDate(e.EventDate);
                    eventName[convertDate(e.EventDate)] = e.EventName;
                    if (convertDate(e.EventDate) == "25/05/2017" || convertDate(e.EventDate) == "26/05/2017") {
                        margeEvt[convertDate(e.EventDate)] = e.EventDetail;
                        eventDetails[convertDate(e.EventDate)] = 'merge'
                    }
                    else
                    {
                        eventDetails[convertDate(e.EventDate)] = e.EventDetail;
                    }
                    console.log(convertDate(e.EventDate));
                    
                    //alert(e.EventDetail);
                });
    
                $('#calendar').datepicker({
                    changeMonth: true,
                    changeYear: true,
                    beforeShowDay: function (date) {
                        var highlight = eventDates[convertDate(date)];
                        var HighlighText = eventName[convertDate(date)];
                        var HighlighDetail = eventDetails[convertDate(date)];
                        //HighlighDetail = HighlighDetail + "</br>" + "Details next 1" + "</br>" + "Details next 2";
                        if (HighlighDetail == "merge")
                        {
                            HighlighDetail = '';
                            $.each(margeEvt, function (i,e) {
                                HighlighDetail = HighlighDetail + "</br>" +e;
                            });
                        }
    
                        if (highlight) {
                            //  alert(HighlighDetail);
                            setTimeout(function () {
                                $('.event').tooltipster({
                                    theme: 'tooltipster-shadow',
                                    contentAsHTML: true,
                                    content: $(this).attr("title")
                                });
    
                            }, 100);
                            return [true, "event", HighlighDetail];                        
                        } else {
                            return [true, '', ''];
                        }
                    },
                    onSelect: function (date) {
                        var selecteddate = $(this).datepicker('getDate');
                        var highlight = eventDates[convertDate(date)];
                        var HighlighText = eventName[convertDate(date)];
                        var HighlighDetail = eventDetails[convertDate(date)];
    
                        $('div.event-date > h3').html($.datepicker.formatDate('d', selecteddate));
                        $('div.event-date > p').html($.datepicker.formatDate('MM', selecteddate));
    
                        if (HighlighDetail != null)
                            $('div.eventslist > ul > li').html(HighlighDetail);
                        else
                            $('div.eventslist > ul > li').html('No Event Found');
                    }
    
                });
            }
    
            function convertDate(inputFormat) {
                function pad(s) { return (s < 10) ? '0' + s : s; }
                var d = new Date(inputFormat);
                return [pad(d.getDate()), pad(d.getMonth() + 1), d.getFullYear()].join('/');
            }
    
    
        </script>

    Here i have set date as static //convertDate(e.EventDate) == "25/05/2017" || convertDate(e.EventDate) == "26/05/2017"

    You can use another array and merge event as you want or you can merge event from side before pass to java script function. 

    Tuesday, May 23, 2017 5:59 AM
  • User-1218295081 posted

    Thank you

    but can you please help me to do it?

    Saturday, May 27, 2017 12:31 AM
  • User-1768369891 posted

    but can you please help me to do it?

    i have been posted working code on above post now what kind of help you want?

    Monday, May 29, 2017 6:02 AM