Paul-DS / bootstrap-year-calendar

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

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

Closed alphabetpm closed 5 years ago

alphabetpm commented 6 years ago
$("#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;
};
peter450 commented 6 years ago

you should look at #176 The function getDataSource() is already created in bootstrap-year-calendar.js don't rewrite it. url: '/event/all is not correct, you have to create a script file (.eg. myfile.php) to load datas from the database and json encode the result. I'm not sure that your knowledge is sufficient. 2 other ajax requests are necessary if you need to create/update and delete an event. Here is an example created from the Full example from http://www.bootstrap-year-calendar.com/#Examples/Full%20example. Some fields are different (like class and tutor), I have added this code at the bottom of the script:

    $.ajax({
        type:"POST",
        data : "id="+parametre,
        url:"./ajax/myfile.php",
        dataType : 'json',
        success:function(response){
            var data = [];
            for (var i = 0; i < response.length; i++) {
                data.push({
                    id: response[i].id,
                    class: response[i].class,
                    tutor: response[i].tutor,
                    startDate: new Date(response[i].startDate),
                    endDate: new Date(response[i].endDate)

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