How to fetch events from 2 database tables?

I am using Full Calendar to add, edit events (holidays,weekly off) as an admin. In my project I have to add as a User my leaves and trip plans which should be visible to admin. As of now all this is working correctly, now in the calendar I am fetching the leaves/trips data and that is visible to admin. Now as Admin I will create holidays which I am storing in another table, I am unable to fetch these holidays and show in calendar and only the leaves/trips data is visible.

    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        events: '/calendar/getReports',
        selectable: true,
        selectHelper: true,
        select: function(start, end, allDay) {
            var starttime = $.fullCalendar.formatDate(start, "Y-MM-DD");
            console.log(starttime);
            endtime = $.fullCalendar.formatDate(end,'Y-MM-DD');
            alert(endtime);          
            $('#add-empleaves #event_from_date').val(starttime);
            $('#add-empleaves #event_till_date').val(endtime);
            $('#add-empleaves #event_description').val();
            $('#add-empleaves #event_location').val();
            doSubmit();
            $('#add-empleaves').modal('show');     
                calendar.fullCalendar('renderEvent',
                    {
                        title: $('#event_name').val(),
                        start: starttime,
                        end: endtime,
                        event_description: $('#add-empleaves #event_description').val(),
                        event_location: $('#add-empleaves #event_location').val()                        
                    },
                    true // make the event "stick"
                );
            calendar.fullCalendar('unselect');
}, editable: true,
        eventResize: function(event) {
            var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
            var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
            var title = event.title;
            var id = event.id;
            $.ajax({
                url: "/calendar/updateEvent/",
                type: "PUT",
                data: {
                    event_from: start,
                    event_to: end,
                    event_id: id
                },
                success: function() {
                    calendar.fullCalendar('refetchEvents');
                    PNotify.removeAll();
                    successMessage(''+labels['calendarlabels']['Event Updated']+'');
                    // alert('Event Update');
                }
            })
        },
        editable: true,           
        eventClick: function(event) {               
            var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
            var end;
            if(event.end == null)
            {
              end = start;
            }
            else{
              end =  $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
            }               
            $('#travelid').val(event.travelid);
            $('#tgi_id').val(event.type);
            $('#reason').val(event.title);
            $('#from_date').val(start);
            $('#till_date').val(end);  
            $('#reason').val(event.reason);        
            $('#editEvent').modal('show');
 },
        editable: true,
        droppable: true,
        drop: function(date, allDay, resourceId) {   
            var data = {
                event_id: $('.external-event').attr('id').toString(),
                event_from: date.format("Y-MM-DD HH:mm:ss"),
                event_to: date.format("Y-MM-DD HH:mm:ss"),
                event_name : $('.external-event').data('title'),
                event_description : $('.external-event').data('desc'),
                event_color : $('.external-event').data('color'),
            };
            console.log(data);         
            var originalEventObject = $(this).data('eventObject')         
            var copiedEventObject = $.extend({}, originalEventObject)
            copiedEventObject.start = date        
            copiedEventObject.allDay = allDay
            copiedEventObject.backgroundColor = $(this).css('background-color')
            copiedEventObject.borderColor = $(this).css('border-color')          
            if ($('#drop-remove').is(':checked')) {

                $(this).remove()
            }

        }
    });

Through above url getreports I am able to fetch the leaves/trip data but now I want to fetch the holidays events as well using another url.

from which URL is it?

/calendar/getEvent

I am not able to figure out how to pass this url as well in the events.
i.e., ```
events: ‘/calendar/getReports’,


I tried using eventSource as well but no luck.

var calendar = $(’#calendar’).fullCalendar({
header: {
left: ‘prev,next today’,
center: ‘title’,
right: ‘month,agendaWeek,agendaDay’
},
// events: ‘/calendar/getReports’,
eventSources: [{

        url: '/calendar/getReports'

    /*},
    {

        url: '/calendar/getEvent'*/
    }
    ],
    selectable: true,
    selectHelper: true,
    select: function(start, end, allDay) {
        // var title = prompt('Event Title:');  
        var starttime = $.fullCalendar.formatDate(start, "Y-MM-DD");
        console.log(starttime);
        endtime = $.fullCalendar.formatDate(end,'Y-MM-DD');
        alert(endtime);
        /*starttime = $.fullCalendar.formatDate(start,'Y-MM-DD');
        alert(starttime);*/
        $('#add-empleaves #start').val(starttime);
        $('#add-empleaves #end').val(endtime);
        $('#add-empleaves #event_description').val();
        $('#add-empleaves #event_location').val();
        doSubmit();
        $('#add-empleaves').modal('show');     
            calendar.fullCalendar('renderEvent',
                {
                    title: $('#event_name').val(),
                    start: starttime,
                    end: endtime,
                    event_description: $('#add-empleaves #event_description').val(),
                    event_location: $('#add-empleaves #event_location').val()                        
                },
                true // make the event "stick"
            );
        calendar.fullCalendar('unselect');
    },

Using eventSource I am able to fetch the data but that is not showing in calendar. Used console.log to check the results where all the data is retrieved but unable to view in calendar.

Sponsor our Newsletter | Privacy Policy | Terms of Service