Paul-DS / bootstrap-year-calendar

[DEPRECATED] A fully customizable year calendar widget, for boostrap !
Apache License 2.0
293 stars 243 forks source link

customDataSourceRenderer is not working. #224

Closed mkyriacou11 closed 6 years ago

mkyriacou11 commented 6 years ago

I use an ajax call to populate dataSource from MySQL and my customDataSourceRenderer doesn't work. if i hardcode the dataSource var, everything works as it should. Can anyone help me please?

customDataSourceRenderer: --->

`customDataSourceRenderer: function(element, date, events) {
        if(events[0].type == 'deadline'){
            $(element).css('background-color', '#ed3434');
            $(element).css('color', 'white');
            $(element).css('border-radius', '15px');

        }
        else if(events[0].type == 'event'){
            $(element).css('background-color', '#049904');
            $(element).css('color', 'white');
            $(element).css('border-radius', '15px');
        }
        else if(events[0].type == 'meeting'){
            $(element).css('background-color', '#113da5');
            $(element).css('color', 'white');
            $(element).css('border-radius', '15px');
        }`

AJAX: -->

var ajaxoption = {
        url: '/getallevents',
        async: false,
        dataType: 'json',
        data: dataSource,
        success: function (response) {
            var dataSource = [];
            for (var i = 0; i < response.length; i++) {
                dataSource.push({
                    id: response[i].id,
                    name: response[i].name,
                    location: response[i].location,
                    startDate: new Date(response[i].startDate),
                    endDate: new Date(response[i].endDate),
                    type: response[i].type

                });
                $('#calendar').data('calendar').setDataSource(dataSource);      

                  }

            }   
        }

        $.ajax(ajaxoption);

/////////////////////////////////////////////////////// [SOLVED] //////////////////////////////////////////////////////

The problem was my date format. For some reason it wasn't passing the correct date and customDataSourceRenderer didn't pick the correct date to highlight. The way i solved it was to checking every entry for the customDataSourceRenderer and figured out it was my date. ////////////////////-SOLUTION-////////////////////////////////////////////////////

var dataSource = [];
            $.ajax({
                url: '/getallevents',
                async: false,
                dataType: 'json',
                success: function (response) {
                    var  dataSource= [];
                    for (var i = 0; i < response.length; i++) {
                        var startdate = response[i].startDate.split("-");
                        var enddate = response[i].endDate.split("-");
                        dataSource.push({
                            id: response[i].id,
                            name: response[i].name,
                            location: response[i].location,
                            startDate: new Date(startdate[0],startdate[1],startdate[2]),
                            endDate: new Date(enddate[0],enddate[1],enddate[2]),
                            type: response[i].type
                        });