0

I would be glad if someone help me for javascript. My code works and it shows the data in this way. but I need to show it with array, which I couldn't. Thanks for all help!!:)) so this is my jquery code:

jQuery(document).ready(function () {
        _user = JSON.parse('@Html.Raw(Json.Serialize(Model.User))');
        KTCalendarBasic.init();
        user_appointments_list = _user.user_appointments;
        for (var i = 0; i < user_appointments_list.length; i++) {
            user_appointment_date_list[i] = user_appointments_list[i].appointment_time;
        }
    });

and this is my fullcalendar usage. it works fine for one json data object.

var KTCalendarBasic = function () {
        return {
        init: function () {
                events:
                    [
                    {
                        title: 'Hatırlatıcı',
                        start: _user.user_reminders[0].remind_date,
                        end: _user.user_reminders[0].remind_date,
                        description: "NOT: " + _user.user_reminders[0].note + " GAYRİMENKUL ADRESİ: " + _user.user_reminders[0].asset_address + " MÜŞTERİ: " + _user.user_reminders[0].customer_full_name + " MÜŞTERİ TELEFONU: " + _user.user_reminders[0].customer_phone,
                        className: "fc-event-danger fc-event-solid-warning"

                    },
                    {

                        title: 'Randevu',
                        //start: YM + '-14T13:30:00',
                        start: _user.user_appointments[0].appointment_time,
                        description: "ADRES: " + _user.user_appointments[0].appointment_place + " MÜŞTERİ: " + _user.user_appointments[0].customer_full_name,
                        //description: _user.user_appointments.appointment_time,
                        end: _user.user_appointments[0].appointment_time,
                        className: "fc-event-success",
                    }
                    ],
                eventRender: function (info) {
                    var element = $(info.el);

                    if (info.event.extendedProps && info.event.extendedProps.description) {
                        if (element.hasClass('fc-day-grid-event')) {
                            element.data('content', info.event.extendedProps.description);
                            element.data('placement', 'top');
                            KTApp.initPopover(element);
                        } else if (element.hasClass('fc-time-grid-event')) {
                            element.find('.fc-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
                        } else if (element.find('.fc-list-item-title').lenght !== 0) {
                            element.find('.fc-list-item-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
                        }
                    }
                }
            });

            calendar.render();
        }
    };
}();
    

I have to fix it with array which I write and it turns correctly in jquery part. I have to implement this array inside the fullcalendar usage part. Thank you!:))

init: function () {
                    for (var j = 0; j < user_appointment_date_list.length; j++) {
                        var currentValue = user_appointment_date_list[j];
                        var todayDate = moment().startOf('day');

I tried this code. and rewrite the event part. the final whole code is:

var KTCalendarBasic = function () {

            return {
                //main function to initiate the module
                init: function () {
                    for (var j = 0; j < user_appointment_date_list.length; j++) {
                        var currentValue = user_appointment_date_list[j];
                        var todayDate = moment().startOf('day');
                        var YM = todayDate.format('YYYY-MM');
                        var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
                        var TODAY = todayDate.format('YYYY-MM-DD');
                        var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');

                        var calendarEl = document.getElementById('kt_calendar');
                        var calendar = new FullCalendar.Calendar(calendarEl, {

                            plugins: ['bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list'],
                            themeSystem: 'bootstrap',

                            isRTL: KTUtil.isRTL(),

                            header: {
                                left: 'prev,next today',
                                center: 'title',
                                right: 'dayGridMonth,timeGridWeek,timeGridDay'
                            },

                            height: 800,
                            contentHeight: 780,
                            aspectRatio: 3,  // see: https://fullcalendar.io/docs/aspectRatio

                            nowIndicator: true,
                            //now: TODAY + 'T09:25:00', // just for demo

                            views: {
                                dayGridMonth: { buttonText: 'month' },
                                timeGridWeek: { buttonText: 'week' },
                                timeGridDay: { buttonText: 'day' }
                            },

                            defaultView: 'dayGridMonth',
                            defaultDate: TODAY,

                            editable: false,
                            eventLimit: true, // allow "more" link when too many events
                            navLinks: true,
                            events:
                                [
                                    {
                                      
                                        title: 'Hatırlatıcı',
                                        //start: user_appointment_date_list,
                                        //start: item.remind_date,
                                        //end: item.remind_date,
                                        //description: "NOT: " + item.note + " GAYRİMENKUL ADRESİ: " + item.asset_address + " MÜŞTERİ: " + item.customer_full_name + " MÜŞTERİ TELEFONU: " + item.customer_phone,
                                        className: "fc-event-danger fc-event-solid-warning",
                                        startRecur: currentValue,
                                        endRecur: currentValue


                                    },
                                    {

                                        title: 'Randevu',
                                        //start: YM + '-14T13:30:00',
                                        start: _user.user_appointments[0].appointment_time,
                                        description: "ADRES: " + _user.user_appointments[0].appointment_place + " MÜŞTERİ: " + _user.user_appointments[0].customer_full_name,
                                        //description: _user.user_appointments.appointment_time,
                                        end: _user.user_appointments[0].appointment_time,
                                        className: "fc-event-success",
                                    }
                                ],
                            eventRender: function (info) {
                                var element = $(info.el);

                                if (info.event.extendedProps && info.event.extendedProps.description) {
                                    if (element.hasClass('fc-day-grid-event')) {
                                        element.data('content', info.event.extendedProps.description);
                                        element.data('placement', 'top');
                                        KTApp.initPopover(element);
                                    } else if (element.hasClass('fc-time-grid-event')) {
                                        element.find('.fc-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
                                    } else if (element.find('.fc-list-item-title').lenght !== 0) {
                                        element.find('.fc-list-item-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
                                    }
                                }
                            }
                        });
                        calendar.render();
                    }
                }
            };
        }();

I am trying to solve title: 'Hatırlatıcı' part in events.

gokce
  • 31
  • 5
  • Sounds like you need to loop through the `user_reminders` and `user_appointments` arrays in order to create an array of fullCalendar events. Have you tried that? It's a bit unclear what the problem is. All you said is you "couldn't", which doesn't really tell us what you tried, or what went wrong. Please be clearer about the exact issue, and show your attempt to solve the problem. – ADyson Apr 30 '21 at 10:13
  • well thanks for reply. I tried to use an array for show all values on calendar from my this array. I just can show one object. array[0] is alright. array[1] is alright. which I can paste that code here: start: _user.user_appointments[0].appointment_time, .... but I need to use it with a loop. it doesn't allow me to use for loop. or I couldn't implement it properly. can you help me please? I just need to implement for loop for reach all values. – gokce Apr 30 '21 at 10:48
  • `it doesn't`..what doesn't? You can write a loop in your `init` function if you want (before you define the calendar options). I don't understand what would be stopping you. – ADyson Apr 30 '21 at 10:50
  • hey. I sent my last edit. I would be glad if you help me. – gokce Apr 30 '21 at 11:21
  • If you have 10 events then that will create 10 calendars. And you're still not passing the data to the calendar properly anyway. It makes no sense. You need to create an empty events array, loop through all your appointments and add each one to the events array in the correct format, then do the same with the reminders. Then you need to pass that array **once** to fullCalendar, after you have finished looping. – ADyson Apr 30 '21 at 11:36
  • Yes sir. "and add each one to the events array in the correct format," you said. so how to do it? – gokce Apr 30 '21 at 13:26
  • You mean you don't know how to add things to an array using Javascript? That's not hard to find out from tutorials and documentation, etc (e.g. https://stackoverflow.com/questions/351409/how-to-append-something-to-an-array). – ADyson Apr 30 '21 at 13:30
  • It's clear you already know what the correct fullCalendar format is, because you've specified that in your static events code (e.g. `{ title: 'Hatırlatıcı', start: _user.user_reminders[0].remind_date, end: _user.user_reminders[0].remind_date, description: "NOT: " + _user.user_reminders[0].note + " GAYRİMENKUL ADRESİ: " + _user.user_reminders[0].asset_address + " MÜŞTERİ: " + _user.user_reminders[0].customer_full_name + " MÜŞTERİ TELEFONU: " + _user.user_reminders[0].customer_phone,className: "fc-event-danger fc-event-solid-warning"}`) – ADyson Apr 30 '21 at 13:30
  • I won't add things in to the array. I will have 2 array, but later. I mean I don't know where should I write to the for statement? I have to do this now: "You can write a loop in your init function" – gokce Apr 30 '21 at 14:28
  • `I won't add things in to the array`...er, why not? That's what you need to do. – ADyson Apr 30 '21 at 14:46
  • `You can write a loop in your init function`...you've already done that! The problem is that the loop contains the calendar initialisation code when it shouldn't. – ADyson Apr 30 '21 at 14:46
  • The basic idea should be something like this, I think (this is untested pseudocode): `init: function() { var events = []; for (var j = 0; j < _user.user_appointments.length; j++) { var evt = { "title": title: 'Randevu', start: _user.user_appointments[j].appointment_time }; events.push(evt); } for (var k = 0; k < _user.user_reminders.length; k++) { var evt = { "title": title: 'Hatırlatıcı', start: _user.user_reminders[k].remind_date }; events.push(evt); }`... – ADyson Apr 30 '21 at 14:51
  • .... `var calendarEl = document.getElementById('kt_calendar'); var calendar = new FullCalendar.Calendar(calendarEl, {` ... `events: events` ... `});` – ADyson Apr 30 '21 at 14:51
  • Do you see what I mean now? – ADyson Apr 30 '21 at 14:52
  • yes! thank you so much. you really enlightened me right now and teach me a lot with that! you made me so happy. – gokce Apr 30 '21 at 16:12

0 Answers0