dataSource how to initialize data through AJAX?

[yonj1e]

I use ajax database data to replace datasource template data, but failed, how to do?

Thanks

$(function() {
    var currentYear = new Date().getFullYear();

    $('#calendar').calendar({       

        ...

        dataSource: //getMyData()
             [
                {"endDate": new Date(2018, 03, 20),"id":2,"location":"d","name":"d","startDate": new Date(2018, 03, 20)},
                {"endDate": new Date(2018, 09, 02),"id":4,"location":"f","name":"f","startDate": new Date(2018, 09, 02)}
            ] 
        });

        $('#save-event').click(function() {
            saveEvent();
        });
    });
    function getMyData() {
        var myData;
        $.ajax({
            url: '/Information/calendar/allCalendar.action',
            type: 'POST',
            async: false,
            success: function (data) {
                myData = data;
                alert("myData"+myData);
                $('#calendar').data('calendar').setDataSource(myData);
            }
        });
        alert(myData);
        return myData;
    };
</script>```

[Eloytxo]

How I do:

First, fill th dataSource:

            <script>
                        var dataSource = [];
            <c:forEach items="${miCalendario}" var="calendarioDia" varStatus="loop">

                    var date = new Date(${calendarioDia.year},${calendarioDia.month 
                                         -1},${calendarioDia.day});
                    var dia = {

                            id:${loop3.index},
                            name:'${calendarioDia.descripcionTipoDia}'.trim(),
                            startDate:date,
                            endDate: date,
                            color: '${calendarioDia.color}'
                    };
                    dataSource.push(dia);

            </c:forEach>
            </script>

Then init the calendar:

var currentYear = new Date().getFullYear();
    $j('#calendar').calendar({
        style:'background',
        startYear: currentYear,
        language: 'es',
        minDate:new Date(currentYear,0,1),
        maxDate:new Date(currentYear,11,31),
        dataSource:dataSource,
    });

If you still getting errors, show us the error, so we can help u better.

[Oracularman]

what must be the "date" format returned in the data source?

startDate:date, endDate: date,

[Eloytxo]

Javascript Date is good.

var date = new Date(${year},${month},${day});

[oqilkarimov]

Don't show datasource on calendar when load from ajax. Where i mistake?

$("#calendar").calendar({
        customDayRenderer: function(element, date) {
            if(date.getTime() == circleDateTime) {
                $(element).css('background-color', '#4285f4');
                $(element).css('color', 'white');
                $(element).css('border-radius', '15px');
            }
        },
        language: 'ru',
        clickDay: function(e){
            var year = e.date.getFullYear();
            var month = e.date.getMonth() + 1;
            var date  = e.date.getDate();
            window.location.href = '/event/list/' + year + '/' + month + '/' + date;
        },
        dataSource: getDataSource(),
    });
function getDataSource() {
    var result= [];
    $.ajax({
        url: '/event/all',
        dataType: 'json',
        success: function (doc) {
            $(doc).each(function() {
                result.push({
                    id: $(this).attr('id'),
                    title: $(this).attr('title'),
                    startDate: new Date($(this).attr('start')),
                    endDate: new Date($(this).attr('start')),
                    color: 'yellow',
                });
            });
        }
    });
    return result;
};

[Oracularman]

.NET 2.0 Core C# MVC Controller Method:

  public JsonResult GetYearCalendar()
        {
            var OwnerId = this.User.FindFirstValue(ClaimTypes.NameIdentifier);
            var eventList = (from e in _context.Activities.Where(d => d.IsDeleted == false).Where(o => o.OwnerID == OwnerId)
                             select new
                             {
                                 startdate = string.Format("{0:yyyy-MM-dd}", (e.Timestamp.Date.AddDays(+1))),
                                 enddate = string.Format("{0:yyyy-MM-dd}", (e.Timestamp.Date.AddDays(+1))),
                                 color = "limegreen"
                             }).Distinct();

            if (eventList.Any())
            {
                var rows = eventList.ToArray();
                return Json(rows);
            }
            else
            {
                StatusMessage = "No data available to display.";
                return Json("Data not available");
            }

        }

View:

<script type="application/javascript">
                   $(document).ready(function() {
                    // show current year by default
                    var currentYear = new Date().getFullYear();
                     $.ajax({
                            url: "/Activity/GetYearCalendar",
                            type: 'GET',
                            contentType: 'application/json',
                            dataType: 'json',
                            success: function(response) {
                            var data = [];
                                for (var i = 0; i < response.length; i++) {
                                    data.push({
                                        startDate: new Date(response[i].startdate),
                                        endDate: new Date(response[i].enddate),
                                        color : response[i].color
                                    });
                                }
                             $('#calendar').calendar({
                                    enableRangeSelection: false,
                                    minDate:new Date(currentYear,0,1),
                                    maxDate:new Date(currentYear,11,31),
                                    dataSource: data
                                    });
                             },
                           error: function (error) {
                           alert(error);
                          }
                    });
                });

            </script>

[sangheraajit]

Hi Oracularman,

Are you able to make it work?

[gvorster]

Setting datasource like this works for me:

    var day= {
      id: 0,
      name: 'xxxxxx',
      startDate: new Date(2021, 11, 22),
      endDate: new Date(2021, 11, 22),
    };

    dataSource.push(day);

new Data() -> is not displaying anything, I have to use new Date(yyyy, mm, dd)