Home > OS >  Vuejs 2 how to create an event on fullcalendar
Vuejs 2 how to create an event on fullcalendar

Time:10-07

I'm having some problems with creating places in fullcalendar, I'm using vue js for this but it's the first time I'm working with vue js and fullcalendar. And my problem is that I can create events in the calendar, but the event is not created on the date I click, but on today's date. And I have the impression that I didn't do something right, since the event creation method uses javascript and not vue. So can someone help me with the right way how to create events?

<div >
                <FullCalendar :options="calendarOptions" />
            </div>

.....
select: this.selectEventFunction,
eventSources: [
                    {
                    events: function(fetchInfo, successCallback, failureCallback) {

                        axios.get('/getEvent').then(response => {
                            successCallback(response.data.data)
                        });
                    }
                    }
                ]

created method

methods: {
        selectEventFunction: function(start,end,allDays) {
            // console.log(start);
            $('#addEventCalendar').modal('toggle');

            $('#createEvent').click(function () {
                var title = $('#title').val();
                var start = moment(start).format('YYYY-MM-DD');
                var end = moment(end).format('YYYY-MM-DD');
                // console.log(start);
                $.ajax({
                    url: "/event-calendar",
                    type: "POST",
                    dataType: 'json',
                    data: {
                        title,
                        start,
                        end
                    },
                    success: function(response)
                    {
                        console.log(response)
                    },
                    error:function(error)
                    {
                        console.log(error)
                    },
                });
            });
        },
    },

CodePudding user response:

Calendar::addEvent Adds a new event to the calendar.

calendar.addEvent( event [, source ] )

event is a plain object that will be parsed into an Event Object.

source represents the Event Source you want to associate this event with. When the source is refetched, it will clear the dynamically added event from the internal cache before fetching. This optional parameter can be specified as any of the following:

an Event Source ID string an Event Source Object true, which signifies the first event source This method returns the proper Event Object that was parsed from the plain object.

  • Related