locked
Show date and event title in full calender div : Jquery RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    I have already populated a full calender div on my page.

    <div id="calendar" class="calenderdiv">

    And I am getting data through a webservice likde below.

    <script type="text/javascript">
                $(document).ready(function () {
                    BindControls();
                });
                function BindControls() {
                    debugger;
                    var uid = $("#ltuser").text();
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "ServiceGetTrainingDate.asmx/GetTrainingDates",
                        data: "{'user_id':'" + uid + "'}",
                        datatype: "json",
                        success: function (data) {
                            alert(data.d);
                            var dataSource = $('#calendar').data('calendar').getDataSource();
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            debugger;
                        }
                    });
                }
       </script>

    The format I recieved data in json format like below.

    [{"training_title":"Induction Workshop has been scheduled on 27th – 29th March 2019","date":"2/24/2019 12:00:00 AM"}]

    Now I want to show this data in calender with title.

    As I am new to jquery please suugest.

    Thanks

    Thursday, February 28, 2019 4:55 AM

Answers

  • User-893317190 posted

    Hi demoninside9,

    You should parse your datastring to data of type date.

    Below is my code.

     // define a function to parse string to date

    function parseStringToDate(dateString) { // get year , month and day var ymd = dateString.split(" ")[0].split("/"); var mydate = new Date(parseInt(ymd[2]), parseInt(ymd[0])-1, parseInt(ymd[1])) return mydate; } $(function () { $.ajax({ type: "POST", url: "/Services/MyService.asmx/HelloWorld", async:false, data: JSON.stringify({ user_id: 1006 }), contentType: "application/json", datatype: "json", success: function (data) { var target = []; // loop through data.d array for (var i = 0; i < data.d.length; i++) { var item = { name: data.d[i]["training_title"], startDate:parseStringToDate(data.d[i]["date"]) , endDate:parseStringToDate(data.d[i]["date"]) } // add the item to the target array target.push(item); } $('#calendar').calendar({ enableContextMenu: true, enableRangeSelection: true, dataSource: target // use the target array as events' datasrouce }) }, error: function (XMLHttpRequest, textStatus, errorThrown) { } }); })

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 5, 2019 5:53 AM

All replies

  • User-893317190 posted

    Hi  demoninside9,

    You could try the code below .

    <head runat="server">
        <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <link href="https://fullcalendar.io/assets/demo-topbar.css" rel="stylesheet" />
        <link href="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" />
      
           <link href="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.print.css" rel="stylesheet"  media='print'/>
        <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/moment.min.js"></script>
      
        <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/jquery.min.js"></script>
        <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.js"></script>
        <script src="https://fullcalendar.io//assets/demo-to-codepen.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="calendar">
            </div>
            
        </form>
    
        <script>
        
    
            $(function () {
    
                $.ajax({
                    type: "POST",
                    url: "/Services/MyService.asmx/HelloWorld", // please write your own path
    
                    data: JSON.stringify({ user_id: 1006 }),
                    contentType: "application/json",
                    datatype: "json",
                    success: function (data) {
                        // map the array element to object with property title and start
                        // you could log the data to see the result
                          data = data.d.map(function (e) {
                         return {title:e["training_title"],start:e.date}
                     })
                    $('#calendar').fullCalendar({
              
                        editable: false,
                events: data
           
     
        })
                    },
    
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
    
                    }
                });
    
    
            })  
    
    
    </script>
    </body>

    Here is use Array.prototype.map function to map the returned data, if you are not familiar with it , you could refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

    Best regards,

    Ackerly Xu

    Thursday, February 28, 2019 7:56 AM
  • User1052662409 posted

    You could try the code below .

    I tried your code, I am getting the alert with data. I put the same key name which I am getting in my json data.

    BUt it is not showing in calendar. I dig out it by putting a break point but it doesn't show data. Although I still get data in alert message box. 

    Please suggest.

    Thanks

    Thursday, February 28, 2019 8:59 AM
  • User-893317190 posted

    Hi demoninside9,

    You set a break point at the place where data hasn't been defined  and the date is in a function which is hard to check, please set a break point at 1425 line to see the data.

    And you could see my code is  start not date , it matters because full calendar doesn't recognize date ,.

       data = data.d.map(function (e) {
                         return {title:e["training_title"],start:e.date}
                     })
    

    Below is my break point.

    Best regards,

    Ackerly Xu

    Friday, March 1, 2019 1:15 AM
  • User1052662409 posted

    You set a break point at the place where data hasn't been defined  and the date is in a function which is hard to check, please set a break point at 1425 line to see the data.

    If I put debugger on top then break point doesn't come inside map function, instead it goes to the close tag of script means </script>.

    Then I place debugger here and see the result below.

    Thanks

    Friday, March 1, 2019 4:08 AM
  • User-893317190 posted

    Hi demoninside9,

      data = data.d.map(function (e) {
                         return {title:e["training_title"],start:e.date}
                     })
    

    As you could see , e is the parameter of the function that you have passed to map method, so if you remove the function , it will show the error.

    If you want to debug the map method , please don't directly return the result, please write as follows.

    data = data.d.map(function (e) {
                            var obj = {title:e["training_title"],start:e.date}
    
                            return obj;
                     })

    Best regards,

    Ackerly Xu

    Friday, March 1, 2019 4:17 AM
  • User1052662409 posted

    Ackerly Xu

    If you want to debug the map method , please don't directly return the result, please write as follows.

    Yes, data is coming in data but not mapping/showing in calendar.

    Am I making some mistake in code to show the data in calendar?

     <script type="text/javascript">
                $(document).ready(function () {
                    BindControls();
                });
                function BindControls() {
                    var uid = $("#ltuser").text();
                   
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "ServiceGetTrainingDate.asmx/GetTrainingDates",
                        data: "{'user_id':'" + uid + "'}",
                        datatype: "json",
                        success: function (data) {
                            alert(data.d);
                            var obj = { title: e["training_title"], start: e.date }
    
                            return obj;
                            debugger;
                            $('#calendar').fullCalendar({
    
                                editable: false,
                                events: obj  //  here I put both "obj" and "data" nothing is working
    
    
                            })
    
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            debugger;
                        }
                    });
                }
                //}
            </script>

    Friday, March 1, 2019 4:25 AM
  • User-893317190 posted

    Hi demoninside9,

    If you don't want to use map method, you could refer to the code below, manually loop through the array and set data.

            $(function () {
    
                $.ajax({
                    type: "POST",
                    url: "/Services/MyService.asmx/HelloWorld",
    
                    data: JSON.stringify({ user_id: 1006 }),
                    contentType: "application/json",
                    datatype: "json",
                    success: function (data) {
                      
    
                        //define an array to store the final data
                        var target = [];
                        // loop through data.d array
                        for (var i = 0; i < data.d.length; i++) {
                             //get training_title and set to an object's title property ,get date and set the object's start property to date.
                            var item = { title: data.d[i]["training_title"], start: data.d[i]["date"] }
                            // add the item to the target array
                            target.push(item);
                        }
                    $('#calendar').fullCalendar({
              
                        editable: false,
                events: target  // use the target array as events'  datasrouce
           
     
        })
                    },
    
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
    
                    }
                });
    
    
            })  

    Best regards,

    Ackerly Xu

    Friday, March 1, 2019 4:35 AM
  • User1052662409 posted

    // loop through data.d array
                        for (var i = 0; i < data.d.length; i++)

    My data has only one item, but data.d.length shows 117. \

    So it loops 117 times. any why.. after that it shows that there fullcalendar is not a function

    Friday, March 1, 2019 5:05 AM
  • User-893317190 posted

    Hi  demoninside9,

    Have you import  fullcalendar.js in your head?

    <link href="https://fullcalendar.io/assets/demo-topbar.css" rel="stylesheet" />
    <link href="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" />

    <link href="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.print.css" rel="stylesheet" media='print'/>
    <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/moment.min.js"></script>

    <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/jquery.min.js"></script>
    <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.js"></script>
    <script src="https://fullcalendar.io//assets/demo-to-codepen.js"></script>

    And how you call the fullCalendar function?

        $('#calendar').fullCalendar({
              
                        editable: false,
                events: target  // use the target array as events'  datasrouce
           
     
        })

    Best regards,

    Ackerly Xu

    Friday, March 1, 2019 5:10 AM
  • User1052662409 posted

    Have you import  fullcalendar.js in your head?

    I am populating full calendar by using bootstrap-year-calendar.

    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-year-calendar.min.css">
    and it shows like this.


    <link href="https://fullcalendar.io/assets/demo-topbar.css" rel="stylesheet" />
        <link href="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" />
      
           <link href="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.print.css" rel="stylesheet"  media='print'/>
        <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/moment.min.js"></script>
      
        <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/jquery.min.js"></script>
        <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.js"></script>
        <script src="https://fullcalendar.io//assets/demo-to-codepen.js"></script>


    After this my calendar changes like this

    And event is on 26th march which is not coming in calendar.
    Sorry, but I am very new to jquery, that's why I am facing this.

    Friday, March 1, 2019 5:20 AM
  • User-893317190 posted

    Hi demoninside9,

    I'm sorry , I don't know you are using bootstarp calendar instead of fullcalendar.

    I have found one  in below link.

    https://codepen.io/anon/pen/jJWywP?editors=1111

    And it seems that you should set  startDate and endDate, if you are using bootstarp calendar

    I have found little resource about the plugin , could your share your link that withe  bootstarp calendar?

      $.ajax({
                    type: "POST",
                    url: "/Services/MyService.asmx/HelloWorld",
    
                    data: JSON.stringify({ user_id: 1006 }),
                    contentType: "application/json",
                    datatype: "json",
                    success: function (data) {
                       
                        var target = [];
                        // loop through data.d array
                        for (var i = 0; i < data.d.length; i++) {
                            //get training_title and set to an object's title property ,get date and set the object's start property to date.
                            var item = { name: data.d[i]["training_title"], startDate: Date.now(),endDate: new Date(2019, 4, 29) }
                            // add the item to the target array
                            target.push(item);
                        }
                    $('#calendar').calendar({
              
                        enableContextMenu: true,
                     enableRangeSelection: true,
                  dataSource: target  // use the target array as events'  datasrouce
           
     
        })
                    },
    
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
    
                    }
                });

    You say you have not seen event on 26th using full calendar , could you debug your code and see that data.d is?As you could see , other date shows well.

    Best regards,

    Ackerly Xu

    Friday, March 1, 2019 6:08 AM
  • User1052662409 posted

    Ackerly Xu

    I'm sorry , I don't know you are using bootstarp calendar instead of fullcalendar.

     You not need to say sorry. I forgot to mention in the post. 

    Ackerly Xu

    dataSource: target

    Show 

    Here is the link from where I get the bootstrap full year calendar.

    http://www.bootstrap-year-calendar.com/#Examples/Full%20example

    Friday, March 1, 2019 8:39 AM
  • User-893317190 posted

    Hi demoninside9,

    undefined means you haven't get the value, how do you get the name?

    I write

      var target = [];
                        // loop through data.d array
                        for (var i = 0; i < data.d.length; i++) {
                            //get training_title and set to an object's title property ,get date and set the object's start property to date.
                            var item = { name: data.d[i]["training_title"], startDate: Date.now(),endDate: new Date(2019, 4, 29) }
                            // add the item to the target array
                            target.push(item);
                        }

    I need to know what you data looks like. 

    Best regards,

    Ackerly Xu

    Friday, March 1, 2019 9:19 AM
  • User1052662409 posted

    I need to know what you data looks like.

    public class TrainingDates
    {
        public string training_title { get; set; }
        public string date { get; set; }  
    }

    Friday, March 1, 2019 9:40 AM
  • User-893317190 posted

    Hi demoninside9,

    It's strange , there is  only one item , the array should not contain so many elements.

    Could you show me all your js code?

    Best regards,

    Ackerly Xu

    Friday, March 1, 2019 10:00 AM
  • User1052662409 posted

    Ackerly Xu

    Could you show me all your js code?

    Boss, it is too lengthy, but still I am sharing. My block is the last one in down side.

     <script type="text/javascript" class="publish">
                                            function editEvent(event) {
                                                $('#event-modal input[name="event-index"]').val(event ? event.id : '');
                                                $('#event-modal input[name="event-name"]').val(event ? event.name : '');
                                                $('#event-modal input[name="event-location"]').val(event ? event.location : '');
                                                $('#event-modal input[name="event-start-date"]').datepicker('update', event ? event.startDate : '');
                                                $('#event-modal input[name="event-end-date"]').datepicker('update', event ? event.endDate : '');
                                                $('#event-modal').modal();
                                            }
    
                                            function deleteEvent(event) {
                                                var dataSource = $('#calendar').data('calendar').getDataSource();
    
                                                for (var i in dataSource) {
                                                    if (dataSource[i].id == event.id) {
                                                        dataSource.splice(i, 1);
                                                        break;
                                                    }
                                                }
    
                                                $('#calendar').data('calendar').setDataSource(dataSource);
                                            }
    
                                            function saveEvent() {
                                                var event = {
                                                    id: $('#event-modal input[name="event-index"]').val(),
                                                    name: $('#event-modal input[name="event-name"]').val(),
                                                    location: $('#event-modal input[name="event-location"]').val(),
                                                    startDate: $('#event-modal input[name="event-start-date"]').datepicker('getDate'),
                                                    endDate: $('#event-modal input[name="event-end-date"]').datepicker('getDate')
                                                }
    
                                                var dataSource = $('#calendar').data('calendar').getDataSource();
    
                                                if (event.id) {
                                                    for (var i in dataSource) {
                                                        if (dataSource[i].id == event.id) {
                                                            dataSource[i].name = event.name;
                                                            dataSource[i].location = event.location;
                                                            dataSource[i].startDate = event.startDate;
                                                            dataSource[i].endDate = event.endDate;
                                                        }
                                                    }
                                                }
                                                else {
                                                    var newId = 0;
                                                    for (var i in dataSource) {
                                                        if (dataSource[i].id > newId) {
                                                            newId = dataSource[i].id;
                                                        }
                                                    }
    
                                                    newId++;
                                                    event.id = newId;
    
                                                    dataSource.push(event);
                                                }
    
                                                $('#calendar').data('calendar').setDataSource(dataSource);
                                                $('#event-modal').modal('hide');
                                            }
                                            function getMyData() {
                                                var myData = [];
                                                $.ajax({
                                                    type: "Post",
                                                    url: 'validate.ashx',
                                                    data: { "Holiday_List": document.getElementById("hdcountryID").value, "EMPID": document.getElementById("hdempid").value, "EMPTYPE": document.getElementById("hd_logintype").value },
                                                    context: document.body,
                                                    async: false,
                                                    success: function (data) {
                                                        var dt = JSON.parse(data);
                                                        if (dt == '') {
    
                                                        }
                                                        else {
                                                            var _color = "";
                                                            $(dt).each(function (i) {
                                                                if (dt[i]._type == "holiday") {
                                                                    _color = '#B2BFB1';
                                                                }
                                                                else if (dt[i]._type == "annual leave") {
                                                                    _color = '#52A8FF';
                                                                }
                                                                else if (dt[i]._type == "sick leave") {
                                                                    _color = '#F5A400';
                                                                }
                                                                else {
                                                                    _color = '#82ae5f';
                                                                }
                                                                myData.push({
                                                                    id: dt[i].bigid,
                                                                    name: dt[i].Reason,
                                                                    location: '',
                                                                    startDate: new Date(dt[i].startyear, dt[i].startmonth, dt[i].startdate),
                                                                    endDate: new Date(dt[i].endyear, dt[i].endmonth, dt[i].enddate),
                                                                    color: _color
                                                                });
                                                            });
                                                        }
                                                    }
    
                                                });
                                                return myData;
                                            }
    
                                            // meena
    
                                            function getdisableddate() {
                                                var myData1 = [];
                                                if (document.getElementById("hd_logintype").value != "Y") {
                                                    if (document.getElementById("hd_logintype").value != "S") {
                                                        var type = document.getElementById("hd_logintype").value;
                                                        var _backyear = document.getElementById("hd_backyear").value;
                                                        var newday = new Date();
                                                        var currentYear = new Date().getFullYear();
                                                        var curdate = new Date(currentYear, newday.getMonth(), newday.getDate() - parseInt(document.getElementById("hd_backdays").value));
    
                                                        var enddate1 = new Date(currentYear + 2, 0, 1);
                                                        var Currentmonth = curdate.getMonth();
    
                                                        curdate.setDate(curdate.getDate() - 1);
                                                        if (type == "Y") {
                                                            if (type == "S") {
                                                                for (var d = new Date(currentYear - 1, 0, 1) ; d < enddate1; d.setDate(d.getDate() + 1)) {
                                                                    myData1.push(new Date(d));
                                                                }
                                                            }
                                                        }
                                                        else {
                                                            for (var d = new Date(currentYear - 1, 0, 1) ; d < curdate; d.setDate(d.getDate() + 1)) {
    
                                                                myData1.push(new Date(d));
                                                            }
                                                        }
                                                    }
                                                }
                                                return myData1;
                                            }
    
    
                                            $(function () {
    
                                                var currentYear = new Date().getFullYear();
                                                var curdate = new Date();
                                                var Currentmonth = curdate.getMonth();
                                                var currentDate = curdate.getDate();
                                                var _maxDate = new Date(currentYear + 1, 11, 31);
                                                var _minDate = new Date(currentYear - 1, 0, 1);
    
                                                var circleDateTime = new Date(currentYear, Currentmonth, currentDate).getTime();
                                                $('#calendar').calendar({
                                                    language: '' + document.getElementById("hdlangname").value + '',
                                                    dataSource: getMyData(),
                                                    maxDate: _maxDate,
                                                    minDate: _minDate,
                                                    enableContextMenu: false,
                                                    enableRangeSelection: true,
                                                    displayWeekNumber: true,
                                                    contextMenuItems: [
                                                    {
                                                        text: 'Update',
                                                        click: editEvent
                                                    },
                                                    {
                                                        text: 'Delete',
                                                        click: deleteEvent
                                                    }
                                                    ],
    
                                                    mouseOnDay: function (e) {
                                                        if (e.events.length > 0) {
                                                            var content = '';
    
                                                            for (var i in e.events) {
                                                                content += '<div class="event-tooltip-content">'
                                                                        + '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
                                                                //									+ '<div class="event-location">' + e.events[i].location + '</div>'
                                                                    + '</div>';
                                                            }
    
                                                            $(e.element).popover({
                                                                trigger: 'manual',
                                                                container: 'body',
                                                                html: true,
                                                                content: content
                                                            });
    
                                                            $(e.element).popover('show');
                                                        }
                                                    },
                                                    mouseOutDay: function (e) {
                                                        if (e.events.length > 0) {
                                                            $(e.element).popover('hide');
                                                        }
                                                    },
                                                    dayContextMenu: function (e) {
                                                        $(e.element).popover('hide');
                                                    },
    
                                                    customDayRenderer: function (element, date) {
    
                                                        if (date.getTime() == circleDateTime) {
                                                            $(element).css('border', '1px solid #a5a5a5');
                                                            // $(element).css('color', 'white');
                                                            $(element).css('border-radius', '15px');
                                                        }
                                                    },
                                                    selectRange: function (e) {
                                                        if (document.getElementById("hd_logintype").value != "Y") {
                                                            var _start = new Date(e.startDate);
                                                            var _clickmonth = _start.getMonth() + 1;
                                                            var _clickDate = _start.getDate();
                                                            var _clickyear = new Date(e.startDate).getFullYear();
    
                                                            var _today = new Date();
                                                            _today.setDate(_today.getDate() - 11);
    
                                                            if (_today > e.startDate) {
                                                                alert("You are only authorize to take 10 days back leave.");
                                                                return false;
                                                            }
    
                                                            var _end = new Date(e.endDate);
                                                            var _clickmonth3 = _end.getMonth() + 1;
                                                            var _clickDate1 = _end.getDate();
                                                            var _clickyear1 = new Date(e.endDate).getFullYear();
    
                                                            var months = new Array(12);
                                                            months[0] = "Jan";
                                                            months[1] = "Feb";
                                                            months[2] = "Mar";
                                                            months[3] = "Apr";
                                                            months[4] = "May";
                                                            months[5] = "Jun";
                                                            months[6] = "Jul";
                                                            months[7] = "Aug";
                                                            months[8] = "Sep";
                                                            months[9] = "Oct";
                                                            months[10] = "Nov";
                                                            months[11] = "Dec";
                                                            var _clickmonth1 = _start.getMonth();
                                                            _clickmonth1 = months[_clickmonth1];
    
                                                            var _clickmonth2 = _end.getMonth();
                                                            _clickmonth2 = months[_clickmonth2];
    
                                                            var _url = 'validate.ashx';
                                                            $.ajax({
                                                                type: "POST",
                                                                url: _url,
                                                                data: { "_CountryID": document.getElementById("hdcountryID").value, "_EventDate": _clickmonth + '/' + _clickDate + '/' + _clickyear },
                                                                context: document.body,
                                                                success: function (data) {
                                                                    var dt = JSON.parse(data);
                                                                    if (dt == '') {
                                                                        editEvent({ startDate: e.startDate, endDate: e.endDate });
                                                                        if (_clickmonth < 10) {
                                                                            if (_clickDate < 10) {
                                                                                document.getElementById("txtleavestart").value = '0' + _clickDate + '-' + _clickmonth1 + '-' + _clickyear;
                                                                            }
                                                                            else {
                                                                                document.getElementById("txtleavestart").value = _clickDate + '-' + _clickmonth1 + '-' + _clickyear;
                                                                            }
                                                                            if (_clickDate1 < 10) {
                                                                                document.getElementById("txtleaveend").value = '0' + _clickDate1 + '-' + _clickmonth2 + '-' + _clickyear1;
                                                                            }
                                                                            else {
                                                                                document.getElementById("txtleaveend").value = _clickDate1 + '-' + _clickmonth2 + '-' + _clickyear1;
                                                                            }
                                                                        }
                                                                        else {
                                                                            if (_clickDate < 10) {
                                                                                document.getElementById("txtleavestart").value = '0' + _clickDate + '-' + _clickmonth1 + '-' + _clickyear;
                                                                            }
                                                                            else {
                                                                                document.getElementById("txtleavestart").value = _clickDate + '-' + _clickmonth1 + '-' + _clickyear;
                                                                            }
                                                                            if (_clickDate1 < 10) {
                                                                                document.getElementById("txtleaveend").value = '0' + _clickDate1 + '-' + _clickmonth2 + '-' + _clickyear1;
                                                                            }
                                                                            else {
                                                                                document.getElementById("txtleaveend").value = _clickDate1 + '-' + _clickmonth2 + '-' + _clickyear1;
                                                                            }
                                                                        }
                                                                    }
                                                                    else {
                                                                        $(dt).each(function (i) {
                                                                            if (dt[i].holidayname == "1") {
                                                                                alert("Weekly Off");
                                                                                return false;
                                                                            }
                                                                            else {
                                                                                alert("Holiday for " + dt[i].holidayname);
                                                                                return false;
                                                                            }
                                                                        });
                                                                    }
                                                                }
    
                                                            });
                                                        }
                                                        else {
                                                            alert("You are not authorize to apply for leave.");
                                                            return false;
                                                        }
    
                                                    },
                                                    disabledDays: getdisableddate()
                                                });
    
                                                $('#save-event').click(function () {
                                                    saveEvent();
                                                });
                                            });
                                        </script>
                                        <script>
                                            function _checkemailid(_id) {
                                                if (document.getElementById(_id).value != "") {
                                                    var _url = 'validate.ashx';
                                                    $.ajax({
                                                        type: "POST",
                                                        url: _url,
                                                        data: { "_leaveemailcheck": document.getElementById(_id).value },
                                                        context: document.body,
                                                        async: false,
                                                        success: function (data) {
                                                            if (data == "N") {
                                                                document.getElementById(_id).value = "";
                                                                document.getElementById("lblmsg").innerHTML = "Please enter correct email id.";
                                                            }
                                                        }
                                                    });
                                                }
                                            }
                                        </script>
                                        
                                    </div>
                                </div>
    
    
                                <%--<%} %>--%>
                                <!-- End calendar box -->
                                <div class="clearfix">
                                </div>
                                <!-- start footer -->
                                <uc1:Footer ID="Footer1" runat="server" />
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Go top -->
                <a href="#" class="scrollup"><i class="fa fa-chevron-up"></i></a>
                <!-- Go top -->
                <script src="assets/js/vendor/chartJs/Chart.bundle.js"></script>
                <!--timeline_horizontal-->
                <script src="assets/js/vendor/jquery.mobile.custom.min.js"></script>
                <script src="assets/js/vendor/hTimeline.js"></script>
                <!-- amcharts -->
                <script src="assets/js/vendor/amcharts/amcharts.js"></script>
                <script src="assets/js/vendor/amcharts/serial.js"></script>
                <script src="assets/js/vendor/amcharts/pie.js"></script>
                <script src="assets/js/vendor/amcharts/gantt.js"></script>
                <script src="assets/js/vendor/amcharts/funnel.js"></script>
                <script src="assets/js/vendor/amcharts/radar.js"></script>
                <script src="assets/js/vendor/amcharts/amstock.js"></script>
                <script src="assets/js/vendor/amcharts/ammap.js"></script>
                <script src="assets/js/vendor/amcharts/worldLow.js"></script>
                <script src="assets/js/vendor/amcharts/light.js"></script>
                <!-- Peity -->
                <script src="assets/js/vendor/peityJs/jquery.peity.min.js"></script>
                <script src="assets/js/vendor/icheck.js"></script>
                <!-- dataTables-->
                <script type="text/javascript" src="assets/js/vendor/jquery.dataTables.js"></script>
                <script type="text/javascript" src="assets/js/vendor/dataTables.bootstrap.min.js"></script>
                <!-- js for print and download -->
                <script type="text/javascript" src="assets/js/vendor/dataTables.buttons.min.js"></script>
                <script type="text/javascript" src="assets/js/vendor/buttons.flash.min.js"></script>
                <script type="text/javascript" src="assets/js/vendor/jszip.min.js"></script>
                <script type="text/javascript" src="assets/js/vendor/pdfmake.min.js"></script>
                <script type="text/javascript" src="assets/js/vendor/vfs_fonts.js"></script>
                <script type="text/javascript" src="assets/js/vendor/buttons.html5.min.js"></script>
                <script type="text/javascript" src="assets/js/vendor/buttons.print.min.js"></script>
                <script type="text/javascript" src="assets/js/vendor/dataTables.responsive.min.js"></script>
                <script type="text/javascript" src="assets/js/vendor/dataTables.fixedHeader.min.js"></script>
                <!-- slimscroll js -->
                <script type="text/javascript" src="assets/js/vendor/jquery.slimscroll.js"></script>
                <!-- dashboard1 js -->
                <script src="assets/js/dashboard1.js"></script>
                <!-- main js -->
                <script src="assets/js/main.js"></script>
                <!-- adminbag demo js-->
                <script src="assets/js/adminbagdemo.js"></script>
    
    
                <asp:Literal ID="ltcal" runat="server"></asp:Literal>
                <script language="javascript" type="text/javascript" src="../codelibrary/js/scw4.js"></script>
                <script type="text/javascript">
                    function _ddiff123() {
                        var date1 = new Date("" + document.getElementById("txtleavestart").value + "");
                        var date2 = new Date("" + document.getElementById("txtleaveend").value + "");
                        var timeDiff = Math.abs(date2.getTime() - date1.getTime());
                        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
                        diffDays = diffDays + 1;
                        document.getElementById("lbldays").innerHTML = diffDays;
    
                    }
                </script>
    
                <link rel="stylesheet" href="assets/css/jquery-ui.css">
                <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
                <asp:Literal ID="ltsuper" runat="server"></asp:Literal>
                <asp:Literal ID="ltdeputy" runat="server"></asp:Literal>
                <asp:Literal ID="ltprov1" runat="server"></asp:Literal>
                <asp:Literal ID="ltprov2" runat="server"></asp:Literal>
                <script type="text/javascript">
                    function _sickcheck() {
                        var _type = $('#cmb_type').find('option:selected').text();
                        document.getElementById("hdtypename").value = _type;
                        _type = _type.toLowerCase();
                        if (_type == "sick leave") {
                            document.getElementById("tdb1").style.visibility = 'visible';
                            //document.getElementById("tdb2").style.visibility = 'visible';
                            document.getElementById("hdcheck").value = 'V';
                        }
                        else {
                            document.getElementById("tdb1").style.visibility = 'hidden';
                            //document.getElementById("tdb2").style.visibility = 'hidden';
                            document.getElementById("hdcheck").value = '';
                        }
                    }
                    function _halfday() {
                        // alert("ddd");
                        if ((document.getElementById("txtleavestart").value != "") && (document.getElementById("txtleaveend").value != "")) {
                            if (document.getElementById("txtleavestart").value == document.getElementById("txtleaveend").value) {
                                document.getElementById("hd1").style.visibility = 'visible';
                                //document.getElementById("hd2").style.visibility = 'visible';
                                document.getElementById("hdhalf").value = 'Y';
                            }
                            else {
                                document.getElementById("hd1").style.visibility = 'hidden';
                                //document.getElementById("hd2").style.visibility = 'hidden';
                                document.getElementById("hdhalf").value = '';
                            }
                        }
                        else {
                            document.getElementById("hd1").style.visibility = 'hidden';
                            //document.getElementById("hd2").style.visibility = 'hidden';
                            document.getElementById("hdhalf").value = '';
                        }
                    }
                    //onmouseover="javascript:_halfday();"
                </script>
            </form>
            <script language="javascript" type="text/javascript" src="../codelibrary/js/lib.js"></script>
            <script language="JavaScript" type="text/javascript">
                function ChkallValidation() {
                    if (validateForm(document.getElementById("form1"))) {
                        if (document.getElementById("chkdeputy").checked == true) {
                            $("#cmdSubmit").hide();
                            return true;
                        }
                    }
                    else {
                        return false;
                    }
                }
            </script>
           
            <script type="text/javascript">
                $(document).ready(function () {
                    BindControls();
                });
                function BindControls() {
                    var uid = $("#ltuser").text();
                   
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "ServiceGetTrainingDate.asmx/GetTrainingDates",
                        data: "{'user_id':'" + uid + "'}",
                        datatype: "json",
                        success: function (data) {
                            //define an array to store the final data
                            debugger;
                            var target = [];
                            // loop through data.d array
                            for (var i = 0; i < data.d.length; i++) {
                                //get training_title and set to an object's title property ,get date and set the object's start property to date.
                                var item = { name: data.d[i]["training_title"], startDate: Date.now(), endDate: new Date(2019, 4, 29) }
                                // add the item to the target array
                                target.push(item);
                            }
                            $('#calendar').fullCalendar({
    
                                enableContextMenu: true,
                                enableRangeSelection: true,
                                dataSource: target  // use the target array as events'  datasrouce
    
                            })
    
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            debugger;
                        }
                    });
                }
                //}
    </script>

    Friday, March 1, 2019 11:25 AM
  • User1052662409 posted

    the array should not contain so many elements.

    I guess the array takes other data which is resides on my page itself .

    Actually I can not make a new page for my purpose. Otherwise it would have not hard to nail.

    There are already many functionality running. I did not created this page. But I need add my services data in the same calendar.

    Thanks

    Friday, March 1, 2019 11:54 AM
  • User-2054057000 posted

    In your success callback you can do this:

    success: function (data) {
        alert(data.d.date); // gives you 2/24/2019 12:00:00 AM
        //...
    },

    Now you can simply bind this date to your calendar.

    Friday, March 1, 2019 12:19 PM
  • User-893317190 posted

    Hi demoninside9,

    I see you function that retrieve data is 

    function getMyData() {
                                                var myData = [];
                                                $.ajax({
                                                    type: "Post",
                                                    url: 'validate.ashx',
                                                    data: { "Holiday_List": document.getElementById("hdcountryID").value, "EMPID": document.getElementById("hdempid").value, "EMPTYPE": document.getElementById("hd_logintype").value },
                                                    context: document.body,
                                                    async: false,
                                                    success: function (data) {
                                                        var dt = JSON.parse(data);
                                                        if (dt == '') {
    
                                                        }
                                                        else {
                                                            var _color = "";
                                                            $(dt).each(function (i) {
                                                                if (dt[i]._type == "holiday") {
                                                                    _color = '#B2BFB1';
                                                                }
                                                                else if (dt[i]._type == "annual leave") {
                                                                    _color = '#52A8FF';
                                                                }
                                                                else if (dt[i]._type == "sick leave") {
                                                                    _color = '#F5A400';
                                                                }
                                                                else {
                                                                    _color = '#82ae5f';
                                                                }
                                                                myData.push({
                                                                    id: dt[i].bigid,
                                                                    name: dt[i].Reason,
                                                                    location: '',
                                                                    startDate: new Date(dt[i].startyear, dt[i].startmonth, dt[i].startdate),
                                                                    endDate: new Date(dt[i].endyear, dt[i].endmonth, dt[i].enddate),
                                                                    color: _color
                                                                });
                                                            });
                                                        }
                                                    }
    
                                                });
                                                return myData;
                                            }
    

    It is different from your original code.

    I  think you could debug your code  to check your array of data after the ajax call returns. 

    I wonder it is not an empty array.

     $.ajax({
                    type: "POST",
                    url: "/Services/MyService.asmx/HelloWorld",
    
                    data: JSON.stringify({ user_id: 1006 }),
                    contentType: "application/json",
                    datatype: "json",
                    success: function (data) {
                       // here debug to see your array
                        var target = [];
                        // loop through data.d array
                        for (var i = 0; i < data.d.length; i++) {
                            //get training_title and set to an object's title property ,get date and set the object's start property to date.
                            var item = { name: data.d[i]["training_title"], startDate: Date.now(),endDate: new Date(2019, 4, 29) }
                            // add the item to the target array
                            target.push(item);
                        }
                    $('#calendar').calendar({
              
                        enableContextMenu: true,
                     enableRangeSelection: true,
                  dataSource: target  // use the target array as events'  datasrouce
           
     
        })
    

    Best regards,

    Ackerly Xu

    Monday, March 4, 2019 1:38 AM
  • User1052662409 posted

    I see you function that retrieve data is 

    This is separate one.

    I have written another scrip block to call my webservice.

    Is getMyData() interrupting my new ajax fucntion? 

     

    Monday, March 4, 2019 8:07 AM
  • User-893317190 posted

    Hi demoninside9,

    I find  your returned data is of type string not an array , you could refer to my picture.

    You could see my data.d shows  Array(1) , yours is  string, so it loops through the string. I guess the string's length is 100.

    You should return an object from your service.

    Below is my service.

     [WebMethod]
            public List<TrainingDates> HelloWorld(int user_id)
            {
    
              
                var TDates = new List<TrainingDates>();
          
                var dates = new TrainingDates
                {
                    training_title = "Induction Workshop has been scheduled on 27th – 29th March 2019",
                    date = "2/24/2019 12:00:00 AM"
                };
    
                TDates.Add(dates);
                return TDates;
               
    
            }
    public class TrainingDates
    {
    public string training_title { get; set; }
    public string date { get; set; }
    }

     You should return data of type List<TrainingDates>.

    Best regards,

    Ackerly Xu

    Monday, March 4, 2019 8:54 AM
  • User1052662409 posted

    Yes, I did the same as you suggested.  

    Now I am getting only one item in array. But not showing in calendar.

    And when I try go ahead by pressing F10 it shows a red point on the below line and goes into jquery file code.

    here is shows the red point and immoderately goes into jquery

     $('#calendar').fullCalendar({



    And in console it shows the following error


     

    Monday, March 4, 2019 10:53 AM
  • User-893317190 posted

    Hi demoninside9,

    Your console shows you are using fullcalendar  instead of  bootstrap-calendar.

    If you want to use bootstrap-calendar please change fullCalendar to calendar  and import your  bootstrap-year-calendar.css and bootstrap-year-calendar.js

     $('#calendar').calendar({
              
                        enableContextMenu: true,
                     enableRangeSelection: true,
                  dataSource: target  // use the target array as events'  datasrouce
           
     
        })

    Best regards,

    Ackerly Xu

    Tuesday, March 5, 2019 1:18 AM
  • User1052662409 posted

     $('#calendar').calendar({

    Yes, It works. 

    I am almost done. My requirement is that my start date and end date should be equal.

    form this line 

    var item = { name: data.d[i]["training_title"], startDate: Date.now(), endDate: new Date(2019, 4, 29) }

    Give the below output.

    When I try to modify it to make both dates same like below.

    var item = { name: data.d[i]["training_title"], startDate: data.d[i]["date"], endDate: data.d[i]["date"] }

    It doesn't show. 

    Thanks

     

    Tuesday, March 5, 2019 3:40 AM
  • User-893317190 posted

    Hi demoninside9,

    You should parse your datastring to data of type date.

    Below is my code.

     // define a function to parse string to date

    function parseStringToDate(dateString) { // get year , month and day var ymd = dateString.split(" ")[0].split("/"); var mydate = new Date(parseInt(ymd[2]), parseInt(ymd[0])-1, parseInt(ymd[1])) return mydate; } $(function () { $.ajax({ type: "POST", url: "/Services/MyService.asmx/HelloWorld", async:false, data: JSON.stringify({ user_id: 1006 }), contentType: "application/json", datatype: "json", success: function (data) { var target = []; // loop through data.d array for (var i = 0; i < data.d.length; i++) { var item = { name: data.d[i]["training_title"], startDate:parseStringToDate(data.d[i]["date"]) , endDate:parseStringToDate(data.d[i]["date"]) } // add the item to the target array target.push(item); } $('#calendar').calendar({ enableContextMenu: true, enableRangeSelection: true, dataSource: target // use the target array as events' datasrouce }) }, error: function (XMLHttpRequest, textStatus, errorThrown) { } }); })

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 5, 2019 5:53 AM
  • User1052662409 posted

    You should parse your datastring to data of type date.

    Thank you... Thank you so much Ackerly Xu. You just made my day.laughing

    This is what I wanted. 

    Thanks again for giving  your valuable time on this post. 

    Tuesday, March 5, 2019 6:07 AM