Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

312
Views
How to add remove event option with cross sign in fullcalendar.io ? asp.net mvc core

I am going to add remove cross sign with each event of calendar which are getting from database. But how to add this and i want when click on cross sign(delete) then specific url will be triggered and i want to delete event from database. Please let me know how can i do this? How to add delete event with cross sign.

call-init.js

  !function($) {
   "use strict";

var CalendarApp = function() {
    this.$body = $("body")
    this.$calendar = $('#calendar'),
    this.$event = ('#calendar-events div.calendar-events'),
    this.$categoryForm = $('#add-new-event form'),
    this.$extEvents = $('#calendar-events'),
    this.$modal = $('#my-event'),
    this.$saveCategoryBtn = $('.save-category'),
    this.$calendarObj = null
};

  /* Initializing */
CalendarApp.prototype.init = function() {
    this.enableDrag();
    /*  Initialize the calendar  */
    var events = [];

    $.ajax({
        type: 'POST',
        async: false,
        url: '/Booking/GetBookings',
        success: function (mems) {
            
             //states contains the JSON formatted list
             //of states passed from the controller
            $.each(mems, function (_, member) {
                debugger;
                events.push({

                    title: member.guestname,
                    start: new Date(member.checkindatetime),
                    end: new Date(member.checkoutdatetime),
                    allDay: true,
                    url: '/Booking/Booking/' + member.encryptedId,
                    className: member.classnamecolor
                   
                });

                
            });


        },
        error: function (ex) {
            alert('Buchungen konnten nicht geladen werden.');
        }
    });
           var $this = this;
    $this.$calendarObj = $this.$calendar.fullCalendar({
        defaultView: 'month',  
        handleWindowResize: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },

       
        navLinks: false, // can click day/week names to navigate views
        events: events
        //eventStartEditable: false // disable drag&drop of events
    });
},

 //init CalendarApp
$.CalendarApp = new CalendarApp, $.CalendarApp.Constructor = CalendarApp

}(window.jQuery),

//initializing CalendarApp
function($) {
"use strict";
$.CalendarApp.init()
}(window.jQuery);

other calendar view is

@model FewoVerwaltung.Models.Booking.BookingListModel
 
 <div id="calendar"></div>
 <!-- Calendar JavaScript -->
<script src="~/plugins/calendar/dist/locale/de.js"></script>
<script src="~/plugins/calendar/dist/fullcalendar.min.js"></script>
 <script src="~/plugins/calendar/dist/cal-init.js"></script>
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!