完整日历在空单元格中添加锚点
Full Calender adding anchor in the empty cells
我在预订页面上使用 Adam Shaw's Full Calender。
现在我想自定义这个日历,每个空单元格都应该有一个 link "Place Booking"。单击此锚点应在新选项卡中将其打开,并获取 URL.
中该单元格的日期
这是我的代码
$('.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>');
});
我暂时将锚定在单元格的天数上。
但问题是,当我从插件的后退和前进按钮更改月份时,锚点消失了,我也无法获取单元格的日期。
我不是 JS 专家任何帮助将不胜感激。
试试这个:
$('#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>
$('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;
}
我在预订页面上使用 Adam Shaw's Full Calender。
现在我想自定义这个日历,每个空单元格都应该有一个 link "Place Booking"。单击此锚点应在新选项卡中将其打开,并获取 URL.
中该单元格的日期这是我的代码
$('.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>');
});
我暂时将锚定在单元格的天数上。 但问题是,当我从插件的后退和前进按钮更改月份时,锚点消失了,我也无法获取单元格的日期。
我不是 JS 专家任何帮助将不胜感激。
试试这个:
$('#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>
$('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;
}