Vollkalender Hinzufügen von Anker in den leeren Zellen

Question

Ich benutze Adam Shaw's Full Calender auf meiner Buchungsseite.

Jetzt möchte ich diesen Kalender so anpassen, dass jede leere Zelle einen Link "Place Booking" haben sollte. Klicken Sie auf diesen Anker, um ihn in einem neuen Tab zu öffnen und das Datum dieser Zelle in der URL zu übernehmen.

Hier ist mein Code

$('.fc-day-number').each(function() { 
    var day = parseInt($(this).html()); 
    $(this).html('<a href="http://www.example.com/booking.php?booking_date='booking date of the cell'" target="_blank">' + day + '</a>'); 
}); 

Zur Zeit ich den Anker an Tag gelegt haben Nummer der Zelle. Aber das Problem ist, dass die Anker verschwinden, wenn ich den Monat von den Vor- und Zurück-Knöpfen des Plugins ändere, kann ich auch nicht das Datum der Zelle bekommen.

Ich bin kein Experte in JS jede Hilfe wird sehr geschätzt.

Answer 1

Versuchen Sie folgendes:

$('#calendar').fullCalendar({ 
 
    viewRender: function(view, $element) { 
 
    $element.find('.fc-day-number').each(function() { 
 
     var $this = $(this); 
 
     var match = (/^(\d+)\-(\d+)\-(\d+)$/).exec($this.attr('data-date')); 
 
     var date = new Date(+match[1], +match[2], +match[3]); 
 

 
     $(this).wrapInner('<a href="http://www.example.com/booking.php?booking_date=' + encodeURIComponent(date.toUTCString()) + '" target="_blank"></a>'); 
 
    }); 
 
    } 
 
});

<link href="http://fullcalendar.io/js/fullcalendar-2.7.2/fullcalendar.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 
 
<script src="http://fullcalendar.io/js/fullcalendar-2.7.2/fullcalendar.min.js"></script> 
 
<div id="calendar"></div>

Answer 2

$('body').on('click', '.fc-day-number', function(event) { 
 
    var target = event.target; 
 
    var day = parseInt(target.innerHTML); 
 
    var date = $(target).attr('data-date'); 
 
    var url = 'http://www.example.com/booking.php?booking_date=' + date; 
 
    var win = window.open(url, '_blank'); 
 
    win.focus(); 
 
})

.fc-day-number { 
 
    cursor: pointer; 
 
}